Доступность (a11y)
Короткий чеклист для операторов и разработчиков. Задача в GitHub: #117.
Автоматические проверки
- 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.
Ручная проверка (клавиатура)
- После загрузки страницы Tab должен показать ссылку Перейти к основному содержимому; Enter переносит фокус в основной блок (
#main-content). - Записи (в т.ч.
?review=1), страница видео, календарь миграций: обход Tab по основным действиям; у каждого фокусируемого элемента виден контур фокуса (бирюзовая обводка). - Кнопка Live в шапке: читаемая подпись; достаточный контраст на тёмной теме.
Соглашения по UI
- Предпочитать нативные кнопки/ссылки или компоненты MUI с корректными ролями; не вешать
aria-labelна голыйdivбез валидногоrole(для статуса-иконки —role="img"и краткая подпись, либо видимый текст). - Только иконка — нужен
aria-label(или видимый текст). - Таблицы данных:
caption(можно визуально скрытый) и заголовки секций, если фильтры — отдельная область.