Canon / accessibility

rule.a11y.wcag-aa · canon

Meet WCAG 2.2 AA by default

Accessibility is a release gate, not a polish pass.

Guidance

Every interactive surface must meet WCAG 2.2 AA for contrast, keyboard, name, and operable paths.

Verification contract

axe serious/critical = 0; keyboard suite green

Supporting references

• ref.a11y.axe-core — axe-core
• ref.adobe.react-aria — React Aria
• ref.adobe.spectrum-accessibility — Spectrum Accessibility
• ref.ameba.spindle — Spindle Design System
• ref.apple.hig-accessibility — Apple HIG Accessibility
• ref.apple.hig — Apple Human Interface Guidelines
• ref.atlassian.accessibility — Atlassian Design System Accessibility
• ref.baseui.base-ui — Base UI
• ref.digital-agency-jp.dads-react — DADS React Samples
• ref.digital-agency-jp.dads — デジタル庁デザインシステム (DADS)
• ref.github.primer-accessibility — Primer Accessibility
• ref.google.material-accessibility — Material 3 Accessible Design
• ref.govuk.accessibility — GOV.UK Design System Accessibility
• ref.govuk.design-system — GOV.UK Design System
• ref.govuk.error-summary — GOV.UK Error Summary Pattern
• ref.ibm.carbon-accessibility — Carbon Accessibility Overview
• ref.ibm.carbon-data-visualization — Carbon Data Visualization
• ref.microsoft.fluent-accessibility — Fluent 2 Accessibility
• ref.radix.primitives — Radix Primitives
• ref.shopify.polaris-accessibility — Shopify Polaris React Accessibility
• ref.smarthr.accessibility-process — SmartHR Accessibility Quality and Process
• ref.smarthr.design — SmartHR Design System
• ref.uswds.uswds — U.S. Web Design System
• ref.w3c.apg — ARIA Authoring Practices Guide
• ref.w3c.wcag-22 — WCAG 2.2
• ref.w3c.wcag-3 — WCAG 3.0 Working Draft

Implementations and verification artifacts

• artifact.component.accordion — Accordion component · packages/react/src/components/Accordion.tsx
• artifact.component.alert-dialog — AlertDialog component · packages/react/src/components/Dialog.tsx
• artifact.component.breadcrumb — Breadcrumb component · packages/react/src/components/Navigation.tsx
• artifact.component.button — Button component · packages/react/src/components/Button.tsx
• artifact.component.checkbox — Checkbox component · packages/react/src/components/Input.tsx
• artifact.component.dialog — Dialog component · packages/react/src/components/Dialog.tsx
• artifact.component.dropdown-menu — DropdownMenu component · packages/react/src/components/Overlay.tsx
• artifact.component.icon-button — IconButton component · packages/react/src/components/IconButton.tsx
• artifact.component.input — Input component · packages/react/src/components/Input.tsx
• artifact.component.link — Link component · packages/react/src/components/Link.tsx
• artifact.component.popover — Popover component · packages/react/src/components/Overlay.tsx
• artifact.component.progress — Progress component · packages/react/src/components/Status.tsx
• artifact.component.radio-group — RadioGroup component · packages/react/src/components/Input.tsx
• artifact.component.select — Select component · packages/react/src/components/Input.tsx
• artifact.component.spinner — Spinner component · packages/react/src/components/Status.tsx
• artifact.component.switch — Switch component · packages/react/src/components/Input.tsx
• artifact.component.tabs — Tabs component · packages/react/src/components/Tabs.tsx
• artifact.component.textarea — Textarea component · packages/react/src/components/Input.tsx
• artifact.component.tooltip — Tooltip component · packages/react/src/components/Overlay.tsx
• artifact.component.visually-hidden — VisuallyHidden component · packages/react/src/components/Layout.tsx
• artifact.test.a11y-suite — A11y suite test · tests/a11y
• artifact.test.component-contracts — Component contract unit and keyboard suites test · packages/react/src/components/Components.test.tsx