Accessibility
Inline is a reading and writing surface for every student, so access is a product requirement, not a review step. This page fixes the bar, the focus and keyboard contracts, the names assistive technology hears, and the tests that keep them true.
The bar
WCAG 2.2 Level AA, across the product and the marketing site. Most measured text pairs already clear the 7:1 AAA line; the claim stays AA, and the headroom is margin, never license to slip elsewhere.
| Signal | Minimum | Where it stands |
|---|---|---|
| Body text | 4.5:1 | ink-900 on paper is 14.70:1; ink-600, the lightest body step, is 5.88:1 |
| Large text | 3:1 | Heading roles use ink-900 or ink-700, both above 8:1 |
| Meaningful boundaries and icons | 3:1 | border-strong is 3.95:1 on paper; the focus ring is 3.56:1 |
| Question-type titles on white | 6:1 | All twelve taxonomy colors clear 6:1; the floor is brainstorm-focus at 6.11:1 |
Every pair above is measured in the readable pairs on the color page and the contrast matrix in foundations/color.md. New pairs are measured there before they ship; this page does not duplicate the numbers.
Color never speaks alone
Every colored signal has a written twin, so a reader who cannot resolve the hue loses nothing.
The debate was about became a question about civic memory.
Focus
One visible focus style everywhere: a 2px brand-700 outline with a 2px offset, on every interactive element. It appears for keyboard focus and is never removed without an equal replacement in the same place.
The debate became a question about civic memory after the vote.
Draft markWhat evidence shows how residents described that change?
2px brand-7002px:focus-visiblefollows the elementOne recipe, no exceptions. Buttons, inputs, links, draft marks, margin cards, tabs, and menu items share this ring. The ring clears the 3:1 non-text minimum on paper and on white, and restyling a component never waives it.
Keyboard
Everything is reachable and operable from the keyboard, in document order, and the skip link is the first stop on every page. In the review workspace the order follows the reading: draft marks in passage order, then the margin cards.
Activation: marks and cards open with Enter and with Space, and the pairing works in both directions. Tab order never jumps between the draft and the margin mid passage.
Overlay keyboard behavior
| Behavior | Menu | Popover | Tooltip | Dialog | Toast |
|---|---|---|---|---|---|
| Escape | Closes | Closes | Dismisses | Closes | No effect; expires on its own |
| Outside click | Closes | Closes | Dismisses | Stays open | No effect |
| Focus trap | Never | Never | Never; focus stays on the trigger | Yes, while open | Never; focus never moves to it |
| Return focus | To the trigger | To the trigger | Not needed | To the opener | Not needed |
Dialogs are the only trap. Focus cycles inside while a dialog is open, Escape closes it, and focus returns to the element that opened it. Menus and popovers close on Escape and outside click without ever trapping.
Assistive copy
A screen reader hears what a sighted reader infers. Names and live regions are part of each component's definition, not an afterthought.
| Element | Contract |
|---|---|
| Icon-only button | Carries an aria-label naming the action: Rerun feedback, never just "button" |
| Draft highlight | Its accessible name is its question context, for example Evidence question 2 |
| Active margin card | aria-pressed="true" while its passage is open |
| Toast | role="status", announced without stealing focus |
| Full-screen wait | role="status" with a plain written label: Reading your draft. Your draft is saved. |
| Decorative schematic | aria-hidden="true"; illustrations never enter the reading order |
Forms
- Every field has a visible label. Placeholder text is never the label.
- Errors read with the field. The message sits beside the field and is connected with
aria-describedby: The course title is missing. - Submit lands on the problem. The first invalid field receives focus on submit.
Zoom, targets, and motion
The writing surface stays usable at any zoom, under any pointer, and without animation.
- Targets are 44px effective. Smaller visual controls sit inside a 44px square target. The 24px WCAG 2.2 minimum is a floor, never relied on for a primary path such as Get feedback or a draft mark.
- Layouts reflow to 400 percent zoom. No horizontal page scrolling; wide content scrolls inside its own container, never the page.
- The draft keeps its line breaks. Zoom and reflow change wrapping, never the student's own paragraphing.
- Reduced motion removes movement. Under
prefers-reduced-motion, translates are dropped and fades complete fast or instantly. Nothing meaningful is motion-only; every animated change has a static end state carrying the same information.
Testing
Three checks on a fixed cadence keep the contract honest. A release that fails the keyboard walkthrough does not ship.
| Check | Scope | Cadence |
|---|---|---|
| Automated axe pass | Component pages | Every release |
| Manual keyboard walkthrough | Compose, review, and every dialog | Every release |
| Screen reader spot check (VoiceOver) | Compose and review, end to end | Every quarter |
New overlays extend the matrix. A new menu, popover, or dialog adds its row to the overlay keyboard table before it merges.
Rules
Access holds because these do not bend.
- Meet AA everywhere. WCAG 2.2 Level AA is the floor for product and marketing; headroom in one pair never excuses a miss in another.
- One focus style. A 2px brand-700 outline with a 2px offset on every interactive element, never removed without an equal replacement.
- Everything works from the keyboard. Reachable in document order, activated with Enter and Space, dismissed with Escape; only dialogs trap.
- Name what the eye infers. Icon-only controls, highlights, and waits carry written accessible names; decoration is
aria-hidden. - Color never speaks alone. Every colored signal ships with a written twin: titles, labels, underline and strikethrough.
- Keep 44px targets. The 24px minimum is never relied on for a primary path.
- Reflow, never scroll sideways. Layouts hold to 400 percent zoom and the draft keeps the student's line breaks.
- Test on cadence. axe and a keyboard walkthrough every release, a VoiceOver spot check every quarter.