Что такое семантическая вёрстка и как она помогает доступности?

Семантическая вёрстка — выбор элементов по смыслу содержимого, а не по внешнему виду.

Скринридеры и поисковые системы строят по разметке структуру страницы: ориентиры, заголовки, списки, кнопки. Нативные элементы дают клавиатурное поведение и роли бесплатно.

Базовый каркас

<header>…</header>
<nav aria-label="Основная">…</nav>
<main>
  <article>
    <h1>Заголовок</h1>
    <section><h2>Раздел</h2></section>
  </article>
  <aside>…</aside>
</main>
<footer>…</footer>

Правила

• Один <h1> и последовательные уровни заголовков без пропусков.
• <button>, <a>, <label>, <input> вместо <div> с обработчиками.
• Картинкам нужен alt; декоративным alt="".
• ARIA добавляют, когда нативного элемента нет. Первое правило ARIA: если можно использовать нативный элемент, используйте его.

Проверка: пройти страницу только с клавиатуры и включить скринридер хотя бы раз.

Коротко для собеседования

Семантическая вёрстка выбирает теги по смыслу: nav, main, button, заголовки по уровням. Скринридеры и поисковики читают структуру, а клавиатурное поведение нативных элементов даётся бесплатно.