Кратко: в SPA доступность обеспечивается сочетанием правильной семантики (HTML), детерминированного управления фокусом и предсказуемых объявлений экранным читалкам (ARIA/aria-live), плюс архитектурные сервисы и тесты для централизованного контроля. Ниже — практики и решения, которые надо внедрить.
1) Принцип «семантика прежде всего»
- Используйте нативные элементы (button, a, input, form, nav, main, header, footer, ul/ol, table) — они имеют встроенное поведение/роль.
- ARIA только там, где нативной семантики недостаточно; не переопределяйте роли без необходимости.
2) Управление фокусом
- Обеспечьте логичный порядок фокуса соответствующий DOM-порядку. Избегайте tabindex>0; используйте tabindex="0" для не-фокусируемых по умолчанию элементов.
- При открытии модальных окон/диалогов:
- переводите фокус в первый фокусируемый элемент внутри модального окна;
- блокируйте фокус вне модального (use inert или polyfill / focus-trap);
- на закрытие возвращайте фокус на элемент, инициировавший открытие.
- Для видимых переключателей/панелей (tabs, menubar, toolbar) используйте «roving tabindex» (только текущий элемент имеет tabindex="0", остальные - tabindex="-1") и реализуйте ожидаемые клавиатурные стрелочные/Enter/Space-паттерны согласно WAI-ARIA APG.
- Везде оставляйте видимый фокус (CSS :focus) и не скрывайте outline для клавиатурных пользователей.
3) ARIA-атрибуты и роли (практические)
- Landmarks: , , , , . Дополнительно role="navigation", role="main" при необходимости.
- Обозначение динамики:
- aria-live="polite" для не-критичных уведомлений; aria-live="assertive" для важных прерывающих сообщений. Добавляйте aria-atomic и aria-relevant по необходимости.
- Реализуйте единый «announcer» (скрытый aria-live элемент), которым пользуются все компоненты для объявления сообщений (чтобы не было множества конфликтующих live-регионов).
- Диалоги: role="dialog" + aria-modal="true" + aria-labelledby/aria-describedby. Прятайте фоновые элементы (aria-hidden="true" или inert).
- Управление состояниями: aria-expanded, aria-pressed, aria-selected, aria-controls, aria-hidden — синхронизируйте с видимым состоянием.
- Для сложных виджетов придерживайтесь WAI-ARIA Authoring Practices (tabs, menu, tree, grid и т.д.) и их рекомендованных клавиатурных схем.
4) Объявления при навигации/роутинге
- При переходе маршрута обновляйте document.title и содержимое main. Также:
- перемещайте фокус на основной заголовок или элемент (например, focus on внутри );
- дополнительно отправляйте сообщение в централизованный live-announcer: «Заголовок страницы — открыт».
- Не полагайтесь только на историю браузера — читалки не всегда ловят виртуальные переходы.
5) Архитектурные решения
- Централизованный a11y-сервис/утилиты:
- announcer service (один aria-live элемент, API: announce(text, level));
- focus manager (api: trap(element), release(), moveFocusTo(selector), restorePrevious());
- helpers для модальных окон, роутера (onRouteChange -> updateTitle(), focusMain(), announce()).
- Компонентная библиотека с готовыми доступными паттернами (tab, dialog, menu) и строгим API (props для aria-* и callbacks).
- CI интеграция тестов: axe-core, pa11y, eslint-plugin-jsx-a11y (для React/Vue — соответствующие плагины), plus end-to-end тесты на клавиатуре (Playwright/Puppeteer) и smoke-тесты со скринридером (по возможности).
- Документация и примеры поведения клавиш (визуальная документация для разработчиков).
6) Производственные нюансы и рекомендации
- Избегайте частых/многократных обновлений aria-live (спам объявлений). Буферизуйте/дебаунсьте.
- Для длинных списков используйте aria-busy при загрузке и отдавайте фокус/announce по завершении.
- Не используйте role="application" чаще чем нужно — переводит читалку в режим приложения и меняет поведение навигации.
- Тестируйте на реальных читалках: NVDA+Firefox, JAWS+IE/Edge, VoiceOver+iOS/Safari.
- Следите за языком страницы () и локализацией сообщений announce.
7) Примеры (схематично)
- Централизованный live-announcer (HTML/JS):
JS: function announce(msg){ const el = document.getElementById('a11y-announcer'); el.textContent = ''; setTimeout(()=> el.textContent = msg, 50); }
- Роутинг: onRouteChange -> document.title = newTitle; focusMain(); announce(newTitle + ' — страница загружена');
8) Тестирование и приёмка
- Автомат: axe/pa11y, линтеры.
- Ручное: сценарии клавиатурной навигации, тесты с NVDA/JAWS/VoiceOver, проверки модальных окон, табов, списков, форм.
- Включите в Definition of Done обязательные a11y-чеки.
Коротко: используйте семантический HTML, централизованный announcer и focus-manager, соблюдайте ARIA-patterns (APG), обновляйте title и фокус при навигации, тестируйте на реальных читалках и в CI. Это даст предсказуемый и удобный опыт для пользователей экранных читалок и клавиатурной навигации.