WebAIM - Web Accessibility In Mind

E-mail List Archives

Using aria-describedby as aria-controls hack

for

From: Hugh B. Ristić
Date: Nov 21, 2014 9:15AM

Dear Knowledgable People,

I would like to use the *aria-controls* property to provide an affordance
for users accessing a page with a screen reader to be able to optionally
set focus to a controlled element in response to the user initiating a
keyboard command. My understanding, based on this article on Juicy Studio (
http://juicystudio.com/article/aria-controls-lack-support.php) and personal
experimentation, is that the only browser/screen reader combination that
supports this currently is Firefox/JAWS, which announces "Press JAWS key +
ALT + M to move to controlled element". Of course, this is a real pain,
since this would be incredibly useful functionality for today's rich
internet applications, if it were better supported.

My question is if it would be appropriate to create a shim of sorts to
approximate this behavior using JavaScript and *aria-describedby*, since
this property is better supported. Basically the pattern would be as
follows:

- An attribute, *data-aria-controls*, with its value set to the ID of
the controlled element, would be attached to a control in the HTML.
- On page load, a script would apply the *aria-describedby* property to
any controls that had the *data-aria-controls *attribute, with the value
of the property set to the ID of an element that contained the string,
"Press CTRL + CMD + ALT + M to move to controlled element"
- With focus on a control element, pressing the key command would shift
focus to the controlled element.
- You could provide the screen reader user the ability to turn off the
*aria-describedby* cues if they wanted, once they got familiar with the
application.

I hate to use a hack like this, but with such limited support and such a
pressing need, it seems like it might work as a solution. Once screen
reader support reached the needed threshold, one could simply modify the
code library to ditch the *aria-describedby* hack and, instead have it
replace any instances of *data-aria-controls* with *aria-controls*.

What do you think?

-Hugh