Accessibility

Accessibility is a baseline design constraint, not a pass applied after a pattern ships. A component that only works with a mouse, only reads at one zoom level, or only makes sense in colour is not finished. The target level across both sites is WCAG 2.2, Level AA.

These are the constraints; who satisfies them is split by page. Site implementation → Components states how each component meets them. Site governance → Content states how authors write headings, links, and alt text that meet them.

Contrast#

Text and meaningful interface elements meet WCAG 2.2 Success Criterion 1.4.3, Level AA: at least 4.5:1 for normal text, 3:1 for large text (18pt, or 14pt bold, and above) and for the boundaries of graphical objects and interactive components that carry meaning. Do not rely on colour alone to carry a distinction; pair it with a shape, an icon, a label, or a text change.

APCA, the perceptual contrast method associated with WCAG 3, is still a W3C Working Draft with no expected Recommendation before the late 2020s. Treat the WCAG 2.2 ratio above as the enforceable baseline until that changes.

Focus visibility#

Every interactive element has a visible focus indicator that meets WCAG 2.2 Success Criterion 2.4.7, Level AA. A component may restyle the indicator, but it may never remove it. A hover-only affordance is not a substitute for a focus state.

Type sizing#

Set type in relative units — the --step-* scale in Tokens, not fixed pixels, points, or picas — so text resizes up to 200% without loss of content or function, per WCAG 2.2 Success Criterion 1.4.4, Level AA. A layout that breaks under browser zoom is a layout defect, not a user error.

Motion#

Non-essential motion respects the visitor’s prefers-reduced-motion setting, the technique WCAG names for Success Criterion 2.3.3, Level AAA. Hover transitions, reveal animations, and decorative motion reduce to an instant state change when the visitor asks for it. Motion that carries information — a loading state, a progress indicator — may stay, but must not flash or loop without a way to stop it.

Semantic structure#

Structure communicates hierarchy independent of styling. Use one <h1> per page, nest heading levels without skipping, and use the element that means what it looks like: a list for a list, a table for tabular data, a <button> for an action, an <a> for navigation. An element styled to look like a heading or a control is not one.

Alt text#

Every image that carries meaning has a text alternative, per WCAG 2.2 Success Criterion 1.1.1, Level A. A decorative image — an icon repeating an adjacent label, background texture, an ornamental mark — carries an empty alt="" or aria-hidden="true" so assistive technology skips it instead of announcing noise. Writing the alt text itself is an authoring decision, covered in Site governance → Content.

Keyboard access#

Every interactive element is reachable and operable from a keyboard alone, in an order that matches the visual layout, with no keyboard trap. Nothing may open, reveal, or activate only on :hover or a mouse click. This is the constraint the skip link exists to shorten, and the one every dropdown, modal, and disclosure component in Components is built against.