GAAD 2021 Workshop: Translating Design Wireframes into Accessible HTML/CSS

The 2-part workshop recordings are now available for registrants.

Workshop Overview

The most efficient way to build accessible websites and apps is to “shift left” by incorporating accessibility testing into the earliest stages of your development and design process.

We will walk you through the process of analyzing a wireframe from an accessibility perspective, making coding decisions to optimize for accessibility, implementing that code, testing your code, and troubleshooting.

This was an interactive workshop focused on giving you practical experience integrating accessibility into the design and development process and helping you build your accessibility problem-solving skills.

See Part 1 of the Workshop below:

Jump to specific parts of the Part 1 video recording using our chapters list:

• 00:00 Introduction, Prep Materials, and Agenda
• 05:25 Overview of Agile Accessible Development
• 24:33 Transformation Practices
• 43:33 Team Practices
• 45:09 UX Design Process Overview
• 1:05:58 Annotation Design Interactive Exercises
• 1:10:07 Exercise 1
• 1:31:48 Exercise 2
• 1:38:16 Exercise 3
• 1:52:40 Exercise 4
• 2:01:40 Passing Off Designs
• 2:05:28 Q&A

See Part 2 of the Workshop below:

Jump to specific parts of the Part 2 video recording using our chapters list:

• 00:00 Introduction, Day 1 Recap, and Project Setup
• 13:35 Codebase Overview
• 17:16 axe Accessibility Linter for VS Code
• 19:35 Unit Test and Translated Design Wireframes Overview
• 29:49 Run & Fix Failing Unit Tests
• 1:06:25 Automated Accessibility Testing using axe DevTools Chrome Browser Extension
• 1:21:24 axe DevTools Pro Overview
• 1:25:03 Intelligent Guided Tests™ (IGT) Overview
• 1:26:10 Page Information IGT demo
• 1:33:01 Keyboard IGT demo
• 2:00:10 Images IGT demo
• 2:25:12 Forms IGT demo
• 2:53:21 Closing Remarks