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
More details at: https://hasgeek.com/helloa11y/helloa1...
Watch video How to create accessible JavaScript widgets with basic HTML components online without registration, duration hours minute second in high quality. This video was added by user Hasgeek TV 11 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 593 once and liked it 7 people.