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

Кратко

Доступность (a11y) делает страницу удобной для людей с разными устройствами и возможностями: для тех, кто пользуется скринридером, не видит экран или работает только клавиатурой.

  • Сначала нативный HTML (button, a, input+label), потом ARIA.
  • alt описывает смысл картинки, а не имя файла.
  • Интерфейс проходится клавишей Tab в логичном порядке, фокус виден.
  • Контраст текста к фону должен быть достаточным (ориентир WCAG — 4.5:1 для обычного текста).

Главная идея

Доступность — это не «отдельная версия для инвалидов», а качество разметки, при котором страницей могут пользоваться все: человек со скринридером, тот, кто не видит цвета, кто работает без мыши, и обычный пользователь в солнечный день с тусклым экраном. Хорошая новость: 90% доступности даёт правильный выбор HTML-тегов, а не сложные технологии.

Доступность — это пандус рядом с лестницей. Лестница (мышь, зрение, цвет) работает для большинства, но не для всех. Пандус (alt, label, клавиатура, контраст) не мешает тем, кто идёт по ступенькам, зато пускает наверх и того, кто на коляске, с коляской или с тяжёлой сумкой. Ты не строишь второе здание — ты добавляешь въезд к тому же входу.

Нативный HTML важнее ARIA

Первое правило ARIA — «не используй ARIA, если есть нативный элемент». Кнопка должна быть <button>, ссылка — <a href>, поле — <input> с <label>. Браузер бесплатно даёт им фокус, нажатие с клавиатуры (Enter/Space) и правильное озвучивание. ARIA не чинит плохую разметку — она лишь добавляет имя или связь там, где готового элемента нет.

<button> роль + фокус + клавиатура «из коробки» <div role="button"> фокус и клавиши пишешь сам на JS
Нативный button уже доступен; div с ролью приходится «дотягивать» вручную.

Альтернативный текст (alt)

Атрибут alt — это текст, который скринридер прочитает вместо картинки, а браузер покажет, если изображение не загрузилось. Он должен передавать смысл в контексте, а не имя файла. Если картинка чисто декоративная, ставят пустой alt="" — тогда скринридер её пропустит и не будет читать «image image image».

Формы: label связан с полем

Связка <label for="id"> + <input id="id"> даёт три выгоды: скринридер озвучивает назначение поля, клик по подписи ставит курсор в поле, а кликабельная зона становится больше. Placeholder подписью не считается — он исчезает при вводе.

Контраст текста и фона

Бледный текст читается не всем. WCAG задаёт ориентир: контраст обычного текста к фону — не ниже 4.5:1. Сравни сам — оба образца ниже используют один и тот же фон:

Текст
Плохо: ~1.9:1
Текст
Хорошо: ~5.0:1

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

До любой ссылки, кнопки и поля пользователь должен добраться клавишей Tab в логичном порядке, а активный элемент — иметь видимую обводку (:focus-visible). Убирать обводку через outline: none без замены нельзя: человек перестаёт понимать, «где он сейчас».

Быстрая проверка: нажми Tab на любой странице и следи, виден ли прыгающий контур и идёт ли он сверху вниз слева направо. Если фокус «пропал» — доступность сломана.
⚠️ Проверить по документации: точные пороги контраста (4.5:1, 3:1 для крупного текста) и детали поведения ARIA-атрибутов сверяйте с MDN, WHATWG и WCAG.