Загрузка...

Доступность HTML

Ранее datalist подключал подсказки к одному полю. Доступность шире: вся страница удобна с клавиатуры, скринридеров и масштаба. Хороший HTML — ориентиры, label, alt, заголовки, настоящие кнопки — основа.

Почему доступность важна

Кто-то ходит без мыши, увеличивает текст или слушает страницу. График без alt нем; поиск без label безымянен; кликабельный div может не получить фокус. Инклюзивная разметка помогает всем. Чаще привычки при написании HTML.

Прямой ответ

1) Семантические области и нативные элементы. 2) Label у каждого поля с for/id. 3) Осмысленный alt для информативных картинок; пустой alt только для декора. 4) Ясный h1 и логичная вложенность без прыжков. 5) Tab до ссылок и кнопок. 6) ARIA когда нативного HTML мало — сначала структура.

📊 Accessibility habits beginners use

Habit Why it helps Beginner tip
Semantic landmarks Tools jump to regions Prefer main/nav over anonymous divs
Labels on controls Names fields clearly for= must match the control id
Alt on images Describes non-text content Say what the image communicates
Logical headings Outlines the page Do not jump h1 → h4 for style
Keyboard-operable controls Not everyone uses a pointer Prefer button/a over clickable divs
Native before ARIA Roles come built-in Repair HTML; do not wallpaper broken markup

Подписанный поиск с ориентиром

Маленькая полоса поиска: nav с доступным именем, подписанное поле и настоящая кнопка. Скринридер объявляет область и имя; Tab доходит до input и кнопки.

Labeled search in a nav

html 
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

Читаем демо поиска

  • nav — навигационный ориентир; aria-label различает несколько nav
  • label for + input id дают доступное имя
  • name для отправки — отдельно от доступного имени
  • type=search нативный
  • настоящая button с Enter/Space
  • Прошлый урок: подсказки; здесь именование и достижимость

Заголовки, alt и настоящая кнопка

Второй фрагмент: h1, вложенный h2, информативное изображение с описательным alt и действие как button. Против «нажмите сюда» и немых графиков.

Headings alt and button

html 
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

Читаем демо структуры

  • Один h1 задаёт тему; h2 ниже без прыжка к h4
  • Alt графика говорит вывод, не просто «image»
  • Декор: пустой alt; этот график информативен
  • Действие — button, не div
  • main отмечает основной контент
  • Следующий урок JavaScript — сохраните эти HTML-привычки

Что чинить сначала

  • Безымянные поля: label раньше fancy placeholder
  • Немые информативные картинки: напишите alt
  • Фейковые контролы: замените кликабельный div на button/a
  • Каша заголовков: верните логичный конспект
  • Только-ARIA заплатки: берите нативный элемент если есть
  • Клавиатурные тупики: всё кликабельное должно достигаться Tab

Практика — привычки на всю страницу

  1. Демо поиска; уберите label, затем верните for/id
  2. Второй nav с отдельным aria-label
  3. Опустошите alt графика; верните осмысленный alt
  4. Намеренно прыгните h1→h4; исправьте на h1→h2
  5. Замените кнопку на div; верните button и Tab
  6. Фраза: доступность начинается со структуры HTML, не с обоев ARIA
  7. Следующий урок добавит script — сохраните label и кнопки

Лёгкие ошибки

  • Ссылки «нажмите сюда» без контекста
  • Информативные картинки без alt или с пустым alt
  • Кликабельные div без клавиатуры
  • Уровни заголовков только ради визуального размера
  • Placeholder вместо label
  • Роли ARIA на сломанной разметке
  • Забыть, что datalist тоже нуждался в label

Итог

  • Доступность = удобная структура для большего числа людей и инструментов
  • Ориентиры, label, alt, заголовки и нативные кнопки важны
  • Доступ с клавиатуры — часть работы
  • Прочный HTML до тяжёлого ARIA
  • Datalist был одним контролом; этот урок смотрит на страницу
  • Далее: добавление JavaScript на HTML-страницы

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 57 из 68
Html Урок