WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Maxability Accessibility for all
Date: Oct 11, 2016 8:15PM

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 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 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.
> > > at http://webaim.org/discussion/archives
> > > > > >