Типичные ошибки: Доступность: alt, label, aria и клавиатура

Ошибка 1. div onclick вместо button

Как ломается: до «кнопки-div» нельзя дойти клавишей Tab и нажать Enter — она работает только мышью.

<!-- ломается -->
<div onclick="buy()">Купить</div>

Как правильно: нативная кнопка — фокус, роль и клавиши уже встроены.

<!-- правильно -->
<button type="button" onclick="buy()">Купить</button>

Ошибка 2. Картинка без alt, поле без label

Как ломается: скринридер не озвучит смысл, а при сбое загрузки на месте картинки будет пусто.

<!-- ломается -->
<img src="map.png">
<input type="text" placeholder="Город">

Как правильно: осмысленный alt и связанный label.

<!-- правильно -->
<img src="map.png" alt="Карта пунктов выдачи">
<label for="city">Город доставки</label>
<input id="city" type="text">

Ошибка 3. outline:none без замены

Как ломается: убрали обводку фокуса — пользователь с клавиатуры не видит, где он находится.

/* ломается */
:focus { outline: none; }

Как правильно: убрали стандартную — дали свою заметную обводку.

/* правильно */
:focus-visible {
  outline: 3px solid #0f6cbf;
  outline-offset: 3px;
}

Ещё частые промахи

• Добавлять role там, где достаточно нативного элемента.
• Писать alt="photo"/alt="img" вместо описания смысла.
• Опираться только на цвет («красным — ошибка») без текста или значка.
• Нарушать порядок Tab положительным tabindex (например tabindex="5").