Семантический HTML и доступность

Представь две страницы, которые выглядят совершенно одинаково. Одна собрана только из элементов <div>, другая — из <header>, <nav>, <main> и <footer>. На глаз разницы нет. Но незрячий пользователь со скринридером, поисковая система и даже ты сам, открыв код через пару месяцев, заметите огромную разницу. Это и есть семантический HTML.

Что такое семантический HTML?

<div> (блочный) и <span> (строчный) — нейтральные контейнеры: они ничего не сообщают о содержимом. Они полезны для оформления с помощью CSS, но если есть подходящий по смыслу элемент, выбирай его.

Основные области страницы

<style>
  body { font-family: system-ui, sans-serif; margin: 0; color: #1e293b; }
  header, nav, main, footer { padding: 8px 12px; }
  header { background: #fde68a; font-size: 20px; }
  nav { background: #bfdbfe; }
  main { background: #f1f5f9; }
  article { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 12px; }
  aside { background: #ddd6fe; margin-top: 8px; padding: 6px 12px; border-radius: 8px; }
  footer { background: #e2e8f0; font-size: 14px; }
</style>

<header><strong>City Library</strong></header>
<nav><a href="books.html">Books</a> · <a href="events.html">Events</a></nav>
<main>
  <article>
    <h2>New books this week</h2>
    <p>Ten new novels are waiting for you.</p>
  </article>
  <aside>Tip: you can renew your books online.</aside>
</main>
<footer>© City Library</footer>

Скринридеры показывают список этих областей, и пользователь может сразу перейти к <main> или <nav> — это похоже на оглавление структуры страницы. Поисковые системы тоже лучше понимают, где находится основное содержимое.

Доступность: веб для всех

Доступность (accessibility, сокращённо a11y) означает, что страницей могут пользоваться люди с разными возможностями: незрячие и слабовидящие (скринридер, увеличение), глухие (субтитры), те, кто не может пользоваться мышью (только клавиатура), и те, кому трудно различать цвета. Большая часть этого достаётся бесплатно вместе с правильным HTML.

• Давай каждому значимому изображению текст alt, а декоративным — alt="".
• Используй заголовки по порядку — пользователи скринридеров часто переходят от заголовка к заголовку.
• Для действий используй <button>, для переходов — <a>. До кликабельного <div> нельзя добраться с клавиатуры (Tab) и нажать его клавишей Enter.
• У каждого поля формы должен быть <label>.
• Указывай язык страницы: <html lang="ru"> — чтобы скринридер правильно произносил слова.
• Не передавай информацию только цветом: «красные поля обязательны» не сработает для того, кто не различает цвета, — добавь текст или звёздочку (*). И следи, чтобы контраст текста и фона был достаточным.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .fake, button { display: inline-block; margin: 6px 0; padding: 8px 16px; font: inherit;
    color: white; background: #4f46e5; border: 0; border-radius: 6px; cursor: pointer; }
  button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
</style>

<p>Click here, then press <kbd>Tab</kbd> a few times.</p>
<div class="fake" onclick="this.textContent = 'Clicked!'">I am a div</div>
<br>
<button onclick="this.textContent = 'Clicked!'">I am a button</button>

ARIA: когда HTML не хватает

Атрибуты ARIA (aria-label, aria-hidden, role) передают дополнительную информацию вспомогательным технологиям. Например, кнопка из одной иконки: <button aria-label="Close">✕</button>. Без aria-label скринридер прочитает только символ, и пользователь не поймёт, что делает кнопка. А aria-hidden="true" скрывает декоративные иконки от скринридеров.