Web Accessibility

Веб-доступность (a11y) — практики, делающие сайт пригодным для людей с ограниченными возможностями: незрячих, слабовидящих, людей с моторными нарушениями, когнитивными особенностями.

Основной стандарт — WCAG 2.2 (Web Content Accessibility Guidelines). Уровень AA — минимум для коммерческих сайтов.

WCAG 2.2 AA — ключевые требования

Perceivable (воспринимаемость)

Все изображения имеют осмысленный alt (не “image”, не пустой для информативных)
Декоративные изображения: alt="" или role="presentation"
Видео и аудио: субтитры или текстовая альтернатива
Контент не зависит только от цвета (1.4.1)
Текст масштабируется до 200% без потери функциональности (1.4.4)
Reflow: контент читаем при ширине 320 CSS px без горизонтальной прокрутки (1.4.10)
Контраст текста минимум 4.5:1, крупного текста 3:1 (1.4.3)
UI-компоненты и графические объекты: контраст минимум 3:1 (1.4.11)

Operable (управляемость)

Все интерактивные элементы доступны с клавиатуры (2.1.1)
Нет клавиатурных ловушек (2.1.2)
Skip-link “Перейти к содержимому” — первый фокусируемый элемент (2.4.1)
Уникальный <title> для каждого маршрута (2.4.2)
Логичный порядок фокуса (2.4.3)
[2.2] Focus Not Obscured (2.4.11): элемент при фокусе не перекрыт sticky-шапкой
[2.2] Dragging Movements (2.5.7): для drag-операций есть альтернатива через клик
[2.2] Target Size Minimum (2.5.8): интерактивные элементы минимум 24x24 CSS px

Understandable (понятность)

<html lang="ru"> (3.1.1)
Фрагменты на другом языке обёрнуты <span lang="en"> (3.1.2)
Ошибки форм идентифицированы текстом, не только цветом (3.3.1)
Поля форм имеют видимые labels (3.3.2)
[2.2] Accessible Authentication (3.3.8): авторизация без когнитивных тестов

Robust (надёжность)

Валидный HTML — нет дублирующих id (4.1.1)
Кастомные компоненты имеют корректные ARIA-роли (4.1.2)
Статусные сообщения через role="status" или aria-live (4.1.3)

ARIA-паттерны для SPA

Live regions (aria-live="polite") должны быть в DOM при загрузке, не создаваться динамически
aria-expanded на кнопках dropdown/accordion
aria-current="page" на активном пункте навигации
aria-label на элементах без видимого текста (icon-only кнопки)
aria-describedby связывает hint-текст и ошибки с полями форм
aria-hidden="true" на декоративных SVG-иконках
Не использовать ARIA где достаточно семантического HTML

Vue 3 SPA — специфика

Объявление смены маршрута

SPA меняет страницу без перезагрузки — скринридер молчит. Решение:

// router.ts
router.afterEach((to) => {
  document.title = to.meta.title as string || 'SiteName';
  nextTick(() => {
    const heading = document.querySelector('h1');
    if (heading) {
      heading.setAttribute('tabindex', '-1');
      heading.focus();
    }
    const announcer = document.getElementById('route-announcer');
    if (announcer) announcer.textContent = to.meta.title as string;
  });
});

<!-- App.vue — всегда в DOM -->
<div id="route-announcer" aria-live="polite" aria-atomic="true" class="sr-only"></div>

Динамический контент

Загрузка данных: aria-busy="true" на контейнере
v-if/v-show для live region: предпочитать v-show или держать контейнер в DOM
Toast-уведомления через live region, не через динамическое создание DOM

Доступность Leaflet-карт

Контейнер: aria-label="Интерактивная карта маршрута" + role="application"
Маркеры: L.marker([lat, lng], { alt: 'Описание точки' })
Кнопки zoom: aria-label="Приблизить", aria-label="Отдалить"
Текстовая альтернатива маршрута (список точек с адресами)
Если карта декоративная: aria-hidden="true" + tabindex="-1"

Русскоязычная специфика

