Accessible JavaScript In Action
taught by: Andrew Olson
Session Summary
In this session, participants will examine three common Web interactions (Modals, TypeAhead, Menus) and explores ways to make them more accessible. The session will investigate different ways people can experience these barriers and look at solutions using JavaScript in simple, creative ways.
Description
Find Accessible JavaScript In Action on the Knowbility Learning Center
In this session, we will review accessibility challenges presented by these components:
1. Modals. We will examine a modal overlay that attempts to reward users with a 50% off coupon. This type of interruption can create a real barrier for people with disabilities.
2. TypeAhead or Autocomplete. We will review a site search component that attempts to help users complete their entry accurately and allow them to further refine suggested options. We will review the accessibility feature Drupal.announce and demonstrate how providing feedback to users can help them accomplish simple tasks.
3. Menus. We will evaluate complex menus that contain multiple levels of links. Navigating a multi-level menu or a mega menu can prove to be challenging for keyboard only users. This session aims to provide practical tips and solutions that will help all users, regardless of their abilities, have equal access to content and functionality.
Practical tips as well as code examples in JavaScript will be shared. The resources shared will guide you toward a better site experience that allows all users, regardless of their disability, tohave equal access to content and functionality. We will review the ARIA Authoring Practices Guide (APG) for modals (link: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) and navigation (link: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/). We will also review Drupal Announce (link: https://codepen.io/andy-blum/pen/dyjOMpa), which makes client-side updates accessible.
We will demonstrate how a keyboard-only user navigates these components as well as someone using VoiceOver for MacOS. We will also consider how these interactions can increase the user's cognitive load.
Instructor will present virtually.
This session will feature pre-recorded material that will be shown at the beginning of the session, followed by live practice or Q&A with the instructor.
Practical Skills
- Participants will learn how to improve complex components such as modals, search, and site-wide navigation.
- Participants will learn how to apply the needs of people with disabilities navigating the web in the development of websites and products.