Кратко и по делу: сначала общие принципы (семантика, клавиатура, видимый фокус, альтернативы, управляемая анимация), затем примеры HTML/CSS/JS и список автоматических и ручных проверок.
Основные принципы
- Семантическая разметка: используйте тегы \, \, \, \, \–\, \, \, \, \ вместо чистого \.
- Тексты альтернатив: для изображений — понятный alt; для мультимедиа — субтитры и расшифровки.
- Управление фокусом и клавиатура: все интерактивные элементы доступны через Tab, Enter, Space; логичный порядок фокуса.
- Видимый фокус: не скрывайте outline, используйте :focus или :focus-visible.
- Цвет и контраст: соблюдайте контраст текста и фона (см. WCAG $2.1$).
- Не полагайтесь только на цвет и на сенсорное событие — добавляйте текстовые метки.
- ARIA — только чтобы дополнить семантику, не заменить её; соблюдайте Accessible Name и Role Computation.
- Управление анимацией: поддержка prefers-reduced-motion и опции отключения анимаций.
- Доступные формы: связывайте \ с полем через for/id, показывайте ошибки и инструкции, используйте aria-invalid и aria-describedby.
- Лэндинги и клавиатурные обходы: «skip to content», корректные landmarks и заголовки.
Короткие примеры
1) Семантика и skip-link
```
Пропустить к содержанию......Заголовок страницы ...
```
CSS для skip-link:
```
.skip-link { position: absolute; left: -999px; top: auto; }
.skip-link:focus { left: 0; top: 0; }
```
2) Формы и подписи
```
EmailМы не передаём ваш email. ```
3) Видимый фокус (современно)
```
:focus { outline: 3px solid Highlight; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; } /* для мыши */
```
4) Модальное окно — управление фокусом и aria
```
ОткрытьДиалогЗакрыть ```
Простейший JS (фокус-перехват и возврат):
```
const open = document.getElementById('open');
const modal = document.getElementById('modal');
const close = document.getElementById('close');
let lastActive = null;
open.addEventListener('click', () => {
lastActive = document.activeElement;
modal.hidden = false;
modal.querySelector('button').focus();
});
close.addEventListener('click', () => {
modal.hidden = true;
lastActive?.focus();
});
/* Для продуктивного решения добавьте trap focus, обработку Esc и tabindex=-1 для фонового содержимого */
```
5) prefers-reduced-motion
```
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
```
6) aria-live для динамических уведомлений
```
/* при обновлениях: document.getElementById('announcer').textContent = 'Сохранено'; */
```
Автоматические проверки и инструменты (включить в CI)
- axe-core (интегрировать в unit и e2e: jest-axe, cypress-axe)
- Pa11y (сканирование страниц)
- Lighthouse accessibility audit
- WAVE (быстрая проверка)
- eslint-plugin-jsx-a11y (React) / html-validate
- color-contrast-checker (или встроенный в axe) — проверка соотношения контрастов $например4.5:1$ для обычного текста и $3:1$ для крупного
- Storybook + addon-a11y для компонентов
- Интеграция в CI: запуск axe/pa11y на релизных страницах
Ручные проверки (обязательно)
- Клавиатура: использовать только клавиатуру; проверить порядок Tab, Shift+Tab, Enter, Space, стрелки.
- Экранные читалки: NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android) — прогон сценариев: навигация по заголовкам, формам, модальным окнам, живым регионам.
- Масштабирование и зум: проверить при увеличении до $200\%$ и при изменении размера шрифта; элементы не должны ломаться.
- Цветовая слепота: эмуляция (Deuteranopia/Protanopia/Tritanopia) и проверка читабельности без цвета.
- Сенсорные устройства: только касания, переключатели доступности.
- Проверить фокус-видимость и порядок табуляции особенно после динамических изменений DOM.
- Проверка мультимедиа: субтитры, транскрипты, метаданные для аудио.
- Тесты с реальными пользователями с ОВЗ (по возможности).
Короткий чеклист (для pull request)
- Семантические теги и заголовки на месте.
- Все img имеют alt или role=presentation.
- Все интерактивные элементы доступны клавиатурой.
- Видимый фокус есть и стилизован.
- Формы: label, aria-describedby для ошибок, aria-invalid.
- Контраст текста >= $4.5:1$ (обычный), крупный текст >= $3:1$.
- Анимации подчиняются prefers-reduced-motion.
- Автотесты axe/Pa11y проходят.
Заключение (одно предложение): сочетайте семантику + управление фокусом + автоматические проверки (axe/Pa11y/Lighthouse) и обязательные ручные проверки с клавиатурой и экранными читалками — это даст практическую доступность интерфейса.