E-mail List Archives
Thread: Accessible Location List with Key
Number of posts in this thread: 2 (In chronological order)
From: Matt Thompson
Date: Tue, Apr 19 2016 11:33AM
Subject: Accessible Location List with Key
No previous message | Next message →
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.
From: Bryan Garaventa
Date: Tue, Apr 19 2016 12:04PM
Subject: Re: Accessible Location List with Key
← Previous message | No next message
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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Matt Thompson
Sent: Tuesday, April 19, 2016 10:33 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accessible Location List with Key
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.