Drupal Camp Chattanooga 2018
Parent Track: 
Design, Theming, & Front-end Development

Site designers love tab panels, accordion sets, slide shows, and hover-drop-down menu bars: anything to squeeze more content into less space.  Unfortunately, many out-of-the box tools to generate these components can be severely lacking in accessibility compliance.  At some point, you may wish to just craft your own accessibility compliant components, but how do you do that?

Using WebAIM's tutorials as a reference, we'll dive into how to build the JavaScript needed to power these important UI tools while keeping the user experience fully accessible.  Lots of code samples with be provided with clear explanation of how they work.  The examples are based on using Drupal with the Paragraphs module as your website base, but the concepts can be applied to many other kinds of content systems.

* The basics of ARIA and specifically how it applies to JavaScript powered UI controls.
* How to apply and manipulate needed ARIA properties as users interact with such controls.
* Tips and tricks for working around some common browser shortcomings to achieve accessible JavaScript powered UI that still looks good, too.
* Specific tips for providing a slideshow (carousel) experience that balances designer desires with accessibility realities

Presenation Slides are available at http://webdev-pres.iac.gatech.edu/a4jspui/