E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Wu, Jingjing
Date: Mon, Oct 10 2016 3:25PM
Subject: Accessibility of the link text "What's this?"
No previous message | Next message →

Hello everyone,

I plan to create a glossary to explain the terms used on our library website and add a superscript link "What's this?" beside each term on web pages. According to accessibility principles, link text should be meaningful. In this regard, "What's this" looks like another "Click here". If I include the entire term, say, "What's interlibrary loan?", it could be too long sometimes. Do you have some suggestions?

Thanks,
Jingjing Wu
Web Librarian
Texas Tech University Libraries

From: Birkir R. Gunnarsson
Date: Mon, Oct 10 2016 3:42PM
Subject: Re: Accessibility of the link text "What's this?"
← Previous message | Next message →

What happens when the user clicks this control?
Does it navigate to a page with a list of definitions, or does the
definition pop up in a dialog or control or a footnote?
If it triggers a pop up you could use a button instead of a link (and
technically, by WCAG standards, you don't have to worry about link
text any more).
It would be best to make the term itself a button that, when clicks
triggers a pop up with the definition.
The simplest form of pop up is just a JavaScript button.
The <button onclick="alert('mad librarians' board of
directors');">MLBD</button> will review your qualifications within 2
weeks of submission.
That way the phrase itself is not repeated for screen reader users and
users can look at the list of buttons.
You can also include a CSS background image of q questionmark with the text.
You could put an ID on each definition and point to it with
aria-describedby from definition buttons or links
The <span id="dfn1">MLDB</span> <a href="#"
aria-describedby="dfn1">What's this?</a> will review your application.
Screen readers should read "what's this MLBD" link" when focus goes on
the link (sadly screen readers do not include aria-describedby in the
list of links).
If you implement these links as footnote references, check out:
https://dive4cb.github.io/footnotes/footnotes.html
(we are still working on minor documentation details but these
examples work pretty well).

Sadly the HTML5 abbreviation tag does not work with screen readers.
The <abbr title="Mad Librarians' bord of directors">MLBD</abbr> ...
(and I believe these are not keyboard focusable).





On 10/10/16, Wu, Jingjing < = EMAIL ADDRESS REMOVED = > wrote:
> Hello everyone,
>
> I plan to create a glossary to explain the terms used on our library website
> and add a superscript link "What's this?" beside each term on web pages.
> According to accessibility principles, link text should be meaningful. In
> this regard, "What's this" looks like another "Click here". If I include
> the entire term, say, "What's interlibrary loan?", it could be too long
> sometimes. Do you have some suggestions?
>
> Thanks,
> Jingjing Wu
> Web Librarian
> Texas Tech University Libraries
>
> > > > >


--
Work hard. Have fun. Make history.

From: Wu, Jingjing
Date: Mon, Oct 10 2016 6:36PM
Subject: Re: Accessibility of the link text "What's this?"
← Previous message | Next message →

Thank you so much for the suggestions and explanation, Birkir.

I created a page for glossaries. All these "what's this" links will go to the specific entry on the Glossaries page. I will probably use the aria-describedby.

I appreciate your help.
Jingjing

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Monday, October 10, 2016 4:42 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessibility of the link text "What's this?"

