WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: selectboxit Combo box Accessibility

for

From: Bryan Garaventa
Date: Aug 29, 2014 11:17AM


No problem, this is pasted below.

If you examine the rendered code in FF using Object Inspector or BX (MSAA map), you can see how the control that receives focus is
explicitly labeled, and the value is set to the selected role=option node value.

<!--
Moved tabindex="0" into the surrounding span, since this should handle keyboard interaction.
Removed aria-haspopup, since this is implicitly set within all role=combobox controls.
Removed aria-owns since it wasn't doing anything, as well as aria-live=polite.
Added aria-labelledby as an explicit label.
Added IDs and tabindex="-1" to all elements with role=option.
Added aria-activedescendant to the container with role=combobox, which should be dynamically updated to point to the selected
role=option node.
-->

<span class="selectboxit-container selectboxit-container" tabindex="0" role="combobox" aria-autocomplete="list"
aria-activedescendant="opt2id" aria-labelledby="lblId" aria-expanded="false">
<span 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 id="lblId" class="selectboxit-text" 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 class="selectboxit-options selectboxit-list" role="listbox" aria-hidden="true" style="min-width: 204px;">
<li id="opt1id" tabindex="-1" class="selectboxit-option selectboxit-option-first" 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 id="opt2id" tabindex="-1" class="selectboxit-option selectboxit-selected" 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 id="opt3id" tabindex="-1" 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 id="opt4id" tabindex="-1" 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>

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Stanzel, Susan - FSA, Kansas
City, MO
Sent: Friday, August 29, 2014 7:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] selectboxit Combo box Accessibility

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.