WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Location List with Key

for

From: Matt Thompson
Date: Apr 19, 2016 11:33AM

Hi,

I'm trying to make a list of locations accessible to screen readers.

One column on the page has a key with an icon and description for each location type.

<ul class="key">
<li id="type1"><span class="key-marker circle blue"></span>Type 1</li>
<li id="type2"><span class="key-marker square-outline orange"></span>Type 2</li>
<li id="type3"><span class="key-marker pink"></span>Type 3</li>
</ul>

Another column has a list of locations as links grouped by country with one or more type icons next to each.

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

Ideally, when a screen reader focuses on the link, I want it to say the link text followed by the types. For example, the above item should read "Phoenix [pause] is a "Type 1" and a "Type 2". I'm struggling to figure out how to do this.

I don't have JAWS so I'm testing with both VoiceOver, the screen reader built into Mac OS X, and ChromeVox, a screen reader extension for Chrome. I've tried "aria-describedby", but neither read it, only "aria-labelled-by" works. With aria-labelledby on the link, VoiceOver reads "link Phoenix Type 1 Type 2" with no separation so it's confusing to a user to know what the link text is versus a description. ChromeVox doesn't read the link text, just "Type 1 Type 2".


Matt





------------------------------------------------------------------------
Disclaimer The information in this email and any attachments may contain proprietary and confidential information that is intended for the addressee(s) only. If you are not the intended recipient, you are hereby notified that any disclosure, copying, distribution, retention or use of the contents of this information is prohibited. When addressed to our clients or vendors, any information contained in this e-mail or any attachments is subject to the terms and conditions in any governing contract. If you have received this e-mail in error, please immediately contact the sender and delete the e-mail.