Play 11 short games

Small games about better interfaces.

Each one takes a minute or two and teaches one thing about accessibility or front-end craft. Nothing to install, and nothing leaves your browser.

Accessibility

Pass or fail?

Guess whether faded text still passes WCAG AA, then see the real contrast ratio.
Accessibility

Alt or not?

Pick the right alt text for images in context: portraits, logos, charts and decoration.
Front end

Use the platform

Match each behavior to the native HTML element that already does it.
Accessibility

Name that button

Choose the accessible name for icon-only buttons, from trash cans to three-dot menus.
Accessibility

Tab order

Put a scrambled form back in the order keyboard focus should follow, then watch the focus ring replay it.
Accessibility

Fix the outline

Raise and lower heading levels until each page outline matches how the content is organized.
Design systems

Snap to grid

Nudge three drifting interface pieces back onto an 8px spacing grid.
Design systems

Spot the drift

Compare a design system component with its production copy and find what changed.
Accessibility

Just enough contrast

Fade text with a slider until it only just passes WCAG AA, then see how close you landed.
Accessibility

Should it stop?

Decide what each animation should do when someone has asked their device to reduce motion.
Design systems

Name that token

Match colors and type on this site to the design tokens behind them.

Games