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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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.

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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:


 
 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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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.

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>


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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:




 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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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.