Skip to content

Accessibility (a11y)

Short operator and developer checklist. Tracked in GitHub issue #117.

Русский

Automated checks

  • E2E: app/e2e/tests/a11y.spec.ts runs axe-core (WCAG 2.0 A + AA tags) on key routes: /, /timeline, /timeline?review=1, /migration-calendar, /videos/0.
  • How to run: with the stack up (e.g. make start in app/), from app/e2e: npm ci, npx playwright install chromium, npm test (or npx playwright test tests/a11y.spec.ts). Same flow as TESTING.md E2E.

Manual smoke (keyboard)

  1. From the first load, Tab should reveal Skip to main content (EN) / Перейти к основному содержимому (RU); Enter moves focus into the main landmark (#main-content).
  2. Timeline (including ?review=1), video details, Migration calendar: Tab through primary actions; every focusable control should show a visible focus ring (teal outline).
  3. Live nav control: label readable; color contrast sufficient on the default dark theme.

UI conventions

  • Prefer native buttons/links or MUI components with correct roles; do not put aria-label on a plain div without a valid role (use role="img" + short label for icon-only status, or expose text).
  • Icon-only controls need aria-label (or visible text).
  • Data tables: provide a <caption> (may be visually hidden) and section headings where filters form a distinct region.