Labs
Short exercises you complete in the browser. No account. Your progress stays on your device. Each lab ends with what you just learned and the code to take with you.
In the works
The labs are being built in the open, one at a time. This list is the order they will arrive in.
-
Live
Focus Lab
Design a focus ring, then watch it on twelve backgrounds at once: white, near-black, mid gray, brand colors, a gradient, and a busy pattern. Each background reports whether the ring still passes. Take the CSS with you.
Open Focus Lab -
Live
Alt Text Studio
One image, five page contexts, five different alt texts. Write yours, then compare with a curated answer and read how a screen reader would announce it in place.
Open Alt Text Studio -
Next
Color Lab
Build a palette and see every pair's contrast in one matrix, under color vision simulation, with tokens to export. Terminal Themes mode checks all sixteen ANSI colors against light and dark backgrounds.
-
Planned
Keyboard Only
Finish a form and a menu with the mouse switched off. The point is not to explain keyboard access. It is to feel it.
-
Planned
Screen Reader Announcer
Pick an element and hear what a screen reader would say about it, without installing one first.
-
Planned
Reading Order
Drag boxes into a new visual order and listen to the order a screen reader still uses. The gap is the lesson.
-
Planned
Zoom to 400 Percent
A layout you have to make reflow. Fix it in the browser, then keep the CSS.
Have a lab in mind?
The best labs come from a detail someone noticed and could not find explained anywhere. Tell us about yours.
Suggest a lab