WebAIM - Web Accessibility In Mind

E-mail List Archives

Announcing Region Labels on OSX

for

From: Jesse Hausler
Date: May 15, 2014 1:56PM

I'm having trouble using ARIA to get VoiceOver on OSX to announce a
descriptive title for a region.

We're prototyping a builder type application. Think Visio, but way simpler
/ smaller feature set.

We're planning to use the role="application" for the entire thing so we can
control keyboard behavior throughout the product.

The idea we are going with is to have 4 panels the user can switch between:

- Toolbar (at the top)
- Control Panel (on the left)
- Properties Panel (on the right)
- the main working canvas (in the middle)

F6 and Shift+F6 move the user from panel to panel. Each panel has a <span>
with an offscreen class, which labels the panel. We put an aria-labelledby
attribute on the outermost element of the panel which links the descriptive
span.

For example:

<section aria-labelledy="tbar">
<span class="assistiveText" id="tbar">Toolbar</span>
... rest of the panel content...
</section>

I get proper feedback using Jaws and FF: "Toolbar region..."
VoiceOver with both Safari and Chrome will state that his is a Group, which
makes sense, but it wont announce the "Toolbar" part.

We've tried using aria-describedby, aria-label, and a regular old title
attribute. The only thing that works is aria-labelledby with Jaws, nothing
on Mac.

Any experience with this sort of problem? Possible solutions?

Or did i just start myself a blog post? :)

Happy Global Accessibility Awareness Day everyone!

Jesse