E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: selectboxit Combo box Accessibility

Number of posts in this thread: 4 (In chronological order)

From: Ravindra Kumar Jain
Date: Mon, Aug 25 2014 4:51AM
Subject: selectboxit Combo box Accessibility
No previous message | Next message →

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.

From: Bryan Garaventa
Date: Mon, Aug 25 2014 10:36AM
Subject: Re: selectboxit Combo box Accessibility
← Previous message | Next message →

The current markup for the simulated combobox is as follows:








SelectBoxIt is:





<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">




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">




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">




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">




a Stateful UI Widget</a>
</li>
</ul>


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

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Fri, Aug 29 2014 8:45AM
Subject: Re: selectboxit Combo box Accessibility
← Previous message | Next message →

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

Susie Stanzel

From: Bryan Garaventa
Date: Fri, Aug 29 2014 11:17AM
Subject: Re: selectboxit Combo box Accessibility
← Previous message | No next message

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.








SelectBoxIt
is:




<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">



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">



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">



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">



a Stateful UI Widget</a>
</li>
</ul>