I’m a senior full stack web developer. Since 2014, I worked for «Access for all» (http://access-for-all.ch/), Swiss Foundation for the use of technology for the disabled, where I was part of an inclusive team. I had the opportunity to hands-on learn everything related to accessibility, while we helped to audit and optimise hundreds of websites and mobile apps. I was initiator of and main contributor to the «Accessibility Developer Guide» (https://www.accessibility-developer-guide.com/), a comprehensive introduction to accessibility, aimed at developers.
I just started working for Nothing AG (http://nothing.ch/), a lively UX focused product design agency located in Berne, Switzerland. Aligned with Nothing’s company ethos, which is creating products that truly serve humanity, we want to push accessibility both within our organisation as well as inside the UX, design and development communities.
Topic
How to create accessible JavaScript widgets with basic HTML components
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 and robust cross-browser/platform/device 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).
During the first half of the presentation, 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 datepicker, a tablist, and a carousel – all implemented using HTML form elements. During the second half of the workshop, the audience will be given advise on how to create an implementation of an accessible autocomplete, first by dividing this usage pattern into its basic HTML form elements and then connecting them using JavaScript and a tiny bit of ARIA (if needed). Another screen reader demo will proof the work done. 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
Leave a Reply