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