Кратко и по сути — принципы, семантика, ARIA и практики для простого веб‑интерфейса (header/nav/main/list/form/modal/footer).
1) Базовые принципы
- Использовать семантическую HTML‑разметку прежде всего (не заменять на и т.п.). Это даёт нативную поддержку клавиатуры и читалок.
- Логичный порядок DOM = логичный порядок фокуса.
- Видимый индикатор фокуса (:focus или :focus-visible).
- Контраст текста и фона не ниже WCAG: $4.5:1$ для обычного текста и $3:1$ для крупного.
- Не полагаться только на цвет; дублировать информацию текстом/иконками с подписью/ARIA.
2) Семантические элементы (что использовать)
- header, nav, main, aside, footer — для ландмарков. Помогают навигации экранных чтецов.
- h‑заголовки для структуры документа (последовательная иерархия).
- button для кликабельных действий; a с href для переходов; form, label, input, textarea, select для форм.
- ul/ol + li для списков, table/thead/tbody/th для табличных данных.
- dialog (или role="dialog") для модальных окон; role="alert" для критических сообщений.
3) ARIA — когда и какие использовать (кратко)
- aria-label / aria-labelledby — доступное имя элемента (используйте aria-labelledby, если есть видимый текст).
- aria-describedby — для дополнительного описания (подсказки, ошибки).
- role — только если семантика отсутствует (например, role="dialog", role="menu").
- aria-expanded + aria-controls — для раскрывающихся панелей/аккордеонов.
- aria-hidden="true" — скрывать от читалок декоративные элементы.
- aria-live="polite"/"assertive" — динамические обновления (статусы, ошибки).
- aria-checked / aria-pressed / aria-selected — для кастомных переключателей и вкладок.
- aria-modal="true" — для модальных диалогов в сочетании с ролью dialog.
- aria-current — для указания текущей навигационной позиции.
4) Формы и ошибки
- Связывайте label и input через for/id или оборачивая input в label.
- Помещайте подсказку/ошибку и ссылка на неё через aria-describedby. Пример: .
- При ошибке ставьте aria-invalid="true" и фокусируйте первую ошибку.
5) Навигация с клавиатуры
- Предпочитайте нативные элементы: они поддерживают Enter/Space и фокус автоматически.
- Для кастомных элементов: делайте их фокусируемыми tabindex="$0$" и обрабатывайте клавиши Enter/Space. Для программного фокуса используйте tabindex="$-1$".
- Skip link: первая фокусируемая ссылка "Skip to content" для пропуска навигации.
- Видимые индикаторы фокуса и логический порядок DOM.
- Модальные окна: при открытии — переводите фокус в диалог, ловите Tab и реализуйте ловушку фокуса (focus trap); при закрытии — возвращайте фокус элементу, который открыл диалог. Esc — закрытие.
- Меню/радио/тулбары: использовать схемы клавиш (стрелки для перемещения, Enter/Space для активации) и/или roving tabindex (один tabindex="$0$" в группе, остальные tabindex="$-1$").
6) Поддержка экранных чтецов
- Ландмарки (role или семантические теги) и последовательные заголовки помогают ориентироваться.
- Обеспечьте доступные имена для всех интерактивных элементов (текст кнопки, aria-label или aria-labelledby).
- Для динамики — aria-live регионы для оповещений (успех/ошибка/статус). Используйте polite для неважных уведомлений и assertive для критичных.
- Скрывайте декоративные элементы aria-hidden="true". Не прятать важную информацию через CSS display:none/visibility:hidden — это корректно скрывает и от зрения, и от читалок; если нужно визуально скрыть, но оставить для читалок — используйте техники "visually-hidden".
- Для таблиц: используйте th и scope, добавляйте summary или caption при необходимости.
7) Короткие примеры (суть)
- Skip link:
Skip to content - Навигация:
Home... - Кнопка (семантика вместо div):
+ - Кастомная фокусируемая роль:
0 \,0\,0" aria-pressed="false">Toggle - Модал:
... - Живой регион:

8) Тестирование
- Проверяйте клавиатурой (Tab, Shift+Tab, Enter, Space, Esc, стрелки).
- Используйте экранные читалки (VoiceOver, NVDA), инструменты проверки контраста и валидаторы ARIA.
- Проверяйте порядок таба, видимость фокуса и объявляемые имена.
Сводка: сначала семантика HTML, затем ARIA для заполнения пробелов; обеспечить логичный DOM, видимый фокус, корректные имена и live‑оповещения; реализовать предсказуемую клавиатурную навигацию и правильное управление фокусом в диалогах/динамике.