Обновлено: .

HTML сообщает браузеру и вспомогательным технологиям, что находится на странице и как с этим взаимодействовать. Сначала выбирайте элемент с нужным поведением. Затем обеспечивайте понятные имена, видимый фокус и устойчивую вёрстку.

Кнопка и ссылка определяются действием

Ссылка с href ведёт к ресурсу или месту в документе. Кнопка выполняет действие: открывает диалог, переключает состояние, отправляет форму. Оформление не меняет назначения. Ссылка может выглядеть как большая кнопка, оставаясь ссылкой.

<!-- Переход к разделу этой статьи -->
<a href="#focus">Перейти к проверке фокуса</a>

<!-- Действие вне отправки формы -->
<button type="button">Открыть фильтры</button>

<!-- Отправка формы -->
<button type="submit">Отправить заявку</button>

У div с обработчиком click нет автоматически ни роли кнопки, ни попадания в последовательность Tab, ни ожидаемой активации клавишами. Добавить role="button" недостаточно: поведение придётся реализовать отдельно. Нативный button снимает значительную часть этой работы.

Семантика помогает ориентироваться

Используйте main для основного содержимого, nav для навигационного блока, заголовки — для структуры документа. Не превращайте каждую группу ссылок в самостоятельную навигационную область. Когда областей несколько, давайте им различимые имена: «Основная навигация», «Разделы статьи».

У nav есть неявная роль navigation. Поэтому запись <nav role="navigation"> обычно избыточна. Сходная роль у div не делает все HTML-элементы взаимозаменяемыми: нативная семантика проще для сопровождения и меньше зависит от ручных дополнений.

ARIA дополняет интерфейс, но не чинит его автоматически

Видимый текст кнопки обычно уже формирует её доступное имя. Для кнопки с одной иконкой имя нужно задать; для поля предпочтительнее связанный label. Не заменяйте понятную видимую подпись совершенно другим aria-label: человеку, использующему голосовое управление, будет трудно обратиться к элементу по надписи на экране.

aria-expanded сообщает состояние раскрытия; оно должно соответствовать фактическому состоянию. aria-hidden="true" исключает содержимое из дерева доступности, но не делает его автоматически невидимым и не удаляет из клавиатурного порядка. Не ставьте этот атрибут на фокусируемое управление или его предка.

Фокус должен быть виден и предсказуем

Убирать outline «потому что не вписывается в дизайн» — плохая отправная точка. Сначала спроектируйте хорошо различимый индикатор фокуса, затем проверьте его на всех фонах. Box-shadow не универсальная замена: в режиме принудительных цветов тень может исчезнуть. Сохраняйте работоспособный outline.

/* Пример для проверенной светлой поверхности */
.action:focus-visible {
  outline: 3px solid #1239a6;
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .action:focus-visible {
    outline-color: Highlight;
  }
}

:focus-visible не означает «только Tab». Браузер решает, нужен ли видимый фокус, по эвристикам; например, текстовое поле может сохранять его и после клика. Hover не заменяет фокус: эти состояния решают разные задачи.

Проверьте липкую шапку, cookie-баннер и всплывающие панели. WCAG 2.4.11 AA требует, чтобы авторское содержимое не скрывало сфокусированный компонент целиком. Более удобная проектная цель — видеть весь элемент и его индикатор.

Tab — только часть навигации

Пройдите основные сценарии клавиатурой: Tab и Shift+Tab перемещают фокус, Enter активирует ссылки и кнопки, Space — кнопки; внутри составных компонентов нужны соответствующие паттерну клавиши. Не заставляйте Tab посещать каждый пункт списка, если паттерн предполагает управление стрелками.

При этом скринридер не равен клавиатуре. Он может перемещаться по заголовкам, областям и обычному тексту, а на телефоне используются жесты. Проверка клавиатуры и проверка скринридером — разные части работы. Не делайте вывод о доступности для незрячего человека только потому, что удалось нажать Tab десять раз.

Увеличение: 150% недостаточно

Для 1.4.4 текст должен увеличиваться до 200% без потери содержимого и функциональности, с указанными в критерии исключениями. Отдельно 1.4.10 проверяет переразмещение при ширине, эквивалентной 320 CSS px для вертикально прокручиваемого контента. Типовой способ — масштаб 400% при исходной ширине области просмотра 1280 CSS px. Это две разные проверки.

Строки текста не должны требовать постоянного движения в двух направлениях. Для содержимого, которому необходима двумерная структура, например некоторых таблиц и карт, предусмотрены исключения. Это не оправдывает горизонтальный скролл всей страницы из-за слишком широкой кнопки.

Увеличьте также межстрочный интервал до 1,5 размера шрифта, интервал после абзаца до 2, межбуквенный до 0,12 и межсловный до 0,16. Проверяется отсутствие потери содержимого при таком пользовательском изменении, а не обязанность выставить эти значения всем по умолчанию.

Alt зависит от задачи изображения

Информативному изображению нужна передача смысла, декоративному — пустой alt="". Иконка внутри уже подписанной кнопки обычно не должна дублировать её имя. Для сложного графика короткого alt недостаточно: нужны объяснение вывода и доступные данные рядом.

Практический результат хорошей семантики — человек понимает, где находится, что может сделать и что изменится после действия. Это проверяется сценарием, а не подсчётом новых атрибутов.

Источники и статус стандартов проверены 5 ноября 2026 года.

Применить правила с ИИ-агентом

По результатам исследования мы создали открытые скиллы для Codex и Claude Code, которые помогают анализировать и улучшать сайты и приложения. Accessible UI направляет агента при проверке семантики, клавиатурного управления, фокуса, форм и контраста; Adaptive Interfaces помогает адаптировать интерфейс к размерам окна, масштабу текста, клавиатуре и складным устройствам. Агент изучает текущий проект, предлагает обоснованные улучшения и проверяет согласованные изменения. Скиллы не заменяют проверку с пользователями и вспомогательными технологиями.

Практические правила этой серии собраны в скилле Accessible UI на GitHub: семантика, клавиатура, фокус, формы, контраст и проверка результата. Инструкции написаны на английском. Порядок установки и примеры вызова приведены в начале серии.