Accessibility

Keyboard and focus

Every control is reachable by Tab and operable with Enter or Space. There is one visible focus style across the whole application, and a skip link is the first focusable element on every page.

Structure and headings

Pages use semantic landmarks (header, nav, main, footer), exactly one h1 per page, and headings that follow in order. Lists are lists, forms are fieldsets with legends, and the video player is one labelled control group.

Colour is never the only meaning

Every status that a colour expresses also carries a word — an “Earned” or “Locked” chip, an “Open” or “Closed” label — and body text meets AA contrast against its own background.

Async feedback is announced

Saving, restoring, verification progress and errors appear in live regions, so a screen reader announces them without the visitor having to hunt for the change. Failures use an assertive alert; routine updates are polite.

Dialogs trap and restore focus

A dialog moves focus inside itself, keeps Tab within it, closes on Escape, and returns focus to the control that opened it. The page behind cannot be scrolled while a dialog is open.

Video

Playback is always visitor-initiated, with labelled play, pause, seek, speed (1×, 1.5×, 2×), volume and fullscreen controls. The seek control is a real range input, so arrow keys and Home/End work.

Motion and zoom

Every animation is removed when the operating system asks for reduced motion. Layouts are built to stay fluid from 320px upward without horizontal scrolling, and the pages are checked at 200% zoom. No independent audit has yet verified this across every browser and assistive technology.