Virtual Workshop: Translating Design Wireframes into Accessible HTML/CSS

Success! You may now watch the 2-part workshop recording.

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 is 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 using our chapters list:

  • 00:00 Introduction, Prep Materials, and Agenda
  • 03:14 Overview of Agile Development
  • 17:23 Seven Transformation Practices
  • 31:21 Nine Team Practices
  • 35:00 Q&A
  • 42:47 UX Design Process Overview
  • 46:45 Design Annotation Principles / Communication Basics
  • 58:18 Design Communication Exercise Overview (projects and goals)
  • 1:01:53 Q&A
  • 1:10:33 Exercise 1 (Design Communication)
  • 1:35:21 Exercise 2 (Design Communication)
  • 1:53:48 Exercise 3 (Design Communication)
  • 2:02:51 Part 1 Closing Remarks & Part 2 Prep

See Part 2 of the Workshop below:

 

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

  • 00:00 Exercise 4 (Design Communication)
  • 04:48 Introduction and Agenda
  • 17:58 Review Design Wireframes, Convert Requirements, and Run End-to-End (e2e) Tests
  • 25:02 Intelligent Guided Testing and axe Beta Demo
  • 39:24 Q&A
  • 48:35 More Intelligent Guided & e2e Tests
  • 58:29 Q&A
  • 1:04:08 Build Modal from Scratch Exercise
  • 2:08:11 Final Q&A and Closing Remarks