WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: selectboxit Combo box Accessibility

for

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Aug 29, 2014 8:45AM


Would you please send the corrected code so we can all see it?

Susie Stanzel

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Monday, August 25, 2014 11:37 AM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] selectboxit Combo box Accessibility

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.
This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.