Coding Accessible Interactions & Mechanics

Take these skills up a notch as we continue our from-scratch web app building by implementing accessible versions of common components.

This workshop is intended for web developers of all skill and experience levels. Knowledge of the Web Platform would be helpful (HTML, CSS, and JavaScript).

Workshop topics include:

Interactions & Mechanics Previously in the Manual Testing & Tools workshop, we examined how to use various tools to audit how usable an existing web application is for keyboard and screen reader users.

Now we'll take these skills up a notch as we continue our from-scratch web app building by implementing accessible versions of common components.

Workshop topics include:

The Keyboard as the Most Essential Tool

In this section we'll explore how to ensure your site can be used without a mouse or trackpad. You'll learn various CSS visibility techniques and how they impact keyboard and screen readers users. You’ll also implement skip links to save users from unnecessary tabbing.

How Screen Readers Overlap with Keyboard Access

Screen readers allow users to navigate our pages beyond just the Tab key. In this part of the workshop, you'll learn the different interaction modes for screen readers, and how to enable & test them in an application. We will also discuss the importance (and limitations) of analytics and WebAIM user surveys for prioritizing user flows.

Focus Management with JavaScript

Modals, drop downs, removing or reordering items...these are all scenarios where focus management with JavaScript is key to a good user experience. In this section we'll examine the best approaches to intuitive key event handling and navigation. You'll also gain experience with implementing roving tabindex and writing automated tests for a date picker component.

Announcements with Assistive Technology

There are many situations where new information is presented in our applications that needs to be announced in screen readers: chat boxes, alerts and errors, toast notifications, and more. Learn how to add ARIA Live Regions to an application, when to make announcements, and how much to say. You'll also learn about client-side routing techniques that tie focus management and announcements together.

Advanced Scripting with ARIA

When using ARIA and JavaScript together, it’s important to learn about some of the cross-platform intricacies. The workshop wraps up with some advanced ARIA techniques related to using screen readers with a date picker, including screen reader modes and the effects of role=”application”.