WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JQuery Chosen accessibility problem

for

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

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 REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com