WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: improved select boxes - still accessible

for

From: Bryan Garaventa
Date: Aug 20, 2012 1:51PM

I've been experimenting with this a bit, and found that the following syntax
appears to work well.

<ul role="listbox" aria-label="Label Text" id="l" tabindex="0"
aria-activedescendant="o1">
<li role="option" aria-selected="true" aria-posinset="1" aria-setsize="3"
id="o1">
Option One
</li>
<li role="option" aria-selected="false" aria-posinset="2" aria-setsize="3"
id="o2">
Option Two
</li>
<li role="option" aria-selected="false" aria-posinset="3" aria-setsize="3"
id="o3">
Option Three
</li>
</ul>

If aria-selected is not included, JAWS won't recognize a selected item in
the list when arrowing down the page using Firefox, and will only announce
'list', but with no indication of what is selected. So if present, this
would need to be toggled from true to false accordingly on all option nodes
via scripting.

Also, in JAWS12 in IE, the presence of aria-label to set a field title on
the container element appears to hijack speech output, in that only the
label is announced every time the arrow keys are used to select a new list
item. This doesn't occur when setting focus to a DOM node directly however,
such as the LI tags.

There is also a bug in JAWS 12 and 13 regarding dynamically added listbox
controls, which renders them invisible in Firefox.

E.G

function genList(id){
document.getElementById(id).innerHTML = "<ul role="listbox"><li
role="option">One</li><li role="option">Two</li></ul>";
return false;
}

<a href="#" onclick="return genList('listId');"> Gen List </a>
<div id="listId"></div>


----- Original Message -----
From: "Jonathan Avila" < <EMAIL REMOVED> >
To: "Bryan Garaventa" < <EMAIL REMOVED> >; "Marc Haunschild"
< <EMAIL REMOVED> >; < <EMAIL REMOVED> >; "WebAIM Discussion List"
< <EMAIL REMOVED> >
Sent: Monday, August 20, 2012 10:43 AM
Subject: RE: improved select boxes - still accessible


> [Bryan wrote:]
> Will this work for Dragon usage as well, such as saying down to activate a
> keypress?
>
> If the application properly responds to "press down" which sends the down
> arrow keystrokes and then is set to watch the key press event for enter
> "press enter" via Dragon on the proper element then it should work. Other
> dragon commands for example to open a list or select a list would likely
> not work as the support for ARIA in Dragon is limited.
>
> Jonathan
>
>
>
>