Category: aria

Accessible Custom Select Dropdowns

Post author By Dennis
Post date August 1, 2017
5 Comments on Accessible Custom Select Dropdowns

In web development, creating custom select dropdowns is difficult. It requires a lot of resources to sufficiently design (annotating the interaction, etc) and develop (the Javascript is fairly complex and the ARIA isn’t easy) and then test. Additional requirements such as option groups and auto-suggest make it even more challenging and time-consuming, and usually frustrating.

Most often the result is not fully accessible; browser and assistive technology is inconsistent; and implementations vary across the web. This is why it’s always better to use native selects with HTML/web. (Native components is also a better choice for native apps.) Don’t forget that HTML selects can be styled with CSS; see these resources by Scott O’Hara, RTD, Filament Group, and LugoLabs.

If you must implement a custom select dropdown, you will most like need to use the ARIA listbox role, combobox role (which specifies a composite widget), and often a combination of those roles. The option role is also required and usually a few other ARIA attributes (for label, state, etc.).

Examples

Here are some great examples which will save many folks a lot of time—if you must customize!

Anatomy of an Accessible Auto Suggest (UX Mastery) by Adem Cifcioglu
- Modified version by Web Axe author: Accessible Autosuggest Dropdown
Custom Select by Deque Systems
Combobo — accessible combobox module by Harris Schneiderman (of Deque Systems) combobo on github
Building an accessible auto-complete (Slideshare) by @russmaxdesign and now Russ’ preso for ID24 on YouTube!
Accessible Autocomplete by Adina Halter
jQuery accessible autocomplete list by Nicolas Hoffmann
Accessible Autocomplete examples by alphagov (gov.uk); related article about testing autocomplete.
Basic autocomplete (activedescendent) CodePen by Heydon Pickering
Collapsible Dropdown Listbox Example by W3C (from comments)
Combobox with Listbox Popup Examples by W3C
Gerard Cohen’s custom select: Presentation video (YouTube) / Web-based slide deck / code demo
Styling a Select Like It’s 2019 by filament group
Building an accessible autocomplete control by Adam Silver (Feb. 2020) demo
<select> your poison by Sarah Higley (Dec. 2019)

screen shot of custom select; category dropdown and submit button

Layout Tables Tip

It’s 2015, so hopefully web developers know that table elements should not be used for layout. There are many reasons why CSS for layout is better but at the core, HTML tables are data tables; they’ve always been meant for data.

But even today, sometimes a table is used for layout, for whatever reason—time constraints, lack of CSS skills, legacy code, etc.

If a table is used for layout, add ARIA role of presentation to the table element. This will remove the table elements from the Accessibility API which provides for a better user experience for users of assistive technology, particularly screen readers.

Other elements such as caption, summary, and thead should be removed. See the Microsoft resource ARIA Presentation Table Error.

Here’s a code example derived from a W3C example for the use of role=presentation. The following code in the HTML tree:

<table role="presentation"> <tr><td>Foo bar</td><tr> </table>

Becomes this in the accessibility tree:

<> <><>Foo bar</></> </>

A11Y Roundup, Summer 2013

Post author By Dennis
Post date September 8, 2013
No Comments on A11Y Roundup, Summer 2013

Here are some great links from this past summer. Enjoy!

Designing with Empathy – slideshare by Aaron Gustafson.
Accessible Mega Menu – by Adobe.
Accessible Dropdown Menus, a WordPress plugin – by Graham Armfield and Amy Hendrix.
Accessibility tutorial – by Matt Long.
Introduction to ARIA Widgets – by Jason Kiss.
Top signs that your new web project won’t be accessible – by BDaily.co.uk.
5 HTML5 and ARIA design patterns – by Léonie Watson and Steve Faulkner.
Keyboard and Interaction Accessibility Techniques – slideshare by Jared Smith.
Current State of Authoring Accessible SVG – by Doug Schepers.

aria conference csun presentations

CSUN13 Summary

Last week, my author Dennis Lembree attended the 28th Annual International Technology and Persons with Disabilities Conference (better known as CSUN) at the Manchester Grand Hyatt in San Diego, California.

Dennis presented one session “Developing an Accessible Widget with ARIA” representing his day job company. You may download Dennis’ PowerPoint file here.

WebAIM announced that there is now an API for WAVE, their web accessibility evaluation tool. It has a very affordable pricing model, and the first 100 “credits” are free with registration.

Besides the sessions, there are many activities happening at CSUN including the Tweetup, SS12 Finals, and the first WordPress accessibility meetup! A highlight was Deque Systems’ “Amazing Evening” event featuring a guitar player who played with his feet, and who was also a hilarious comedian!

Props to the Toronto accessibility crew who had great representation again. Met more Canadians this year (thanks to @Jennison) including Bill Gregory, George Zamfir and Jorge Mori.

Examples

Other articles

Tools

Code Examples

More