WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Location List with Key

for

From: Bryan Garaventa
Date: Apr 19, 2016 12:04PM

To do this , you need to use aria-describedby and not aria-labelledby.

E.G

<p><a href="phoenix.html" aria-describedby="type1 type2">Phoenix</a> <span class="key-marker pink"></span><span class="key-marker square-outline orange"></span></p>

When you use aria-label or aria-labelledby, you are basically saying that you want that to be the explicit label by setting the Name property for that widget and not the internal text. Setting aria-describedby sets two different properties however, the Name using the inner text, and the Description using the aria-describedby attribute.

So if you do this, when you tab to the link, it will announce both.

All of this is more fully described at
http://www.ssbbartgroup.com/blog/how-the-w3c-text-alternative-computation-works/

All the best,
Bryan




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