Accessibility
Space Works targets WCAG 2.2 AA for complete web products. A kit cannot certify a product by supplying colours or ARIA attributes. The guarantees below are documented component/usage contracts: supplied native examples follow them where applicable; products must verify composed screens and data flows. Known implementation gaps remain explicit in component pages. No app/site-wide or native conformance certificate is asserted.
Scope: all 55 Level A/AA criteria in WCAG 2.2, including conditionally applicable media/product criteria. No criterion is silently treated as N/A because it is outside a small control. The removed 4.1.1 Parsing criterion is not a WCAG 2.2 requirement; continue valid markup/unique relationship IDs as engineering practice. AAA requirements are not mislabelled AA. The normative recommendation and WAI reference determine conformance; the task-specific tests here are Space Works implementation guidance.
Source floors remain UX §4, product accessibility rules and lessons. Latest ledger/public decisions govern conflicting historical statements. Owner: design-system owner; products name an accessibility reviewer. Added for planned v2.1.0; source/reference review dated 2026-11-13.
Criterion map
Section titled “Criterion map”“SR” means screen reader. Each row separates shared contract from product work and a repeatable check. For media rows, the current core controls have no media implementation; products adding media inherit that responsibility. The criterion number links to its authoritative WCAG anchor.
| Criterion / level | System contract or scope limitation | Product responsibility | How to test |
|---|---|---|---|
| 1.1.1 Non-text content (A) | IconButton has a required label; decorative icons/artwork are hidden; supplied logos have text alternatives in starters. | Write useful alternatives for product images, diagrams, charts, badges and informative QR/media; do not duplicate adjacent text. | Inspect accessibility tree and read images/buttons with SR; hide images and retain task meaning. |
| 1.2.1 Audio-only / video-only prerecorded (A) | No audio/video content is required by the core controls; media slot contracts must retain alternatives. | If media is added, provide equivalent transcript for audio and equivalent description/audio alternative for silent video. | Run the task with audio muted and video hidden; compare the alternative to meaningful content. |
| 1.2.2 Prerecorded captions (A) | No built-in audio track is supplied; captions remain required for product video with speech/sounds. | Supply synchronised captions for meaningful prerecorded audio in video. | Play every clip muted; verify timing, speakers and meaningful sounds. |
| 1.2.3 Description or media alternative (A) | Motion must have a meaningful static/text equivalent; this is not a video transcription service. | Describe essential visual-only video information or provide a full media alternative as the criterion allows. | Listen without watching; compare the narrative/task information. |
| 1.2.4 Live captions (AA) | Live-media components are outside the kit’s implemented scope. | Provide captions when a product includes live synchronised media. | Attend the live stream muted and verify real-time meaningful captions. |
| 1.2.5 Prerecorded audio description (AA) | Core components carry no prerecorded video; no blanket exemption applies to product media. | Provide audio description of meaningful visual information in prerecorded video, except where already conveyed by its soundtrack. | Listen with the video hidden and check all essential visuals are conveyed. |
| 1.3.1 Structure and relationships (A) | Field/fieldset/table/heading contracts preserve labels, groups, headers and error relationships. | Compose a logical heading outline and associate all custom children, errors and row headers correctly. | Use SR heading/form/table navigation; inspect labelledby/describedby and table headers after reflow. |
| 1.3.2 Meaningful sequence (A) | Anatomy defines reading order; responsive examples retain DOM order. | Ensure CSS reordering and portals do not change the meaningful task sequence. | Disable CSS, read sequentially and compare Tab order at 320 and desktop widths. |
| 1.3.3 Sensory instructions (A) | Status words and task labels do not rely solely on position/shape/colour. | Write ‘Choose Save changes’ rather than only ‘press the green button on the right’. | Review instructions without colours/images; ask whether control names suffice. |
| 1.3.4 Orientation (AA) | Starters scroll and do not lock orientation. | Support portrait/landscape unless an orientation is essential; retain actions with keyboard open. | Rotate phone/tablet or resize viewport; complete task in both orientations. |
| 1.3.5 Input purpose (AA) | TextField accepts native autocomplete/type/inputMode attributes. | Add standard autocomplete tokens to personal-data fields and preserve password-manager/autofill support. | Inspect DOM/autofill on name/email/address/password fields; test stored data completion. |
| 1.4.1 Colour independence (A) | StatusPill includes a word; selection exposes checked/current state. | Supply text/shape for chart series, errors, availability and selected rows. | Use greyscale and SR; verify every state can still be identified. |
| 1.4.2 Audio control (A) | No starter autoplays sound. | If audio auto-plays beyond 3 seconds, expose independent stop/pause/volume control or avoid autoplay. | Load the page fresh and identify immediate audio controls without searching. |
| 1.4.3 Text contrast (AA) | Approved ink/muted/on-fill roles define permitted text pairs; no alpha text. | Measure actual rendered pairs including tenant colours, every state and composited backgrounds; 4.5:1 normal, 3:1 large text. | Calculate unrounded ratios; inspect rest/hover/pressed/selected/error in both themes. |
| 1.4.4 Resize text (AA) | Starter layouts wrap and use scalable text. | Support 200% text resizing without lost content/function, independent of browser zoom. | Increase text to 200%; verify form labels, controls, dialogs and result actions. |
| 1.4.5 Images of text (AA) | Body/control labels are real text; logo is supplied artwork. | Use real text for task content; apply essential/customisable image-text exceptions carefully. | Disable images and resize text; check information remains as selectable text where required. |
| 1.4.10 Reflow (AA) | Web contracts require 320 CSS px width and independently contained true two-dimensional data. | Prevent page-level two-axis scrolling at 400% zoom on a 1280px viewport; limit exceptions to content that requires two dimensions. | Measure document width at 320 CSS px and test 400% zoom; inspect overlays, menus and long translations. |
| 1.4.11 Non-text contrast (AA) | Essential marks use functional boundary/ink roles; decorative line is not a functional perimeter. | Ensure necessary control boundaries, icons, selected-state marks and meaningful graphics reach 3:1 against adjacent colours. | Measure actual adjacency across states; do not round dark accent 2.99 to 3 or use line as the sole cue. |
| 1.4.12 Text spacing (AA) | Examples allow wrapping rather than fixed text heights. | Support line-height 1.5, paragraph spacing 2em, letter-spacing .12em and word-spacing .16em without loss. | Apply all four spacing overrides together and complete forms/layers. |
| 1.4.13 Hover/focus content (AA) | Essential instructions are visible; title is supplementary, not sole labelling. | For custom tooltip/popover content ensure dismissible, hoverable and persistent as required. | Open with keyboard and hover, move onto content, dismiss with Escape without moving focus. |
| 2.1.1 Keyboard (A) | Native controls and documented composite keyboard models expose complete operations. | Wire all task actions, scanning manual fallback, upload chooser and alternate manipulation controls. | Unplug pointer; complete create/edit/filter/confirm/retry/close flows. |
| 2.1.2 No keyboard trap (A) | Dialog trap has explicit Close/Escape and restoration; nonmodal content must allow exit. | Do not trap users in editors, menus, embeds or invalid forms. | Tab/Shift+Tab through and out; open nested layers and close top-to-bottom. |
| 2.1.4 Character shortcuts (A) | Core controls require no global single-character shortcuts; SearchField hint registers none. | Allow global character shortcuts to be disabled/remapped or active only on focused relevant controls. | Type in text fields/dictation with shortcuts enabled; verify unintended actions cannot trigger. |
| 2.2.1 Timing adjustable (A) | Toast contract requires paused action timing; no sample session timeout is imposed. | Give enough time/extension or disable limits except valid criterion exceptions; preserve safe drafts on expiry. | Slow down typing/Undo/authentication; test timeout warning, extension and interrupted-work recovery. |
| 2.2.2 Pause / stop / hide (A) | Reduced-motion fallback and static accessible examples are required. | Provide pause/stop/hide for qualifying auto-moving content >5s and control qualifying auto-updating content; animated images need actual still/source substitution. | Leave page open, test pause and reduced-motion before load; do not assume CSS pauses WebP/GIF. |
| 2.3.1 Flashing (A) | Brand motion uses nonflashing transform/opacity recipes. | Avoid more than three flashes per second or meet thresholds; evaluate user-supplied media where applicable. | Inspect motion/video and use flash-analysis tooling for suspect content; do not rely on automated DOM scans. |
| 2.4.1 Bypass blocks (A) | Web starters provide Skip to content and main-content tabindex=-1. | Keep a persistent skip destination across loading/error/auth routes and repeated navigation. | Use first Tab and activate skip; confirm focus/scroll reaches main even during errors. |
| 2.4.2 Page title (A) | Starter documents have task-specific titles. | Update meaningful document titles for routes, tabs, auth and error pages. | Navigate forward/back and inspect titles in browser history/SR. |
| 2.4.3 Focus order (A) | Anatomy and layer contracts define entry, traversal and return. | Handle deleted openers, route changes, async replacement and disabled pager endpoints meaningfully. | Log activeElement throughout tasks; confirm no unexpected body focus or hidden element. |
| 2.4.4 Link purpose (A) | Links use actual destinations and clear names. | Provide destination meaning in link text/context, including repeated row links. | Use SR link list plus surrounding context; check ‘View’ names include the object when needed. |
| 2.4.5 Multiple ways (AA) | The new indexes and related links offer alternate discovery paths for documentation. | For sets of product pages, provide more than one location method except task-step/result exceptions. | Locate a representative page via navigation and search/index or another independent path. |
| 2.4.6 Headings and labels (AA) | Support strips/anatomy require descriptive titles and visible control labels. | Write task-oriented headings/labels; don’t replace labels with placeholders/icons. | Review heading/form lists without layout and identify each section/action. |
| 2.4.7 Visible focus (AA) | Control contracts require visible focus rings. | Retain focus styling after resets/tenant overrides and through composites/layers. | Tab every control in both themes, forced colours and high zoom. |
| 2.4.11 Focus not obscured (AA) | Layers have scrollable bodies/safe-area intent; house goal is full visible focus. | Ensure author-created sticky headers, cookie banners, toasts and footers never entirely hide a newly focused control; handle configurable/user-opened exceptions per criterion. | Tab at 320/400% with sticky UI and keyboard open; record actual visibility, not just ring CSS. |
| 2.5.1 Pointer gestures (A) | Core controls need no multipoint/path gesture. | Provide a single-pointer non-path alternative for pinch/swipe/path gestures unless essential. | Complete every gesture task with simple clicks/taps; inspect chart/slider alternatives. |
| 2.5.2 Pointer cancellation (A) | Buttons activate on native click/release, not initial down. | Allow abort/undo or up-event completion unless essential; don’t mutate on pointer-down. | Press, drag off and release; verify cancelled action has no unintended effect. |
| 2.5.3 Label in name (A) | IconButton requires purpose label; visible control text is the name. | Ensure accessible names contain visible text, including custom aria-label and translated labels. | Compare visible text with computed name; test voice command using the visible label. |
| 2.5.4 Motion actuation (A) | No core task requires shaking/tilting a device. | Provide UI alternatives and ability to disable motion activation unless valid exception. | Disable sensors/motion and complete the task with controls. |
| 2.5.7 Dragging alternatives (AA) | No drag-only layer close; checkbox/form controls remain click/tap operable. | Provide single-pointer operations without dragging for reorder, position, range and upload tasks unless essential/UA-controlled. | Use Move up/down, position fields or chooser with clicks/taps. Keyboard alone does not establish this criterion. |
| 2.5.8 Minimum target size (AA) | House controls use 44px targets; native Android minimum 48dp; kiosk 56px. | Meet 24×24 CSS px or a specific spacing/equivalent/inline/UA/essential exception for every pointer target. | Measure rendered target rectangles and overlapping targets at each breakpoint; document any exception explicitly. |
| 3.1.1 Page language (A) | Starter HTML declares lang=en. | Set correct document language for each product locale. | Inspect html lang and listen to SR pronunciation for a full page. |
| 3.1.2 Language of parts (AA) | Components pass through content; LanguageSwitcher marks locale option language. | Mark substantial language changes with lang, excluding proper names/technical terms as appropriate. | Read multilingual content/options with SR and inspect language transitions. |
| 3.2.1 On focus (A) | Focus alone does not submit a form or navigate in the reference contracts. | Don’t trigger context changes just because focus enters a field/link. | Tab into every control; verify no navigation, save or unexpected popup submission. |
| 3.2.2 On input (A) | Search first-screen submits deliberately; group saves are explicit. | Warn before a value change triggers a context change; don’t auto-submit unrelated selects/radios. | Change each input with keyboard and observe task/context stability. |
| 3.2.3 Consistent navigation (AA) | P/L retain shared shells/navigation order. | Keep repeated navigation in the same relative order across page sets unless user changes it. | Compare routes/themes/permissions using the same available navigation. |
| 3.2.4 Consistent identification (AA) | Named components and content rules keep purpose/labels stable. | Identify repeated functions consistently in icons, labels and accessible names. | Compare repeated search/help/save/close controls across screens. |
| 3.2.6 Consistent help (A) | Governance defines a consistent documentation support route. | When help mechanisms repeat across a page set, keep the same relative order unless user changes it; criterion does not require adding help everywhere. | Compare DOM/reading order of contact/self-help/chat links across routes and responsive variants. |
| 3.3.1 Error identification (A) | Field connects error text and aria-invalid for a single forwarding child. | Describe all detected errors in text and link summary entries to affected controls; preserve drafts. | Submit invalid data, inspect error IDs/names and navigate summary with SR/keyboard. |
| 3.3.2 Labels or instructions (A) | Fields have visible labels, helpers and optional markers. | Explain required format/constraints before entry and mark required versus optional clearly. | Try the form without placeholder text; verify constraints and required status are understood. |
| 3.3.3 Error suggestion (AA) | Content contract requires consequence/recovery, not raw codes. | Offer a known safe correction unless doing so harms security/purpose; distinguish validation from network failure. | Submit representative malformed/duplicate values; inspect useful correction and retained input. |
| 3.3.4 Legal / financial / data prevention (AA) | Dialog/P30 distinguishes irreversible actions from awaited reversible Undo. | For covered submissions/deletions provide reversible, checked or confirmed handling; no misleading Undo for money/evidence/audit. | Walk through payment/delete/consent and verify review/correction/confirmation with object and consequence. |
| 3.3.7 Redundant entry (A) | Form/layout contract keeps safe draft values across steps. | In the same process auto-fill prior information or make it selectable, except essential/security/no-longer-valid cases. | Complete a multistep flow, go back/forward and verify reuse without retyping. Don’t reuse secrets insecurely. |
| 3.3.8 Accessible authentication (AA) | Native fields can preserve autocomplete, paste and password-manager mechanisms. | At every authentication step avoid an unassisted cognitive test; support mechanisms/alternatives under the criterion, including pasting full codes and password managers. | Test login/MFA/recovery with autofill/paste and no memorisation/transcription/puzzles; review all factors, not just password input. |
| 4.1.2 Name / role / value (A) | API contracts define native roles, checked/selected/busy state, names and relationships. | Forward ARIA correctly through custom components; preserve semantics in portals and after CSS reflow. | Inspect accessibility tree and SR announcements for every state; test native and composite keyboard models. |
| 4.1.3 Status messages (AA) | ToastHost/message EmptyState/BoxSpinner demonstrate status patterns and their limitations. | Announce settled result/progress/outcome without focus theft; avoid duplicate or stale live-region messages. | With SR running, search/save/error/undo and confirm one meaningful announcement, including repeated identical messages. |
WCAG minimums and stronger house rules
Section titled “WCAG minimums and stronger house rules”Targets: AA 2.5.8 uses 24×24 CSS px, with precise exceptions for adequate spacing, equivalent control, inline text constraints, unmodified user-agent controls and essential presentation. For spacing, centre a 24 px diameter circle on each undersized target’s bounding box: it must not intersect another target or the corresponding circle of another undersized target. Space Works instead defaults to 44 px web/44 pt iOS, 48 dp Android, 56 px kiosk. A noninteractive 24 px StatusPill has no pointer target to enlarge; its action variant would be a different control. WAI target-size explanation.
Focus: 2.4.11 AA requires a newly focused component not be entirely hidden by author-created content, with its specified exceptions. The house goal is to keep the entire focused control and ring visible. Sticky headers/footers, toast stacks, drawers and the software keyboard require real scroll tests. 2.4.13 focus appearance geometry is AAA; our 2 px ring/3:1/offset is a house implementation contract rather than a claim that every part is AA 2.4.13. WAI focus-not-obscured.
Dragging: for 2.5.7 provide a single-pointer action without dragging: buttons to reorder, numeric position controls or a chooser alongside drop upload. A keyboard shortcut alone does not establish a pointer alternative. A draggable sheet still needs a Close button. WAI dragging.
Help: 3.2.6 concerns relative order when help mechanisms repeat across pages; it does not require adding a help widget to every page. Preserve the repeated route’s relative reading order across the same page variations. WAI consistent help.
Entry and authentication: reuse safe information already supplied in the same process or let users select it; respect essential/security/invalid-data exceptions. Never force manual re-entry of an address or identity already held for that flow without a reason. Authentication must support cognitive-test alternatives or assistance at every applicable step. Allow password managers, autofill, full-code paste, show-password controls and recovery. Prefer a single OTP input with autocomplete=one-time-code; if visually segmented, distribute a pasted full code and retain one coherent label. Do not block clipboard/paste or demand puzzles/memorisation as the only path. WAI redundant entry, WAI authentication.
Motion and forced colours: reduced motion and forced-colour support are house settings contracts supporting multiple criteria, not separate named AA criteria. CSS cannot pause an animated image timeline; use a still source and explicit Play/Pause where needed. Preserve currentColor/system borders in forced colours. Never broadly set forced-color-adjust:none just to retain brand fills.
Component and pattern mapping
Section titled “Component and pattern mapping”| Area | Contracts / implementation examples | Primary criteria |
|---|---|---|
| Actions/destinations | Button, Link, IconButton; native button/anchor starters | 1.1.1, 1.4.3/11, 2.1.1, 2.4.4/7/11, 2.5.2/3/8, 4.1.2 |
| Forms and settings | TextField/SearchField, Checkbox, Radio, Switch, Select; P15/P18/P19/L5/L6 | 1.3.1/5, 1.4.10/12, 3.2.1/2, 3.3.1/2/3/7, 4.1.2 |
| Sections/views | Tabs, SegmentedControl, P8/P9/L4 | 2.1.1/2, 2.4.3/7/11, 4.1.2 |
| Layers/confirmation | Dialog, Drawer/Sheet, Menu, P16/P30 | 2.1.2, 2.4.3/11, 2.5.7, 3.3.4, 4.1.2 |
| Data and results | Table, Pagination, StatusPill, EmptyState, P14/P17/L3 | 1.3.1/2, 1.4.1/10, 2.4.3, 4.1.3 |
| Feedback/pending | Toast, Skeleton/Loader, P30 | 2.2.1/2, 2.4.3/11, 4.1.2/3 |
| Authentication and multistep tasks | P22/P23/P28, L7/L8/L10, source S20–S23 | 1.3.5, 2.2.1, 3.3.4/7/8 |
| Shared chrome/help/media | P1/P2/L1/L9, source public/kiosk screens | 1.2.x, 2.4.1/2/5, 3.1.1/2, 3.2.3/4/6 |
Test scripts
Section titled “Test scripts”Record kit/app commit, browser/OS/AT versions, viewport, theme, input method, assistive settings, task, expected/actual behaviour and issue links. Automated checks supplement these scripts; they do not test every criterion.
- Keyboard and focus: reload, Tab to Skip and activate it. Traverse every control forward/back. Search/filter, clear, sort/select/page, open menu with arrows, open Dialog/Drawer, cycle Tab, close with Escape and restore the connected opener. Test a removed opener and a last-page pager that becomes disabled. Panel tabs use arrows/Home/End and relationships; route tabs remain links. Check no focused control is hidden by sticky UI or a toast.
- Screen reader: run NVDA with a supported Windows browser and VoiceOver/Safari on Apple products; record the actual versions. Read headings/landmarks/form labels, then use browse/form/table modes. Confirm name/role/value, counts, selected/mixed state, error/helper associations and dialog names. Trigger empty, error, loading, success and repeated identical messages; hear one meaningful announcement, no frame-by-frame chatter or unrequested focus change. A source review is not a completed SR run.
- Text/zoom/reflow: use 200% text; apply the four 1.4.12 spacing overrides together. At a 1280 px browser zoom to 400% and independently test a 320 CSS px viewport. Repeat with long translations, deep navigation, field errors and open layers. Document any essential 2D table exception and constrain it locally. Do not conceal content to make a width check pass.
- Contrast/settings: measure actual text and necessary non-text adjacency in both themes and all states. Emulate/enable forced colours, reduced motion before page load, high contrast and large native type. Verify static posters replace animated media, indicators remain visible without fill colour and no disabled state depends on alpha. Test control boundaries on hover separately from decorative hairlines.
- Touch/pointer and drag: measure actual click targets, activate labels, cancel presses by moving away and try every drag/gesture task through simple click/tap controls. Verify 44 px house targets (48 dp Android; 56 px kiosk) and document any AA exceptions. Test with the software keyboard and safe areas.
- Processes: complete login/MFA/recovery with password manager and full-code paste; test alternate authentication and time extension. Complete a multi-step form without retyping existing safe data. Inspect repeated help order. Test legal/payment/delete review and distinguish reversible Undo from irreversible records.
- Network/interruption: initial load, refresh with cached rows, filtered-empty, server error, offline, mutation pending/failure/success and session switch. Preserve drafts/queries, provide safe Retry, label last-known values and clear busy state. Never auto-replay a payment/evidence/handover.
Evidence and known limitations
Section titled “Evidence and known limitations”This guide maps requirements; it is not a site-wide conformance claim. Verification records this batch’s actual starter/source checks. Android/iOS starters have not been compiled or run with AT here. Manual NVDA/VoiceOver, device and final-site tests remain the consuming/integration release gate.
Known read-only source gaps include toast focus/hover timing and expiry restoration, DataTable’s loader/legacy empty branch and dark thin-indicator contrast at consumption points. They are documented per component; no app/source file was changed. For release approval, record whether each criterion passed, failed or was not applicable with a reason/evidence. Route defects through contribution.
Related v2.1 references
Section titled “Related v2.1 references”Required and diagnostic contrast pairs · Portable exports and checksums