ru-a11y-toolkit
v2.2.0
Published
Toolkit для автоматизированной проверки веб-доступности React/JS-приложений под российские нормативы (ГОСТ Р 52872-2019, Постановление №102)
Maintainers
biondohodReadme
ru-a11y-toolkit
Набор инструментов для проверки веб-доступности React/JS-проектов по российским требованиям.
Подробности и примеры находятся в README каждого пакета, этот файл - краткий обзор.
Состав toolkit
| Пакет | Кратко |
| --- | --- |
| ru-a11y-toolkit-eslint | Статический lint-доступности с русскими сообщениями и пресетами ГОСТ/№102. |
| ru-a11y-toolkit-core | Единый каталог правил, переводов, алиасов axe/ESLint и нормативных ссылок. |
| ru-a11y-toolkit-overlay | Runtime-панель в браузере для визуализации нарушений в dev-режиме. |
| ru-a11y-toolkit-cli | CLI-аудит готовых URL (Puppeteer + axe-core) с отчетами console/json/html. |
| ru-a11y-toolkit-visually-impaired | Режим повышенной читабельности для конечных пользователей сайта. |
Нормативное покрытие
В этой версии правила сведены в общий ru-a11y-toolkit-core, чтобы CLI, overlay и ESLint показывали одинаковые русские названия, рекомендации и ссылки на ГОСТ/Постановление №102.
| Направление | Результат |
| --- | --- |
| Общий каталог правил | 115 правил и нормативных метаданных |
| Собственные ESLint-правила | 10 правил: 7 базовых + require-main-landmark, require-h1, no-autoplay-media |
| Overlay runtime-проверки | 44 дополнительные DOM-проверки поверх axe-core |
| Уточнённые связки правил | Таблицы, заголовки, язык, skip-link, landmark, медиа, ARIA/focus, формы и масштабирование |
Что важно для отчётности: часть проверок пересекается с WCAG/axe-core, но в ГОСТ Р 52872-2019 и Постановлении №102 требования часто формулируются прикладнее. Например, проверка заголовков разбита на <title>, наличие <h1>, порядок уровней и пустые заголовки; таблицы разделены на таблицы данных, scope/caption и запрет layout-таблиц; skip-link проверяется не только на наличие, но и на существующую DOM-цель.
Установка
Все инструменты сразу:
npm install --save-dev ru-a11y-toolkitИли по отдельности:
npm install --save-dev ru-a11y-toolkit-eslint
npm install --save-dev ru-a11y-toolkit-core
npm install --save-dev ru-a11y-toolkit-cli
npm install --save-dev ru-a11y-toolkit-overlay
npm install ru-a11y-toolkit-visually-impairedМодули: подключение и что ожидать
ru-a11y-toolkit-eslint
ESLint-пакет для раннего обнаружения проблем доступности в JSX/TSX еще до запуска приложения. Сообщения правил русскоязычные и привязаны к ГОСТ/№102, поэтому результаты сразу понятны разработке и QA.
Быстрый старт:
const ruA11y = require('ru-a11y-toolkit-eslint');
module.exports = [ruA11y.configs['gost-aa']];Что ожидать:
✖ Отсутствует ссылка пропуска навигации
src/App.jsx:3:5 @ru-a11y/gost-a11y/require-skip-linkПодробнее: packages/eslint-preset/README.md
ru-a11y-toolkit-overlay
React-overlay показывает runtime-нарушения прямо поверх интерфейса в dev-режиме. Это ускоряет исправления, потому что проблемный элемент можно увидеть и проверить сразу в браузере.
Быстрый старт:
import { RuA11yOverlay } from 'ru-a11y-toolkit-overlay';
{process.env.NODE_ENV === 'development' && <RuA11yOverlay />}Что ожидать:
В dev-режиме появится панель с количеством нарушений,
группировкой по принципам и подсветкой проблемных элементов на странице.Подробнее: packages/react-overlay/README.md
ru-a11y-toolkit-cli
CLI-аудитор проверяет уже работающие страницы по URL через Puppeteer + axe-core и формирует общий отчет. Удобен для CI/CD, регресс-проверок и nightly-сканов.
Быстрый старт:
ru-a11y-cli https://example.com --format html --output ./reportsЧто ожидать:
Проверено страниц: 1
Выявлено нарушений: 3Подробнее: packages/cli/README.md
ru-a11y-toolkit-visually-impaired
Пакет добавляет переключаемый режим повышенной читабельности для конечного пользователя: контраст, увеличенный шрифт, усиленный фокус и снижение визуального шума. Используется как UX-дополнение к lint/runtime проверкам.
Быстрый старт:
import { useVisuallyImpaired } from 'ru-a11y-toolkit-visually-impaired';
import 'ru-a11y-toolkit-visually-impaired/styles/visually-impaired.css';Что ожидать:
После toggle() на <html> добавляется класс ru-a11y-visually-impaired,
а интерфейс переключается в высококонтрастный режим с крупным шрифтом.Подробнее: packages/visually-impaired/README.md
Документация пакетов в github
packages/eslint-preset/README.mdpackages/cli/README.mdpackages/react-overlay/README.mdpackages/visually-impaired/README.md
Разработка
git clone https://github.com/biondohod/ru-a11y.git
cd ru-a11y
npm install
npm run test:allЛицензия
MIT © biondohod