WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessibility of the link text "What's this?"

for

From: Wu, Jingjing
Date: Oct 10, 2016 6:36PM

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 REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Monday, October 10, 2016 4:42 PM
To: WebAIM Discussion List < <EMAIL 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 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.