Перейти к основному содержимому

Контроль и автоматизация (a11y)

В данном разделе описаны процедуры контроля доступности в процессе разработки и инструменты для автоматической проверки.

Инструменты для проверки a11y​

MUST​

  1. ESLint: eslint-plugin-jsx-a11y включён и не игнорируется без причины
    • Рекомендуемый пресет: plugin:jsx-a11y/recommended
  2. Любое отключение правила — с комментарием почему или ссылкой на проблему (issue)

SHOULD​

Runtime-проверки:

@axe-core/react — проверяет accessibility tree отрендеренной страницы в процессе разработки.

Что проверяет (не видно при статическом анализе):

  1. Контраст текста (computed styles, включая фон через псевдоэлементы)
  2. Структуру заголовков (порядок, пустые заголовки, наличие h1)
  3. Валидность ARIA (роли, атрибуты, обязательные свойства, вложенность)
  4. Корректность landmarks (main, banner, contentinfo)
  5. Наличие lang атрибута на <html>
  6. Дублирование id (ломает aria-labelledby / describedby)

Пример конфигурации:

// _app.tsx или main.tsx
if (process.env.NODE_ENV !== 'production') {
  import('@axe-core/react').then((axe) => {
    axe.default(React, ReactDOM, 1000);
  });
}

Процедуры контроля (Code Review)​

Ревьюер обязан проверить​

  1. ✅ Корректность семантики HTML (button vs a, наличие label)
  2. ✅ Доступность интерактивных элементов с клавиатуры
  3. ✅ Наличие label у полей форм
  4. ✅ alt описывает смысл, а не внешний вид изображения
  5. ✅ Контент в ::before/::after — только декоративный
  6. ✅ Кастомизация компонентов UI-библиотеки не сломала a11y

Автоматизация​

ESLint:

{
  "extends": ["plugin:jsx-a11y/recommended"],
  "rules": {
    "jsx-a11y/no-autofocus": "warn",
    "jsx-a11y/alt-text": "error"
  }
}

Runtime (опционально):

npm install --save-dev @axe-core/react

Чеклист разработчика​

Перед коммитом​

  • Используется семантический HTML (button/a/label/input)
  • Нет кликабельных div/span
  • Все интерактивные элементы доступны с клавиатуры
  • Фокус визуально заметен (:focus-visible)
  • Иерархия заголовков корректна (один h1, нет пропусков уровней)
  • Все поля форм имеют label
  • Все изображения имеют alt (пустой для декоративных)
  • Ошибки валидации связаны с полями (aria-describedby)
  • Нет важной информации в ::before/::after

Перед ревью​

  • ESLint (eslint-plugin-jsx-a11y) проходит без ошибок
  • Любые отключения правил a11y прокомментированы
  • Модалки имеют focus trap и возврат фокуса
  • Кастомизация UI-библиотек не сломала a11y
  • Протестировано с клавиатуры (Tab-навигация работает)
  • @axe-core/react не показывает критических ошибок (если используется)