E-mail List Archives

Search E-mail List Archives for

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

From:
Date: Thu, Dec 29 2016 4:00PM
Subject: JQuery Chosen accessibility problem
No previous message | Next message →

Hello,


I'd like to use Chosen (plugin for JQuery), but it is not accessible. I
found a pull request, and I added it to the JQuery code:
https://github.com/harvesthq/chosen/pull/2047


The problem is that NVDA doesn't read the items when I press the arrow
keys in the text field. The listbox got a role ="listbox", and every
option got a role ="option" attribute. Does any idea how can I fix it?
If you can search "role" keyword in chosen.jquery.js file, you'll find
the modified code.

You can try here: http://o-soft.hu/chosen-stable


The "Into this" field (second listbox in the standard select) does not
work properly.


Is there any accessible alternative for Chosen? The simple Autocomplete
doesn't the good solution for every case, because it is great if the
selectable items appear before the user start to typing.


Thanks for your help!

Regards,

Aron

From: Bryan Garaventa
Date: Fri, Dec 30 2016 8:20AM
Subject: Re: JQuery Chosen accessibility problem
← Previous message | No next message

Hi,
The reason why this doesn't work is that the ARIA markup usage is all wrong. E.G role="listbox" is used on the input+type="text" field and that is just the start, and this will not work accessibly unless everything is recoded to use the ARIA Combobox design pattern such as is documented in the table at:
http://whatsock.com/training/matrices/#combobox

Here are two examples that use this model for testing.

1. A State and Country selector for editable and readonly support:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

2. A typeahead search field:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Substring%20Match)/demo.htm

This code is powered by jQuery (supports version 1.12 +> and 3.1 +>), and can be downloaded at
https://github.com/accdc/tsg

All the best,
Bryan



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ócsvári Áron
Sent: Thursday, December 29, 2016 3:01 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] JQuery Chosen accessibility problem

Hello,


I'd like to use Chosen (plugin for JQuery), but it is not accessible. I found a pull request, and I added it to the JQuery code:
https://github.com/harvesthq/chosen/pull/2047


The problem is that NVDA doesn't read the items when I press the arrow
keys in the text field. The listbox got a role ="listbox", and every
option got a role ="option" attribute. Does any idea how can I fix it?
If you can search "role" keyword in chosen.jquery.js file, you'll find
the modified code.

You can try here: http://o-soft.hu/chosen-stable


The "Into this" field (second listbox in the standard select) does not
work properly.


Is there any accessible alternative for Chosen? The simple Autocomplete
doesn't the good solution for every case, because it is great if the
selectable items appear before the user start to typing.


Thanks for your help!

Regards,

Aron