What happens when the user clicks this control?
Does it navigate to a page with a list of definitions, or does the definition pop up in a dialog or control or a footnote?
If it triggers a pop up you could use a button instead of a link (and technically, by WCAG standards, you don't have to worry about link text any more).
It would be best to make the term itself a button that, when clicks triggers a pop up with the definition.
The simplest form of pop up is just a JavaScript button.
The <button onclick="alert('mad librarians' board of directors');">MLBD</button> will review your qualifications within 2 weeks of submission.
That way the phrase itself is not repeated for screen reader users and users can look at the list of buttons.
You can also include a CSS background image of q questionmark with the text.
You could put an ID on each definition and point to it with aria-describedby from definition buttons or links The <span id="dfn1">MLDB</span> <a href="#"
aria-describedby="dfn1">What's this?</a> will review your application.
Screen readers should read "what's this MLBD" link" when focus goes on the link (sadly screen readers do not include aria-describedby in the list of links).
If you implement these links as footnote references, check out:
https://dive4cb.github.io/footnotes/footnotes.html
(we are still working on minor documentation details but these examples work pretty well).

Sadly the HTML5 abbreviation tag does not work with screen readers.
The <abbr title="Mad Librarians' bord of directors">MLBD</abbr> ...
(and I believe these are not keyboard focusable).





On 10/10/16, Wu, Jingjing < = EMAIL ADDRESS REMOVED = > wrote:
> Hello everyone,
>
> I plan to create a glossary to explain the terms used on our library
> website and add a superscript link "What's this?" beside each term on web pages.
> According to accessibility principles, link text should be meaningful.
> In this regard, "What's this" looks like another "Click here". If I
> include the entire term, say, "What's interlibrary loan?", it could be
> too long sometimes. Do you have some suggestions?
>
> Thanks,
> Jingjing Wu
> Web Librarian
> Texas Tech University Libraries
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Maxability Accessibility for all
Date: Tue, Oct 11 2016 8:15PM
Subject: Re: Accessibility of the link text "What's this?"
← Previous message | No next message

I second Birkir.
You can also have a look at the implementation that is available on WCAG
2.0 guidelines page. Any term that needs additional description is
presented in the glossary section and a link is provided to the term
pointing to the definition.
Eg: In SC 1.1.1 non-text content, the link provided as follows.
<a title="definition: non-text content" href="#non-text-contentdef"
class="termref">non-text content</a>
Here is the link for WCAG 2.0 guidelines page.



*https://www.w3.org/TR/WCAG20/ <https://www.w3.org/TR/WCAG20/>*



On Tue, Oct 11, 2016 at 6:06 AM, Wu, Jingjing < = EMAIL ADDRESS REMOVED = > wrote:

> Thank you so much for the suggestions and explanation, Birkir.
>
> I created a page for glossaries. All these "what's this" links will go to
> the specific entry on the Glossaries page. I will probably use the
> aria-describedby.
>
> I appreciate your help.
> Jingjing
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Birkir R. Gunnarsson
> Sent: Monday, October 10, 2016 4:42 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessibility of the link text "What's this?"
>
> What happens when the user clicks this control?
> Does it navigate to a page with a list of definitions, or does the
> definition pop up in a dialog or control or a footnote?
> If it triggers a pop up you could use a button instead of a link (and
> technically, by WCAG standards, you don't have to worry about link text any
> more).
> It would be best to make the term itself a button that, when clicks
> triggers a pop up with the definition.
> The simplest form of pop up is just a JavaScript button.
> The <button onclick="alert('mad librarians' board of
> directors');">MLBD</button> will review your qualifications within 2 weeks
> of submission.
> That way the phrase itself is not repeated for screen reader users and
> users can look at the list of buttons.
> You can also include a CSS background image of q questionmark with the
> text.
> You could put an ID on each definition and point to it with
> aria-describedby from definition buttons or links The <span
> id="dfn1">MLDB</span> <a href="#"
> aria-describedby="dfn1">What's this?</a> will review your application.
> Screen readers should read "what's this MLBD" link" when focus goes on the
> link (sadly screen readers do not include aria-describedby in the list of
> links).
> If you implement these links as footnote references, check out:
> https://dive4cb.github.io/footnotes/footnotes.html
> (we are still working on minor documentation details but these examples
> work pretty well).
>
> Sadly the HTML5 abbreviation tag does not work with screen readers.
> The <abbr title="Mad Librarians' bord of directors">MLBD</abbr> ...
> (and I believe these are not keyboard focusable).
>
>
>
>
>
> On 10/10/16, Wu, Jingjing < = EMAIL ADDRESS REMOVED = > wrote:
> > Hello everyone,
> >
> > I plan to create a glossary to explain the terms used on our library
> > website and add a superscript link "What's this?" beside each term on
> web pages.
> > According to accessibility principles, link text should be meaningful.
> > In this regard, "What's this" looks like another "Click here". If I
> > include the entire term, say, "What's interlibrary loan?", it could be
> > too long sometimes. Do you have some suggestions?
> >
> > Thanks,
> > Jingjing Wu
> > Web Librarian
> > Texas Tech University Libraries
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > at http://webaim.org/discussion/archives
> > > > > >