Справочник: Доступность: alt, label, aria и клавиатура

Кратко

Главные элементы и атрибуты этого урока собраны в одном месте.

Основные записи

  • alt — текстовая альтернатива изображения. Декоративным — alt="".
  • <label for="id"> + <input id="id"> — связь подписи и поля.
  • <button> — нативная кнопка (фокус и клавиши «из коробки»).
  • aria-label — доступное имя, когда видимого текста нет.
  • aria-describedby="id" — связь поля с пояснением (id абзаца-подсказки).
  • role — роль элемента, если нативного элемента недостаточно.
  • tabindex="0" — включить элемент в порядок Tab; tabindex="-1" — фокус только из кода. Положительные значения не используют.
  • :focus-visible (CSS) — стиль обводки при навигации с клавиатуры.

Ориентир по контрасту (WCAG)

  • Обычный текст — не ниже 4.5:1.
  • Крупный текст (≥ 24px или ≥ 18.66px жирный) — не ниже 3:1.
Проверить по документации: при спорных случаях используйте MDN и WHATWG как источник точных формулировок.