CONCEPTS
Accessibility
Accessibility is not a pass someone does at the end here. It is a property of the components, checked continuously.
That claim is worth being precise about, because "accessible" is claimed by nearly every component library and means different things. Here is what we guarantee, and what remains yours.
What we guarantee
Every interactive component follows its WAI-ARIA pattern.
Not an approximation. Tabs behave like the tabs pattern, a tree like the tree view, a combobox like a combobox. Roles, states and properties are set for you.
Keyboard support is built in.
Arrow keys, Home and End, Escape, type-ahead, and correct focus movement when things open and close. It is part of the component, not something you add.
Contrast is guaranteed by the engine that generates the colour.
Every step of every generated scale has a text colour that clears its minimum, and the semantic roles are derived by contrast rather than chosen by eye.
Focus is always visible.
On every control, in both themes.
What stays yours
A component library cannot make a product accessible on its own. These are yours, and no library can do them for you:
- Labels
- We cannot know what your field is called. An input with no label is inaccessible however good the input is.
- Reading order and headings
- The structure of your page, and picking heading levels that nest properly.
- Alternative text
- For your images and icons.
- Colour choice
- The generated palette holds its contrast, but you can still put text on a background it was never paired with.
- Content
- Plain language, sensible link text, error messages that say what to do.
The component handles
- Roles and ARIA states
- Keyboard navigation
- Focus management
- Contrast of the generated palette
- Visible focus
You handle
- Labels
- Heading structure
- Reading order
- Alt text
- Link text
- Error wording
How the guarantees are kept
The behaviour layer is tested to full coverage, and then mutation-tested. Mutation testing changes the code deliberately and checks that a test fails. It is the difference between a keyboard model that is merely covered and one that is actually asserted on.
Colour is checked at the source. The contrast floors live in the engine that generates the palette, and the semantic roles are pinned to what that engine derives, so they cannot drift quietly.
Checking your own work
Three checks catch most of what matters, and none needs a specialist:
- Unplug your mouse
- Tab through the page. If you cannot reach something, or you lose track of where you are, that is a real bug.
- Zoom to 200%
- Text should reflow rather than clip.
- Read your labels aloud
- If a link says "click here", it says nothing useful out of context.