Урок 09. Доступность: alt, label, aria и клавиатура
Кратко: суть урока
Доступность делает страницу удобной для людей с разными устройствами и возможностями. База: осмысленный alt, связанные label, понятная клавиатурная навигация и осторожное использование ARIA только там, где нативного HTML недостаточно.
- Сначала используем нативные HTML-элементы, потом ARIA.
- alt описывает смысл изображения, а не файл.
- Интерфейс должен проходиться клавишей Tab в логичном порядке.
О чём этот урок
Доступность делает страницу удобной для людей с разными устройствами и возможностями. База: осмысленный alt, связанные label, понятная клавиатурная навигация, достаточный контраст и осторожное использование ARIA только там, где нативного HTML недостаточно.
Доступность — это пандус рядом с лестницей: он не мешает тем, кто идёт по ступенькам, но пускает наверх и того, кто на коляске или с тяжёлой сумкой. Ты не строишь второе здание — добавляешь въезд к тому же входу.
Нативный HTML важнее ARIA
Кнопка должна быть button, ссылка — a href, поле — input с label. ARIA не исправляет плохую разметку, если можно выбрать правильный элемент.
Альтернативный текст
alt нужен для значимых изображений. Он должен передавать назначение изображения в контексте страницы.
Формы
Связка label for и input id помогает скринридерам озвучивать назначение поля и увеличивает кликабельную область.
Клавиатура
Пользователь должен добраться до ссылок, кнопок и полей через Tab. Нельзя убирать фокус без понятной замены.
Практика
- Проверьте страницу урока 08 клавишей Tab.
- Добавьте alt ко всем значимым изображениям.
- Свяжите каждое поле формы с label.
- Добавьте aria-describedby для поля с подсказкой.
Домашнее задание
Мини-проект 1: соберите семантическое резюме без CSS. Используйте текст, ссылки, медиа, таблицу навыков, форму контакта и базовые правила доступности.