Back to Devoured - October 28, 2026
DEVOURED
Accessible Components Library (Website)

Accessible Components Library (Website)

Design frontendopensource Tetralogical
Tetralogical has published a library of accessible UI components including Gherkin-based test scenarios to verify WCAG 2.2 compliance.
What: The library provides code examples and accessibility documentation for common UI components. Each component includes test scenarios written in Gherkin to standardize how developers check for WCAG compliance.
Why it matters: This offers a practical bridge between abstract accessibility guidelines and concrete code, helping teams treat accessibility as an automated, testable requirement.
Takeaway: Use the Gherkin scenarios provided in the repo to integrate accessibility regression testing into your existing test suites.
Deep dive
  • Gherkin Formatting: Uses plain-language syntax (Given/When/Then) to define accessibility tests.
  • Scope: Includes documentation for input assistance, keyboard navigation, and reflow.
  • License: Released under the ISC license for free reuse.
Decoder
  • WCAG (Web Content Accessibility Guidelines): A set of international standards for making web content more accessible to people with disabilities.
  • Gherkin: A business-readable language used for behavior-driven development (BDD) to define test cases in plain text.
Original article

Accessible components library

Accessible components with working examples, code, guidance, and the test scenarios we use to check them.

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 scrolling

License

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.

Explore all 54 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi