HTML · качество

Основы доступности HTML

Доступный интерфейс можно использовать с клавиатурой, программой чтения с экрана, увеличением и разными способами ввода. Большую часть основы даёт правильно написанный HTML.

Начни с семантики

Используй настоящие ссылки, кнопки, заголовки, списки и поля формы. Встроенные элементы уже умеют получать фокус и сообщают браузеру свою роль.

<button type="button">Открыть меню</button>
<a href="/css/">Перейти к CSS</a>

Подписи и альтернативный текст

Каждому полю нужна связанная подпись label. Содержательное изображение получает краткий alt, а декоративное — пустой alt="", чтобы его пропустило чтение с экрана.

<label for="email">Электронная почта</label>
<input id="email" name="email" type="email">

<img src="chart.png" alt="Рост посещаемости с января по март">

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

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

button:focus-visible {
  outline: 3px solid #ffbc42;
  outline-offset: 3px;
}

Частые ошибки

• Кликабельный div вместо button.
• Поле только с placeholder и без label.
• Удалённый outline без замены.
• Alt повторяет подпись рядом или начинается со слов «изображение».

Доступность начинается до особых атрибутов

Крупный текст, обычная кнопка, подпись у поля и заголовки по порядку уже закрывают большую часть проблем. Специальные атрибуты нужны, когда смысла элемента не хватает. Если кнопка — это настоящий button, ей не нужен role="button". Если картинка информативная, ей нужен alt, а не атрибут для чтения вслух поверх пустого текста.

Проверь страницу с клавиатуры: клавиша Tab переходит по ссылкам, полям и кнопкам, а Enter или пробел активируют то, что в фокусе. Всё, до чего нельзя дойти без мыши, для части людей недоступно.

Фокус, подпись и имя элемента

<button type="button" aria-pressed="false">
  Тёмная тема
</button>

<a href="/html/formy/">
  <img src="/images/form.png" alt="">
  Перейти к уроку про формы
</a>

У переключателя есть состояние. Если внешний вид меняется, состояние тоже должно быть в коде, иначе программа чтения не узнает, включена тема или нет. У ссылки с картинкой имя берётся из текста. Пустой alt здесь правильный: он не повторяет второй раз фразу «перейти к уроку».

Что не стоит чинить атрибутами

• Серый текст на сером фоне не лечится подписью. Нужен нормальный контраст.
• Кнопка размером с ноготь неудобна и с мышью, и с пальцем.
• tabindex="1" и выше ломает естественный порядок. Обычно достаточно 0 или вообще ничего.
• Автоматически воспроизводимый звук мешает чтению страницы вслух.

Связанные темы

Семантика · Формы · focus-visible