Библиотека доступных компонентов с автотестами
TetraLogical открыли библиотеку доступных компонентов, в которой есть не только код, но и доказательства: требования, сценарии проверок и рабочие автотесты, которые проверяют каждый компонент.
В версии 1.0.0 восемь компонентов: Accordion, Breadcrumbs, Dialog, Disclosure, Pagination, Tabs, Text input и Textarea. К каждому прилагаются рабочие примеры, HTML/CSS/JS и документация: когда использовать, когда нет, требования к доступности, сценарии тестов и совместимость с вспомогательными технологиями.
Что стоит посмотреть:
→ **Требования, связанные с WCAG 2.2.** Подходящие критерии уровней A, AA и AAA, плюс собственные рекомендации там, где WCAG не покрывает тему (например, темы высокого контраста). Сгруппированы в десять тем, вроде Keyboard, Colour and contrast и Pointer and touch, с ними проще, чем с самим стандартом → **Каждое требование — это сценарий на Gherkin**, который гоняется через Cucumber и Playwright в настоящем браузере. Теги обозначают критерий WCAG и уровень соответствия, поэтому можно запускать, например, только A и AA. Сценарий выглядит так:
\\ Rule: 1.4.10 Reflow, Level AA Scenario: Content reflows without horizontal scrolling at 320px wide When I set the viewport to 320px wide Then it should reflow without requiring horizontal scrolling \\
Дизайнер, тестировщик и разработчик читают это одинаково и согласны, что значит «прошёл» → **Это дальше, чем статические чекеры.** Тесты кликают и проходят по компоненту табом, как человек, а потом считывают состояния элементов из браузера. Так можно поймать, например, индикатор фокуса, спрятанный под другим элементом → **97% сценариев автоматизированы полностью.** Для оставшихся 3% каждый запуск даёт JSON-отчёт и Markdown-чеклист того, что должен проверить человек. Тесты со screen reader’ами и браузерами остаются ручными, потому что прохождение всех проверок не гарантирует отсутствия нюансов → **Полный локальный прогон занимает около 30 секунд**, и его можно встроить в CI: регрессии будут видны на pull request, а не на следующем платном аудите
Авторы прямо говорят об ограничениях: компоненты опинионные и делались под их собственные нужды, так что тестируйте их в своём продукте, и это не готовая к продакшену дизайн-система. Лицензия ISC, issues принимаются, а pull request’ы пока нет.
Библиотека 👇 https://tetralogical.com/resources/accessible-components-library/
Вводная статья Craig Abbott / TetraLogical 👇 https://tetralogical.com/blog/2026/10/14/accessible-components-library/
