Семантический HTML как основа
Используйте встроенные элементы HTML, такие как button, nav и heading, чтобы бесплатно получить базовую доступность, прежде чем обращаться к ARIA.
«Семантический HTML как основа» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Семантический HTML — доступность без дополнительных усилий
Использование правильного элемента HTML бесплатно даёт поддержку клавиатуры, объявления для программ чтения с экрана и корректные роли ARIA. Большинство проблем с доступностью возникает из-за использования div и JavaScript вместо встроенного элемента.
Кнопка и блок с onClick
<button> получает фокус, объявляется программами чтения с экрана как «кнопка», реагирует на Enter и пробел и работает с отправкой формы. У <div onClick> нет ни одной из этих возможностей.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>Используйте кнопки для действий, ссылки — для переходов
Если действие ведёт к адресу, используйте <a href>. Если действие выполняется на странице, используйте <button>. Не используйте якоря как кнопки (без адреса, только обработчик нажатия) — это запутывает пользователей вспомогательных технологий.
Заголовки формируют структуру документа
Используйте h1–h6 по порядку, чтобы создать логичную структуру. Пользователи программ чтения с экрана перемещаются по заголовкам — пропуск уровней (h1 -> h3) создаёт непонятные пробелы.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>Элементы-ориентиры
Элементы-ориентиры HTML5 (header, nav, main, aside, footer) позволяют пользователям программ чтения с экрана переходить между основными областями. На странице должен быть один <main>.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>Элементы списков
Используйте <ul> для неупорядоченных списков, <ol> — для упорядоченных, а <dl> — для списков определений. Программы чтения с экрана объявляют «список из N элементов» — это полезная подсказка для навигации.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->Формы: подписывайте каждое поле ввода
Для каждого поля ввода нужна связанная с ним <label>. Связь между меткой и полем позволяет при нажатии на метку перевести фокус на поле, а программа чтения с экрана объявляет метку при переходе фокуса.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>Группы с помощью элементов fieldset и legend
Объединяйте связанные поля ввода (например, переключатели) с помощью <fieldset> и <legend>. Программы чтения с экрана объявляют легенду каждый раз, когда фокус переходит на элемент группы.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Элементы table для табличных данных
Используйте <table> с <thead>, <tbody> и <th scope="col"> — никогда не используйте таблицы для разметки. Программы чтения с экрана перемещаются по ячейкам в двух измерениях и объявляют заголовки.
Статья, раздел и иллюстрация
<article>: самостоятельное содержимое (запись в блоге, комментарий). <section>: тематическая группа с заголовком. <figure> и <figcaption>: медиаматериал с подписью.
ARIA — только при необходимости
Первое правило ARIA: не используйте ARIA. Встроенный HTML всегда лучше. Обращайтесь к ARIA только тогда, когда для вашего настраиваемого компонента не подходит ни один семантический элемент (раскрывающийся список, вкладки, дерево).
Быстрая проверка
Почему предпочтительнее использовать <button onclick="...">, а не <div onclick="...">?
Повторение: семантический HTML
Используйте подходящий элемент: кнопку для действий, ссылку для навигации, h1–h6 по порядку для структуры, элементы-ориентиры (header, nav, main, footer), ul/ol для списков, label для каждого поля ввода, fieldset/legend для групп переключателей, table для таблиц данных. Встроенный HTML бесплатно обеспечивает доступность. ARIA — крайняя мера.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Семантический HTML как основа» бесплатный?
Да — полный текст урока «Семантический HTML как основа» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Семантический HTML как основа»?
Используйте встроенные элементы HTML, такие как button, nav и heading, чтобы бесплатно получить базовую доступность, прежде чем обращаться к ARIA. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Семантический HTML как основа»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Уровни WCAG: A, AA и AAA
- Семантический HTML как основа
- Роли и атрибуты ARIA
- Навигация с клавиатуры и управление фокусом