Accessibility Testing Practices for Web Components and Patterns

Session Summary:

This class will cover testing web components and patterns, such as carousels, accordions, buttons, form fields, tables, modals, and navigation menus. We will build on knowledge of basic accessibility concepts including proper structure, keyboard access and usability, and similar concepts.

Description:

With design systems, pattern libraries, and frameworks so commonly used today to create websites and web applications, thinking on a web component or pattern level when designing for and testing for web accessibility is becoming more and more important. When we first learn to test or design for accessibility, we tend to piecemeal the learning by topic, such as headings, lists, and so on. Once we have this baseline, it’s very helpful to start thinking about accessibility at the component or pattern level. Thinking this way will streamline both your development and testing and perhaps provide a more cohesive experience. In this class, we will discuss common components used across the web and how to test them for accessibility. We will use free tools such as the WAVE extension, the Microsoft Insights extension, Paul J. Adam’s Focus Order bookmarklet, and Google Chrome’s developer tools. Components discussed will include (the dreaded) carousels, accordions, buttons, form fields, tables, modals, and navigation menus. We will also discuss different states of elements and what factors should be taken into consideration when states of elements change, such as when links are active, inactive, followed, or receiving focus. Along the way, we will also cover how important it is to think about native HTML semantics when building custom JavaScript elements. HTML elements have many accessibility necessities like keyboard interaction built into them. If a conscious choice is made to use a custom element instead of an HTML element, it’s important to know all the functions of the HTML element so these can all be replicated in the custom element.

To get the most out of this class, it will be helpful for you to know the basic concepts of accessibility testing, such as color contrast, keyboard access and usability, tab order, applying appropriate structure, and using text alternatives. This class will involve looking into some code, but you do not need to be a developer to attend. Content managers, UX designers, and others who are part of development processes of websites and web applications will be able to apply concepts from this class in their work.

Please come to class with the WAVE extension, Microsoft Insights extension, Paul J Adam Focus Order bookmarklet, and Google Chrome installed if you would like to participate in the exercises.

Practical Skills:

• Using free accessibility testing tools to test components and patterns
• Coding & Testing elements in their various states (active, inactive, hover, focus, etc.)
• Mirroring custom element functions with native HTML element functions

Presentation Materials:

• Link to slide deck as provided by the speaker (external site) (external site) for