Accessibility
The accessibility claim of every element and token family, from the latest gate run and the recorded approvals.
How the chip is earned
- Passed (green): the full gate ran on the element’s own page in the light and dark themes and found nothing, known debt included, and every criterion that can only be judged in context has a tested demonstration.
-
Approved (green): a named person then ran the element’s manual checklist (General,
Zoom, Keyboard, Screen reader) and recorded it with
bun run a11y:approve. The chip shows the last checked and last approved dates and the approver. An approval stops showing if a later run finds something. - Findings, Conditional, Not yet checked: no claim is made.
- Behavioral primitives have no visual output: a person reviews the contract, shown as Contract reviewed, never as a pass.
- Design tokens: Color is checked when every documented pairing clears AA in every theme. Other token families make no claim.
Gate: run 358b316 on 2026-10-22 (a11y report: 55 in-scope criteria — PASS 20, DEBT 19, FAIL 0, NEEDS-STATIC 0, NEEDS-PLAYWRIGHT 0, HUMAN 4, N/A 12; 0 unimplemented checks; 609 baselined findings; results: static present, playwright present). 77 checked, awaiting approval · 1 contract not yet reviewed.
Elements
| Element | Catalog | Status | Findings | Last checked | Last approved |
|---|---|---|---|---|---|
| Box | P-01 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Text | P-02 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Icon | P-03 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Surface | P-04 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Pressable | P-05 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Layer | P-06 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Transition | P-07 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| ScrollArea | P-08 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Divider | P-09 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Skeleton | P-10 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Control | P-13 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Behavioral primitives | P-11 · P-12 · P-14 · P-15–P-20 | Contract not yet reviewed | — | — | — |
| Button | C-01 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| ButtonGroup | C-02 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Chip | C-03 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Avatar | C-04 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Tooltip | C-05 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Popover | C-06 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Menu | C-07 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Overlay | C-08 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Confirmation | C-29 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Field | C-09 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| TextField | C-10 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Toggle | C-11 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Select | C-12 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| DatePicker | C-13 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| MemorableDate | C-48 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Dropzone | C-26 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| IconPicker | C-46 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Validation | C-53 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Tabs | C-14 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Accordion | C-15 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Toolbar | C-23 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Pagination | C-24 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Tree | C-25 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Breadcrumb | C-49 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| SideNavigation | C-50 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| StepIndicator | C-47 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| LanguageSelector | C-52 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Footer | C-51 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| List | C-16 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Table | C-17 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Card | C-18 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Overflow | C-27 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Resizable | C-28 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Banner | C-19 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Toast | C-20 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Progress | C-21 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| EmptyState | C-22 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| SaveState | C-42 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| PublishVersion | C-43 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| VersionHistory | C-44 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| VersionRetention | C-45 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| SplitButton | C-30 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| KeyTip | C-31 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| MiniToolbar | C-32 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Ribbon | C-33 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Gallery | C-34 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| ColorPicker | C-35 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| GridPicker | C-36 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| SpinButton | C-37 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Slider | C-38 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| TaskPane | C-39 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| StatusBar | C-40 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| CommentThread | C-41 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| App shell | — | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| OverlaySystem | X-01 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Search | X-02 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| DataGrid | X-03 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Kanban | X-04 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| InputFieldMapper | X-05 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Editor | X-06 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| DocumentViewer | X-07 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| ErrorBoundary | X-08 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| NotificationCenter | X-09 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Form | X-10 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| ObjectDisplay | X-11 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
| Inbox | X-12 | WCAG 2.2 AA · Passed | 0 | 2026-10-22 | — |
Design tokens
| Family | Status | Rule |
|---|---|---|
| Color | WCAG 2.2 AA · Passed | Every documented text and UI pairing at least 4.5:1 or 3:1 in light and dark |
| Semantic | No accessibility claim | No claim |
| Typography | No accessibility claim | No claim |
| Spacing | No accessibility claim | No claim |
| Radius | No accessibility claim | No claim |
| Elevation | No accessibility claim | No claim |
| Sizing | No accessibility claim | No claim |
| Motion | No accessibility claim | No claim |
| Icons | No accessibility claim | No claim |
| Themes | No accessibility claim | No claim |
What automation cannot decide
These criteria carry a human-review note. The element checklists cover them; the final determination is made manually by a certified WCAG engineer.
| Criterion | Level | A person confirms |
|---|---|---|
| 1.1.1 Non-text Content | A | Confirm each non-decorative icon or graphic has a text alternative that serves the same purpose, and that decorative sprite icons are aria-hidden. |
| 1.3.1 Info and Relationships | A | Confirm visual groupings (fieldsets, card sections, table headers, form label/field pairs) are expressed in markup and not only by layout. |
| 1.3.2 Meaningful Sequence | A | Read each page with CSS disabled (or in the accessibility tree) and confirm the order still makes sense. |
| 1.3.3 Sensory Characteristics | A | Search page copy for instructions that rely only on shape, color, size or position ("the green button", "on the right"). |
| 1.3.5 Identify Input Purpose | AA | Confirm that demo fields collecting user data (name, email, tel, organization) carry the correct autocomplete token, and fields that are not about the user do not. |
| 1.4.1 Use of Color | A | Confirm status chips, badges, validation states, chart series and selected states carry text, an icon or another non-color cue in every theme. |
| 1.4.3 Contrast (Minimum) | AA | Spot-check text over gradients, images and translucent surfaces, and disabled-state text that is still meant to be read. |
| 1.4.4 Resize Text | AA | Confirm nothing is clipped or overlapped at 200 percent browser zoom on each page. |
| 1.4.5 Images of Text | AA | If a raster or SVG containing text is added, confirm it is a logotype or essential. |
| 1.4.10 Reflow | AA | Confirm data tables and the kanban board (allowed two-dimensional exceptions) still expose all content. |
| 1.4.11 Non-text Contrast | AA | Confirm control borders, toggle tracks, checkbox boxes, icons that carry meaning and the focus ring reach 3:1 against adjacent colors in every theme. |
| 1.4.12 Text Spacing | AA | Confirm no truncated or overlapping text after the spacing override. |
| 1.4.13 Content on Hover or Focus | AA | Confirm tooltip and menu content can be dismissed with Escape, stays while the pointer moves onto it, and persists until hover/focus ends. |
| 2.1.1 Keyboard | A | Confirm every demo interaction (tabs, menus, dialogs, tree, selects, toasts) can be driven entirely from the keyboard. |
| 2.1.2 No Keyboard Trap | A | Confirm focus leaves open dialogs and menus with Escape or Tab. |
| 2.2.1 Timing Adjustable | A | Confirm the toast auto-dismiss (docs.js setTimeout 5000) is a demo convenience and that the component contract lets consumers disable it. |
| 2.2.2 Pause, Stop, Hide | A | Confirm infinite spinners, indeterminate progress and skeleton shimmer specimens are either shorter than 5 s, essential, or given a pause control; confirm the setInterval auto-updating demo has a stop control. |
| 2.3.1 Three Flashes or Below Threshold | A | Confirm no specimen flashes; check any new keyframes that toggle opacity or background more than 3 times per second. |
| 2.4.2 Page Titled | A | Confirm each title names the page topic. |
| 2.4.3 Focus Order | A | Confirm focus moves into an opened dialog or menu and returns to the trigger when it closes. |
| 2.4.4 Link Purpose (In Context) | A | Confirm links such as "Show markup" and card links make sense from their text or enclosing sentence. |
| 2.4.6 Headings and Labels | AA | Confirm headings and labels describe their section or field. |
| 2.4.7 Focus Visible | AA | Spot-check the ring on dark backgrounds and inside menus and tables. |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Confirm toasts and the sticky site header never fully cover a focused control. |
| 2.5.3 Label in Name | A | Confirm icon-plus-text buttons whose aria-label differs from the visible text start with the visible text. |
| 2.5.8 Target Size (Minimum) | AA | Review inline-exception cases (links in sentences) and dense toolbars flagged by the check. |
| 3.1.2 Language of Parts | AA | Search copy for non-English phrases beyond proper names and mark them with lang. |
| 3.2.4 Consistent Identification | AA | Confirm controls with the same function (theme toggle, show markup, close) use the same label and icon on every page. |
| 3.3.1 Error Identification | A | Confirm the error text in the invalid-field specimen names the problem. |
| 3.3.2 Labels or Instructions | A | Confirm placeholder-only specimens are labeled (visibly or via aria-label) and required fields are marked. |
| 3.3.3 Error Suggestion | AA | Confirm the specimen error messages suggest a fix where one is known. |
| 4.1.2 Name, Role, Value | A | Confirm custom widgets (tabs, menu, tree, listbox, combobox, dialog) expose the right states after interaction, not only in their initial markup. |
| 4.1.3 Status Messages | AA | Confirm toast and inline status specimens announce without taking focus. |