E-mail List Archives
Thread: Accessibility of the link text "What's this?"
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
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
>
>