Coding Design Systems - ep10 - A11Y in your Design System with Ben Myers

1h Link to video
Tags Accessibility Coding Design Systems
Speakers Georges Gomes m4dz Ben Myers
Edit on GitHub

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about Design Systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro 00:49 - Ben Myers, a11y advocate 02:38 - Building a Design System for a documentation platform 05:21 - Guidelines in Design System 08:47 - Keep the experience consistent across a Design System 10:00 - Testing tools and accessibility 17:11 - Regularly testing your Design System’s Components 22:00 - Coding a top-level navigation with aria 29:11 - Styling using aria 32:48 - Enforcing a11y concerns for assistive devices 37:16 - Design Systems Definition: Tokens, Content, UI Kit, Components, and Documentation 50:13 - 3 base rules to build accessible Design Systems 55:18 - Outro

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

A11Y and Design Systems are made to work together: burning into the Design Systems A11Y fundamentals allow your teammates to build strong advanced UIs with confidence.

In thois episode, we talk about A11Y principles, their Devtools, how to manual test and automated things, as well as providing a great Developer Experience (DX) to allow your teammates to focus on what they do best: building strong interfaces. We code a simple top-level nav component illustrating A11Y-by-Design basics, and styling tricks based on aria.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