WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: selectboxit Combo box Accessibility

for

From: Bryan Garaventa
Date: Aug 25, 2014 10:36AM

The current markup for the simulated combobox is as follows:

<span class="selectboxit-container selectboxit-container" role="combobox" aria-expanded="false" aria-haspopup="true" aria-owns=""
aria-autocomplete="list">
<span tabindex="0" class="selectboxit test selectboxit-enabled selectboxit-btn" style="width: 204px;" name="test" unselectable="on">
<span class="selectboxit-option-icon-container">
<i class="selectboxit-default-icon selectboxit-option-icon selectboxit-container" unselectable="on">
</i>
</span>
<span class="selectboxit-text" aria-live="polite" style="max-width: 174px;" unselectable="on" data-val="SelectBoxIt is:">
SelectBoxIt is:</span>
<span class="selectboxit-arrow-container" unselectable="on">
<i class="selectboxit-arrow selectboxit-default-arrow" unselectable="on">
</i>
</span>
</span>
<ul tabindex="-1" class="selectboxit-options selectboxit-list" role="listbox" aria-hidden="true" style="min-width: 204px;">
<li class="selectboxit-option selectboxit-option-first selectboxit-selected" role="option" data-val="SelectBoxIt is:"
data-disabled="false" data-id="0">
<a class="selectboxit-option-anchor">
<span class="selectboxit-option-icon-container">
<i class="selectboxit-option-icon selectboxit-container">
</i>
</span>
SelectBoxIt is:</a>
</li>
<li class="selectboxit-option" role="option" data-val="a jQuery Plugin" data-disabled="false" data-id="1">
<a class="selectboxit-option-anchor">
<span class="selectboxit-option-icon-container">
<i class="selectboxit-option-icon selectboxit-container">
</i>
</span>
a jQuery Plugin</a>
</li>
<li class="selectboxit-option" role="option" data-val="a Select Box Replacement" data-disabled="false" data-id="2">
<a class="selectboxit-option-anchor">
<span class="selectboxit-option-icon-container">
<i class="selectboxit-option-icon selectboxit-container">
</i>
</span>
a Select Box Replacement</a>
</li>
<li class="selectboxit-option selectboxit-option-last" role="option" data-val="a Stateful UI Widget" data-disabled="false"
data-id="3">
<a class="selectboxit-option-anchor">
<span class="selectboxit-option-icon-container">
<i class="selectboxit-option-icon selectboxit-container">
</i>
</span>
a Stateful UI Widget</a>
</li>
</ul>
</span>

Reference:
http://www.w3.org/TR/wai-aria/roles#combobox

The primary reasons why this isn't working, include
1. The tabindex=0 attribute is not located within the element that includes role="combobox", so screen readers like JAWS aren't
interfacing properly with it in the Accessibility Tree.
2. aria-owns doesn't control selection, instead aria-activedescendant is needed on the same element that includes role=combobox for
this purpose, which must point to the ID of the selected Option node (the same element that includes role=option), which must be
updated appropriately.
3. aria-expanded must be updated appropriately between "true" or "false" when the dropdown is rendered or dismissed. (This may
already be happening but I can't tell)
4. All of the elements that include role=option must include tabindex="-1" in order to force IE to recognize the value association
when set using aria-activedescendant. (This is a bug)
5. The element that includes role=combobox is missing an explicit label using either aria-label or aria-labelledby.

That should do the trick.

Best wishes,
Bryan


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Ravindra Kumar Jain
Sent: Monday, August 25, 2014 3:51 AM
To: webaim-forum
Subject: [WebAIM] selectboxit Combo box Accessibility

Hi List,
Thanks for your valuable previous response on JAWS 15 shortcuts on ARIA Landmarks Yes I indeed missed out on "R' key for navigating
ARIA Region.
This time I have a new query for which please visit the following page

http://gregfranko.com/jquery.selectBoxIt.js/

The combo box used here has a jquery plugin called "selectboxit"
developed by Greg franko which is not accessible. The problem is were using it in one of our projects ,Can anybody tell me what
suggestions I can pass to developers in order to make it accessible, given the constraint that "Can't do away with this jquery
plugin as it required by the project."
What ARIA Role , States , & Properties we can insert .

Right now the only closest suggestion I can think of is the following jsfiddle

http://jsfiddle.net/reimeister/3LdWg/show/

Thanks in Advance,

Ravindra Kumar Jain
Accessibility Engineer
Onya Digital Solutions Pvt. Ltd.