Foundations
The non-negotiables of an inclusive experience.
Foundations are the DNA of the wA11y system. They are the global rules and building blocks that ensure every product we build is perceivable, operable, and understandable by default. By establishing these shared standards early, we “shift left,” preventing 70% of common accessibility defects before a single component is even built
Design Tokens (Color & Type)
Tokens are the smallest pieces of our system. We’ve baked accessibility requirements directly into our variables so you don’t have to guess if a color is “safe” to use.
Semantic Color Palettes:
Every color pairing is pre-tested to meet or exceed the 4.5:1 contrast ratio for standard text
Dyslexia-Friendly Typography:
Our type scales prioritize readability, line-height, and character spacing to support neurodivergent users
Spacing & Grids
Layout foundations built for predictability and ease of navigation.
The Components Library
Build, review, and release with confidence.
Navigation Patterns
Breadcrumbs, skip-links, and menus designed for keyboard and screen reader predictability.
Forms & Inputs
Accessible inputs with persistent labels and programmatically associated error messages
Overlays & Modals
Focus-trapped dialogs and tooltips that follow the “First Rule of ARIA”.
Data Visualization
Tables and charts that communicate meaning through more than just color
3 Essentials for Every Component
Build, review, and release with confidence.
Semantics Over ARIA
We use native HTML elements first to ensure the best support for assistive tech.
Visible Focus Always
We never remove the default browser outline without a high-visibility replacement
Logical Reading Order
Every layout is tested to ensure content flows predictably for screen reader users
Deep Dive: System Toolboxes
Downloadable resources to help your team implement the system at scale.
The wA11y Token Spreadsheet
A mapping of all semantic tokens to their corresponding WCAG contrast ratios.
Designer’s Handoff Checklist
A 1-page guide to annotating focus order and intent for developers.
The “Stop & Fix” Dev Card
A quick reference for common code-level accessibility red flags.
Accessible Components Vetting Guide
How to audit third-party components before adding them to your library.
