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

Кратко

Выполните задания по порядку и проверьте результат в браузере и DevTools (вкладка Accessibility).

  1. Tab-обход. Откройте страницу урока 08 и пройдите её клавишей Tab.
    Ожидаемый результат: фокус виден на каждом интерактивном элементе и идёт сверху вниз слева направо.
  2. alt. Добавьте осмысленный alt ко всем значимым изображениям, декоративным поставьте alt="".
    Ожидаемый результат: при отключённых картинках страница остаётся понятной.
  3. label. Свяжите каждое поле формы с <label for>.
    Ожидаемый результат: клик по подписи ставит курсор в поле.
  4. Подсказка. Добавьте aria-describedby для поля с пояснением.
    Ожидаемый результат: в DevTools → Accessibility у поля видно «Description».
  5. Контраст. Найдите самый бледный текст и проверьте его контраст в DevTools.
    Ожидаемый результат: контраст обычного текста ≥ 4.5:1.
Подсказка: панель Accessibility в DevTools (F12) показывает доступное имя, роль и описание выбранного элемента, а пипетка цвета — коэффициент контраста.