From assistive technologies and how to read WCAG, through headings, landmarks, forms, and alt text, ARIA roles and states, focus management and modals, contrast and zoom, all the way to the limits of automated checks. Over 20 lessons, you'll get to the point where you can audit and fix your own pages. Bad and good examples sit side by side in the browser, so you can check them yourself by actually pressing Tab.
The 20 lessons are split into 5 chapters. We recommend going in order from chapter 1, but feel free to jump to whatever interests you. The examples run right in your browser. Many of them are meant to be tried with the Tab key, so take your hand off the mouse when you try them.
Get to know the kinds of assistive technology, how to read WCAG, and how standards relate to real-world work, then try your own pages with a keyboard and a screen reader. By lesson 4, you'll know what to check.
Rewrite headings, landmarks, links and buttons, form labels, alt text, and tables while checking them in Chrome's accessibility tree. Most of the problems you'll run into at work disappear with what's in this chapter.
Covers roles and states, focus management, modal dialogs, and how to announce dynamic updates. At the end, you'll use dialog and aria-live to build something that opens, closes, and sends notifications.
Check contrast ratio calculations, 200% text and 320px reflow, reduced motion, and cues beyond color, all with real numbers. This chapter gathers the things you can decide at the design stage.
Actually run axe-core, pa11y, and Lighthouse, and measure side by side what they catch and what they miss. Finally, decide on a manual checking routine and how to hand it down to your team.
Once you've finished all 20 lessons, try writing one from start to finish in the project Build a Form You Can Submit Without a Mouse. To shore up the basics, go to HTML/CSS for Beginners; to look at it from the design side, try UI/UX Design and Figma for Beginners. A membership unlocks every course.