EMZETT.
Войти

Emzett Wiki

Доступные сайты: ARIA, фокус и управление с клавиатуры

Properties1
tagsfrontend, barrierefreiheit

время чтения ~2 мин.

Доступные сайты: ARIA, фокус и управление с клавиатуры

Коротко: Доступными страницами можно полностью управлять с клавиатуры и через программу чтения с экрана; главное правило — сначала использовать правильные элементы HTML и добавлять ARIA только там, где HTML недостаточно.

Подробнее: Люди пользуются сайтами с помощью программ чтения с экрана, только с клавиатуры, голосового управления или в увеличенном виде. Доступность помогает и всем остальным: на ярком солнце, со сломанной рукой или в шуме.

Подробности

Сначала семантический HTML

  • <button> для действий, <a href> для навигации, а не <div onclick>.
  • Заголовки <h1>–<h6> в логическом порядке; области через <nav>, <main>, <header>, <footer>.
  • Формы с <label for>; изображения со значимым alt (декоративные: alt="").
  • Таблицы с <th> и scope.

Настоящий <button> даёт обработку клавиатуры, фокус и роль бесплатно.

Клавиатура и фокус

  • Всё, чем можно управлять, должно быть доступно через Tab, Enter/пробел и клавиши со стрелками.
  • Видимое кольцо фокуса (:focus-visible); никогда не задавайте просто outline: none.
  • Порядок следует исходному коду; используйте tabindex="0" умеренно, избегайте положительных значений.
  • Диалоги: переместите фокус внутрь, удерживайте внутри, закрывайте по Esc, затем верните на вызвавший элемент.
  • Ссылка-пропуск («К содержимому») в самом верху.

Правильное использование ARIA

ARIA (Accessible Rich Internet Applications) добавляет роли и состояния: aria-label, aria-expanded, aria-live (сообщения о состоянии), role="dialog". Правила: отсутствие ARIA лучше плохого ARIA. ARIA меняет только то, что объявляют вспомогательные технологии, но не поведение; обработку клавиатуры нужно создавать самим. Новое содержимое (сообщения об ошибках, всплывающие уведомления) объявляйте в живой области.

Тестирование

  • Пройдитесь только с клавиатуры.
  • Попробуйте программу чтения с экрана (NVDA, VoiceOver, TalkBack).
  • Проверьте контраст (WCAG: 4,5:1 для текста).
  • Инструменты: Lighthouse, axe; они находят примерно 30–40 % проблем, остальное требует людей.
  • Юридически важно: немецкий Barrierefreiheitsstärkungsgesetz (BFSG) для многих цифровых предложений с 28 июня 2025 года.

См. также: WCAG и цветовой контраст, Программы чтения с экрана и вспомогательные технологии, Lighthouse и Core Web Vitals