<html lang="ru"> обязательно — без этого скринридер произносит кириллицу с английским произношением
Англоязычные вставки: <span lang="en">Strava</span>
ARIA-labels на русском: “Основная навигация”, “Закрыть”, “Меню”
Аббревиатуры: <abbr title="километр">км</abbr>
Тестирование: NVDA с русским синтезатором (eSpeak/RHVoice)

Инструменты аудита

Автоматические (браузер)

Инструмент	Что делает
Lighthouse	Chrome DevTools → Lighthouse → Accessibility. Score 0-100, ~50 правил
axe DevTools	Расширение Chrome. ~100 правил axe-core, WCAG 2.0/2.1/2.2
WAVE	wave.webaim.org или расширение. Визуальный оверлей иконок на странице
Accessibility Insights	Расширение Microsoft. Tab Stops — визуализация порядка фокуса

CI-интеграция

Playwright + axe-core (рекомендуемый):

npm install -D @playwright/test @axe-core/playwright

import AxeBuilder from '@axe-core/playwright';
test('page a11y', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa'])
    .exclude('.leaflet-container')
    .analyze();
  expect(results.violations).toEqual([]);
});

ESLint-плагин (shift-left):

npm install -D eslint eslint-plugin-vuejs-accessibility vue-eslint-parser

pa11y (быстрый smoke test):

npx pa11y https://example.com --standard WCAG2AA

Ручное тестирование

VoiceOver (macOS): Cmd+F5, VO+U (Rotor) для headings/landmarks/links.

Keyboard: Tab/Shift+Tab по всей странице. Проверить: видимый focus, логичный порядок, модалки с focus trap.

Аудит RideHub (2026-04-03)

Общая оценка: 4/10. Базовая структура есть, целенаправленной работы над a11y не было.

Что хорошо

<html lang="ru"> ✓
Семантические теги <nav>, <main>, <footer>, <section> ✓
document.title обновляется при навигации (useSeo.ts) ✓
prefers-reduced-motion реализован ✓
Dark mode с OS preference ✓
Viewport не блокирует zoom ✓
Шрифты в rem/em ✓
role="dialog" + aria-modal="true" на модалках ✓

Критические проблемы (P0)

Формы без <label> — все поля полагаются на placeholder. LoginView, admin формы
Focus styles уничтожены — outline: none без замены. Нет :focus-visible
Ошибки форм не озвучиваются — нет role="alert", нет aria-describedby
Нет skip-link — клавиатурный пользователь проходит всю навигацию на каждой странице
Нет route announcer — SPA меняет страницу, скринридер молчит

Серьёзные проблемы (P1)

Модалки без focus trap — фокус уходит за пределы. Нет возврата фокуса на триггер
Карты недоступны — 14 Leaflet-компонентов без aria-label
<a> вместо <button> — LoginView logout, HomeView region selection
Loading states — LoadingSpinner без aria-live, aria-busy
Низкий контраст — footer legal текст ~2.5:1 (нужно 4.5:1)

План исправления

Фаза 1 (1 день, quick wins): skip-link, labels на формы, :focus-visible, role="alert" на ошибки, route announcer.

Фаза 2 (2-3 дня): focus trap в модалках, <a> → <button>, aria-label на карты, aria-hidden на SVG.

Фаза 3 (3-5 дней): контраст, aria-current/aria-expanded в навигации, axe-core в CI, ESLint-плагин.

Struchkov's Garden 🪴

Недавние заметки

Web Accessibility

Web Accessibility

WCAG 2.2 AA — ключевые требования

Perceivable (воспринимаемость)

Operable (управляемость)

Understandable (понятность)

Robust (надёжность)

ARIA-паттерны для SPA

Vue 3 SPA — специфика

Объявление смены маршрута

Динамический контент

Доступность Leaflet-карт

Русскоязычная специфика

Инструменты аудита

Автоматические (браузер)

CI-интеграция

Ручное тестирование

Аудит RideHub (2026-04-03)

Что хорошо

Критические проблемы (P0)

Серьёзные проблемы (P1)

План исправления

Источники

Оглавление