System / Accessibility
Accessibility
WCAG 2.2 AA is the floor on every NTWRK surface, including private client reports and email.
01Standards
| Area | Rule |
|---|---|
| Contrast | Text 4.5:1, large text and UI boundaries 3:1. Use the pairings table on the Colour page. |
| Type floors | Body 16px. Anything substantive 14px or larger. Mono labels 12px only for non-essential labels. Figures 14px on phones. |
| Targets | 44 × 44px on touch: buttons, icon buttons, FAQ summaries, nav links. |
| Focus | --shadow-focus: 2px ground gap plus 2px Forest ring. Never remove outlines without it. |
| Motion | prefers-reduced-motion sets all durations to 0. |
| Forms | Visible labels, errors in text and colour, aria-describedby, autocomplete set. |
| Figures | Real text, a figcaption, decorative SVG aria-hidden, a data table for every chart. |
| Language | lang="en-AU". Headings in order; one H1 per page. |
| Images | Logos: alt is the organisation name. Decorative images: empty alt. |
| Overlays | The consent banner must not take focus on load or cover more than a quarter of a phone screen. |
02Pre-release checklist
- axe: zero new violations.
- Keyboard only: every action reachable, visible focus, no traps.
- Zoom to 200%: no loss of content, no horizontal scroll at 320px.
- Screen reader pass on any new figure.
- Dark theme checked.
- Figure text floor measured at 390px.
03Brand book and decks
- Brand book pages: one H1, ordered headings, theme and menu buttons expose pressed/expanded state, search is labelled.
- Deck template: slides are labelled groups; hidden slides are
inert; step and slide changes announce in a live region; shortcut bar is a toolbar; overview and help are modal dialogs. - PDF export must keep text selectable. Never flatten a chart into an image for the client PDF.
- Private insight reports follow the same floors as the public site, even when unlisted.
04Tools
| Tool | Use |
|---|---|
| axe DevTools / axe-core | Automated pass before every release |
| Keyboard only | Tab, Shift+Tab, Enter, Esc, arrows |
| Zoom 200% at 1280 and 390 | Layout and type floors |
| VoiceOver or NVDA on one new figure | Captions, table alternatives, live regions |
contrast.json | Regenerated on token build; Colour page reads from it |