WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JQuery Chosen accessibility problem


From: Bryan Garaventa
Date: Dec 30, 2016 8:20AM

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:

Here are two examples that use this model for testing.

1. A State and Country selector for editable and readonly support:

2. A typeahead search field:

This code is powered by jQuery (supports version 1.12 +> and 3.1 +>), and can be downloaded at

All the best,

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
415.624.2709 (o)

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


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:

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!