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>