- Notifications
You must be signed in to change notification settings - Fork0
Accessible Combobox (WAI-ARIA v1.2 compliant)
License
junjizhi/accessible-combobox
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This repo implements a WAI-ARIA v1.2 compliant combobox with a listbox and a dropdown button.
For more details, please check out my blog:Building an Accessible Combobox
Quote fromthe ARIA site:
The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns. Authors and developers of User Agents, Assistive Technologies, and Conformance Checkers are advised to review this section carefully to understand the changes.
ARIA Wiki also has detailed explanations of the version issues.
Essentially, if a combobox implementation follows ARIA v1.1 specs, it would have poorscreen reader support.
The major differences between v1.1 and v1.2 include:
role="combobox"is on a wrapper<div>(v.1.1) or<input>(v.1.2)aria-owns(v.1.1) vs.aria-controls(v1.2)
As a result, it is important to get these details right to make your combobox accessible.
npm i accessible-combobox
HTML:
<inputid="cb1-input"type="text"role="combobox"aria-label="Enter a state"aria-autocomplete="both"aria-expanded="false"aria-controls="lb1"aria-haspopup="listbox"/><buttontype="button"id="cb1-button"aria-label="open state list"tabindex="-1"> ▼</button><ulid="lb1"role="listbox"aria-label="States"></ul><!-- Hidden options list --><ulid="listbox-options"class="hidden"><liid="lb1-al"class="hidden"> Alabama</li><liid="lb1-ak"class="hidden"> Alaska</li><!-- ... --></ul>
Notes:
- You can wrap the input and the button in a div like in
example.jsif you want to put them in the same CSS class. - The two
uldon't have to be placed next to the input or button. You can place them anywhere in the HTML.
#"auto" data-snippet-clipboard-copy-content="new Combobox( document.getElementById("cb1-input"), document.getElementById("cb1-button"), document.getElementById("lb1"), "Alabama", Array.from(document.querySelectorAll("#listbox-options > li")), function () { console.log("Showing items"); }, function () { console.log("Hiding items"); }, function () { console.log("Changing an item"); }, function () { console.log("An Error happens"); });">
newCombobox(document.getElementById("cb1-input"),document.getElementById("cb1-button"),document.getElementById("lb1"),"Alabama",Array.from(document.querySelectorAll("#listbox-options > li")),function(){console.log("Showing items");},function(){console.log("Hiding items");},function(){console.log("Changing an item");},function(){console.log("An Error happens");});
For more details, check outindex.html andexample.js.
When workinng the ARIA v1.1 combobox, I found a few problems withtheir reference implementation.This repo is an improved version of accessible combobox implementation with ARIA v1.2 compliance.
In particular, I added a few properties to the Combobox class:
- Initial value
- More callback hooks to make it to extend and implement other behaviors
- ES6 class syntax
For more details, please check outmy blog.
The class requires theinput,button andul elements to have the correctaria-* attributes.
TODO:
- handle all ARIA related attributes in Javascript (in the Combobox constructor function).
Search happens totally in the client side / browser. When user enters a search term, the scriptmatches the results with the term and renders the list. I do it this way becauseARIA v1.2 specsrequire updatingaria-selected attributes of the options, and pointingaria-activedescendent to the selected option. Becausethese things are tightly coupled, using Javascript to rebuild the popup HTML with total control makes more sense to me, instead of assuming any HTML attributes.
The search requires a hidden list of availableoptions rendered in the HTML. In practice, the options list likely comes from the server side. It also makes it easy to work with existing framework (e.g., Rails or Phoenix) where the views areusually server side rendered.
If you are looking an accessible combobox in React, check outReach UI Combobox.
About
Accessible Combobox (WAI-ARIA v1.2 compliant)
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.