Skip to content

Доступность (a11y)

Короткий чеклист для операторов и разработчиков. Задача в GitHub: #117.

English

Автоматические проверки

  • E2E: app/e2e/tests/a11y.spec.ts запускает axe-core (теги WCAG 2.0 A + AA) на маршрутах: /, /timeline, /timeline?review=1, /migration-calendar, /videos/0.
  • Как запустить: при поднятом стеке (например make start в app/), из app/e2e: npm ci, npx playwright install chromium, npm test (или npx playwright test tests/a11y.spec.ts). Тот же контур, что в TESTING.ru.md для E2E.

Ручная проверка (клавиатура)

  1. После загрузки страницы Tab должен показать ссылку Перейти к основному содержимому; Enter переносит фокус в основной блок (#main-content).
  2. Записи (в т.ч. ?review=1), страница видео, календарь миграций: обход Tab по основным действиям; у каждого фокусируемого элемента виден контур фокуса (бирюзовая обводка).
  3. Кнопка Live в шапке: читаемая подпись; достаточный контраст на тёмной теме.

Соглашения по UI

  • Предпочитать нативные кнопки/ссылки или компоненты MUI с корректными ролями; не вешать aria-label на голый div без валидного role (для статуса-иконки — role="img" и краткая подпись, либо видимый текст).
  • Только иконка — нужен aria-label (или видимый текст).
  • Таблицы данных: caption (можно визуально скрытый) и заголовки секций, если фильтры — отдельная область.