Загрузка...
Доступность HTML
Доступность — больше людей могут пользоваться страницей: клавиатура, screen reader, масштаб. Основа — хороший HTML.
Прямой ответ
Семантика, labels, осмысленный alt, логичные заголовки, клавиатура.
📊 Привычки доступности
| Habit | Why it helps |
|---|---|
| Semantic landmarks | Tools can jump to regions |
| Labels on controls | Names fields clearly |
| Alt on images | Describes non-text content |
| Logical headings | Outlines the page |
| Keyboard operable controls | Not everyone uses a pointer |
Accessible snippets
html
HTML Code
<nav aria-label="Main">
<a href="index.html">Home</a>
</nav>
<label for="q">Search</label>
<input id="q" name="q" type="search">
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<button type="submit">Search</button>Попробуйте
- проверить labels/alt
- один h1
- Tab
- исправить
Типичные ошибки
- «click here»
- без alt
- div без клавиатуры
- ARIA вместо HTML
Кратко
- семантика+labels+alt
- клавиатура
- HTML до ARIA
- для всех
🧠 Проверьте Свои Знания
Готов к Началу
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
5
Вопросы
70%
Для Прохождения
∞
Время
∞
Попытки
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху