Домашнее задание: Доступность: alt, label, aria и клавиатура

Кратко

Мини-проект 1: соберите семантическое резюме без CSS. Используйте текст, ссылки, медиа, таблицу навыков, форму контакта и базовые правила доступности.

Формулировка

Мини-проект 1: соберите семантическое резюме без CSS. Используйте текст, ссылки, медиа, таблицу навыков, форму контакта и базовые правила доступности.

Задание повышенной сложности

Проверьте проект только клавиатурой и запишите 3 найденные проблемы доступности, затем исправьте их. Используйте клавиши:

  • Tab — следующий интерактивный элемент.
  • Shift + Tab — предыдущий.
  • Enter — активировать ссылку/кнопку.
  • Space — нажать кнопку, отметить чекбокс.
Если на каком-то шаге вы «потеряли» фокус (не видно, где он) или не смогли активировать элемент — это и есть найденная проблема доступности.

Пошаговое решение

  1. Создайте отдельную папку урока и файл index.html.
  2. Соберите HTML-структуру по теме урока.
  3. Проверьте документ в браузере и DevTools.
  4. Исправьте найденные ошибки смысла, доступности и навигации.

Мини-проверка

Страница должна быть понятна без CSS, все ссылки и поля должны иметь ясное назначение.