Translating Design Wireframes Into Accessible HTML/CSS

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.

As a key accessibility practice taking place early in design and development, translating a wireframe into web content is a common, but easy to avoid pitfall. In this webinar, Harris 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 session is for you if you’d like to learn how to:

• Take a wireframe and learn how to properly annotate it for accessibility.
• Translate the requirements from the wireframe into an implemented component.
• Test the component for accessibility during the development phase.

Watch below:

• 00:00 Introduction & Agenda
• 01:20 Overview to 'Shift-left' Accessibility
• 05:54 Design Annotation Principles
• 11:55 Design Annotation Example walk-thru
• 22:50 Keyboard Interaction
• 24:04 Tips when working with Development
• 29:10 axe-core Testing Library
• 30:35 Demo: Accessibility Testing
• 49:14 Q&A

Make a major impact before a line of code is ever written. Learn more about Accessible Design and Development.