Accessible autocomplete widgets that work for all

Most autocomplete widgets are built to be used by sighted users with mouse & keyboard. By combining simple HTML and a few lines of JavaScript, it's possible to create a beautiful, highly accessible autocomplete - truly working for all.

Accessible autocomplete widgets that work for all

Joshua Muheim

Joshua Muheim

While most autocomplete widgets simply aren’t created with accessibility in mind, since the W3C introduced the WAI-ARIA standard in 2014, there exist concise requirements regarding accessible implementations of various interactive usage patterns. Sadly, the WAI-ARIA standard isn’t easy and compatibility varies a lot between browsers and screen readers.

As such, it’s still a pain to create an accessible autocomplete according to WAI-ARIA. Instead of applying WAI-ARIA, it’s possible to create most interactive usage patterns by dividing them into simple HTML form elements, connecting them with some JavaScript, styling them as wanted, and adding only a tiny bit of ARIA here and there for polishing. The result is a widget that relies on rock solid browser standard behavior in most of its functionality - a widget that’s compatible with each and every browser supporting basic HTML, CSS and JavaScript – and as such, assistive devices like screen readers get everything they need for providing good interaction to their users.

In one sentence: it’s a widget that’s truly working for all (and extremely cheap performance-wise).

FEC ioana-mitrea 30aug17 008

What we'll do on the day

During the first half of the workshop, I will investigate the accessibility of some well known autocompletes (like Google’s, Select2, jQuery UI’s, etc.) using a desktop and a mobile screen reader (NVDA and VoiceOver/iOS). I will then show the idea behind using traditional HTML for creating non-standard interactive usage patterns by demoing an accordion, a tablist and a carousel - all from our Accessibility Developer Guide(ADG by Access for All Swiss Foundation for the use of technology for the disabled) and implemented using HTML form elements.

During the second half of the workshop, the audience will be instructed to create their own implementation of an accessible autocomplete, first by dividing this usage pattern into its basic HTML form elements and then connecting them using JavaScript and ARIA (if needed). The goal is to ultimately receive some pull requests of possible implementations for the ADG on GitHub.

At the end of the workshop, the attendees will have understood that a lot of interactive elements on websites can be implemented using traditional HTML form elements, resulting in great usability, accessibility, performance, and cleaner, lesser code.

Intended audience

UX folks, Frontenders, Accessibility folks – everybody who’s interested in creating clean and working HTML

What you need to bring

Laptop – so you can work on your own implementation of an accessible JavaScript widget

When?

29 August from 9:00 to 17:00 at Belvoirpark, Seestrasse 125, 8002 Zürich

Questions?

We are happy to answer your questions, just email us.

Support a accessible web!

Proceeds go to Access for All