WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Ideas for solving non-distinguishable links on accordionlables

for

From: Bryan Garaventa
Date: Feb 2, 2017 5:34PM

" But my understanding is that the title attribute is not turned on by default on screen readers,"

This is actually not true any longer since screen readers are now more reliably interfacing with the accessibility tree. E.G a link that has link text plus a title attribute will set two different properties in the accessible object, the Name which is from the link text and the Description which is from the title attribute. So when using JAWS or NVDA or VoiceOver for example, when you set focus to the link it will read both.

Here however, for an accordion, simply add role="button" to the accordion link that is inside the heading plus aria-expanded to convey the state which needs to be programatically toggled between "false" when closed and "true" when open.

The use of role="button" here will separate the element type for the accordion toggle and distinguish it from the embedded link that has the same link text.

You can see working code that demonstrates this within the archive at
https://github.com/w3c/aria-practices


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com