IV · Reference / 18
Accessibility and performance
The checks every page passes, the voice it speaks in, and where it all comes from.
Accessibility and performance#
The checks every page passes before it ships. None of them are extras.
Contrast
- Text at least 4.5:1 against its surface; the colour section computes it live.
- Marks, borders of controls and focus rings at least 3:1.
- Nothing is told by colour alone: status has a word and an icon, series have a legend.
Keyboard
- Everything you can click, you can reach with Tab and use with Enter or Space.
- A teal focus ring, 2px, following each element’s own corners.
- Arrow keys in tabs, menus, segmented controls and radio groups; Escape closes and hands focus back.
- ⌘K, Ctrl+K or / opens search from anywhere.
Screen readers
- Landmarks and headings in order; one h1 per page.
- Icon-only buttons carry a label; decorative art is hidden.
- Toasts and state changes are announced in a live region.
- Tooltips never hold anything essential.
Touch and phones
- Targets 44px, 36px at the smallest in dense toolbars.
- Sheets rise from the bottom, where the thumb is; nothing depends on hover.
- Every layout is its own composition at 390px, checked down to 320px.
Motion and glass
- Reduced motion keeps every state and drops the travel; loops stop.
- Nothing flashes more than three times a second.
- Reduced transparency swaps glass for solid; text never sits on glass without a plate.
Performance
- The hero is a painting in image layers, one size of each for the screen; what moves in it is CSS, paused off-screen.
- 3D marks load once the page is idle, only on devices with room for them, and draw only while they move.
- Sections off-screen are skipped until near (content-visibility).
- Game art loads lazily by FileDataID; nothing is stored here.
- Fonts self-hosted by next/font, sized to avoid layout shift.
Platform
- Used plainly (Baseline): light-dark(), popover, <dialog>, :has(), container queries, anchor positioning, linear() easing, @starting-style.
- Added where supported, never relied on: corner-shape notches, scroll-driven animation, customizable selects.