01
Keyboard access
A full product website with five barriers planted across it: a button you cannot reach, a link that goes nowhere, focus you cannot see, an order that jumps around, and a menu that will not open.
Accessibility practice ground
Find what's broken.
Every lesson is a normal-looking page with real accessibility barriers hidden inside it. Your job is to find them. Operate the page with your keyboard, spot what locks you out, then open the breakdown to check your work and see the fix.
How it works
Three pages per lesson.
Practice
A normal page that hides real barriers. Put the mouse down and try to use every part of it. Note everything you cannot reach or operate.
Breakdown
Check your findings. Each barrier is named and explained at the code level, with the exact markup that causes it and the markup that fixes it.
Fixed
The same page, rebuilt properly. Every barrier gone, fully keyboard operable. Run the same test and feel the difference.
Lessons
Start with the keyboard.
The keyboard is the foundation of accessibility. If a page does not work with a keyboard, it does not work for screen readers, switch devices, or voice control either.
02
Forms & labels
Inputs with no labels, error messages nobody can hear, and required fields that lie.
Coming soon03
Colour & contrast
Text that fades into its background, and state shown by colour alone.
Coming soon