Accessible components library
Accessible components with working examples, code, guidance, and the test scenarios we use to check them.
Note
These are components we use in our own work. You're free to reuse or adapt them, but they're not a production-ready design system. Test them in your own context before you rely on them.
For each component, we've documented:
- What problem it solves
- When to use it
- When not to use it
- Where to use it
- Accessibility requirements
You can view the project on GitHub and access the code for the live examples, along with the working tests which sit behind the scenarios.
Bug reports and suggestions are welcome, so please open an issue on GitHub if you spot a problem or think something could be better. We're not accepting pull requests at the moment, but we read every issue.
Accessibility requirements
We document the accessibility requirements for each component, covering all relevant Web Content Accessibility Guidelines (WCAG) 2.2 level A, AA and AAA success criteria, our recommended best practice, and the assistive technology and browser pairings we've tested against.
The requirements for each component are grouped by theme:
- Adaptability
- Animation and movement
- Assistive technologies and semantics
- Colour and contrast
- Consistency and predictability
- Images and media
- Input assistance
- Keyboard
- Navigation
- Pointer and touch
Each requirement is published with test scenarios, so you can test that you're meeting it.
The full set of requirements, and the people and assistive technologies they're written for, is on the accessibility requirements page. Terms used throughout the documentation are explained in the glossary.
Test scenarios
We map each requirement to a test scenario using Gherkin formatting, which lets us write tests in plain language. That means anyone can follow what's being tested, even without understanding the code behind it.
Every scenario is built from a shared set of steps. You can view the full list of test steps to see what each one does and write scenarios of your own.
For example:
@1.4.10@aa@manual
Rule:1.4.10 Reflow, Level AA
Scenario: Content reflows without horizontal scrolling at 320px wide
Given I load the sample "https://tetralogical.com/resources/accessible-components-library/breadcrumbs/examples/default.html"
When I view the rendered '.tl-breadcrumbs'
And I set the viewport to 320px wide
Then it should reflow without requiring horizontal scrollingLicense
This project is released under the ISC licence. You're free to use, copy, modify and share the code and documentation, including in commercial projects, as long as the copyright notice stays with it.