Почему семантический HTML — основа доступности

Семантичний HTML — це використання HTML-елементів відповідно до їхнього призначення: <button> для кнопок, <nav> для навігації, <article> для самостійних публікацій. На відміну від суто презентаційних елементів (як-от <div> і <span>), семантичні елементи несуть змістове навантаження, зрозуміле не лише людям, а й браузерам, пошуковим роботам та асистивним технологіям. Зв'язок із доступністю тут прямий: коли розмітка передає структуру і призначення контенту, скрінрідери можуть правильно оголосити цей контент, а користувачі клавіатури — ефективно ним керувати. Це фундамент, на якому будується будь-яка доступна веб-сторінка.

Div soup vs семантичний HTML

«Div soup» — це жаргонний термін для сторінок, де весь контент загорнутий у безліч вкладених <div>, без жодної структурної розмітки. Такий підхід може виглядати ідентично для зрячого користувача, але для скрінрідера це суцільний потік тексту без орієнтирів.

❌ Неправильно — «div soup»

<div class="header">
  <div class="logo">InclusiveWeb</div>
  <div class="nav">
    <div class="nav-item">Продукт</div>
    <div class="nav-item">Ціни</div>
  </div>
</div>
<div class="main">
  <div class="hero">
    <div class="title">Зробіть сайт доступним</div>
    <div class="btn" onclick="signup()">Почати</div>
  </div>
  <div class="content">
    <div class="post">
      <div class="post-title">ARIA помилки</div>
      <div class="post-text">Стаття...</div>
    </div>
  </div>
</div>
<div class="footer">© 2025 InclusiveWeb</div>

✅ Правильно — семантичні landmarks

<header>
  <a href="/" aria-label="InclusiveWeb — головна">
    <img src="/logo.svg" alt="InclusiveWeb" />
  </a>
  <nav aria-label="Головна навігація">
    <ul>
      <li><a href="/product">Продукт</a></li>
      <li><a href="/pricing">Ціни</a></li>
    </ul>
  </nav>
</header>
<main>
  <section aria-labelledby="hero-heading">
    <h1 id="hero-heading">Зробіть сайт доступним</h1>
    <button type="button" onclick="signup()">Почати</button>
  </section>
  <section aria-labelledby="posts-heading">
    <h2 id="posts-heading">Останні статті</h2>
    <article>
      <h3>ARIA помилки</h3>
      <p>Стаття...</p>
    </article>
  </section>
</main>
<footer>
  <p>© 2025 InclusiveWeb</p>
</footer>

Коли скрінрідер потрапляє на семантичну сторінку, користувач може одразу перейти до <main>, перелистати заголовки або перейти по landmark-регіонах. У «div soup» нічого цього немає.

Semantic HTML та Accessibility Tree

Браузер будує дві паралельні структури з HTML-коду: DOM-дерево (Document Object Model) для рендерингу та дерево доступності (Accessibility Tree) для асистивних технологій. Дерево доступності — це спрощена версія DOM, де кожен вузол описується чотирма властивостями: роль (що це за елемент), ім'я (як він називається), стан (наприклад, checked, expanded) та значення.

Семантичні елементи автоматично отримують правильні ролі в дереві доступності: <button> отримує роль button, <nav> — роль navigation, <input type="checkbox"> — роль checkbox з відповідним станом checked. Натомість <div> потрапляє в дерево доступності без ролі — просто як безіменний блок, якщо не додати ARIA вручну.

Ключові семантичні елементи

Нижче — огляд найважливіших семантичних елементів HTML, їхніх ARIA-ролей у дереві доступності та рекомендацій щодо використання.

Ієрархія заголовків

Заголовки <h1>–<h6> — це не просто великий або жирний текст. Вони створюють ієрархічну структуру документа — як зміст книги. Для користувачів скрінрідерів заголовки є основним засобом навігації: більшість з них переміщуються сторінкою, натискаючи клавішу H (наступний заголовок) або 1–6 (заголовок певного рівня).

Правило просте: ніколи не пропускайте рівні заголовків. Після <h1> може йти лише <h2>, після <h2> — <h3> або наступний <h2>. Вибір розміру шрифта — завдання CSS, а не рівня заголовка.

❌ Неправильно

<h1>InclusiveWeb</h1>
<!-- Пропущено h2 — стрибок на h4! -->
<h4>Наші послуги</h4>
<!-- h3 використовується для стилізації, не структури -->
<h3>Детальніше</h3>
<!-- Кілька h1 на сторінці -->
<h1>Контакти</h1>

✅ Правильно

<h1>InclusiveWeb — доступність для всіх</h1>
  <h2>Наші послуги</h2>
    <h3>Аудит доступності</h3>
    <h3>Автоматичне тестування</h3>
  <h2>Чому це важливо</h2>
    <h3>Юридичні вимоги</h3>
    <h3>Бізнес-переваги</h3>
  <h2>Контакти</h2>

Landmark Navigation

Landmarks (орієнтири) — це ключові регіони сторінки, між якими користувачі скрінрідерів можуть переміщуватись напряму. В NVDA і JAWS це клавіша D, у VoiceOver — W. Це схоже на «швидкі посилання» для навігації сторінкою без необхідності прослуховувати весь вміст зверху донизу.

Основні landmark-елементи:

• <header> — шапка сайту, оголошується як «banner»
• <nav> — навігаційний регіон, оголошується як «navigation»; якщо на сторінці кілька <nav> — кожен має унікальний aria-label
• <main> — основний контент сторінки, оголошується як «main»; має бути лише один
• <aside> — допоміжний контент, оголошується як «complementary»
• <footer> — підвал сторінки, оголошується як «contentinfo»

<body>
  <header>                         <!-- landmark: banner -->
    <nav aria-label="Головна">     <!-- landmark: navigation -->
      <ul>...</ul>
    </nav>
  </header>

  <main>                           <!-- landmark: main -->
    <nav aria-label="Хлібні крихти">  <!-- landmark: navigation -->
      <ol>...</ol>
    </nav>

    <article>
      <h1>Назва статті</h1>
      <aside aria-label="Авторська нотатка"> <!-- landmark: complementary -->
        <p>Примітка автора...</p>
      </aside>
    </article>
  </main>

  <aside aria-label="Схожі статті"> <!-- landmark: complementary -->
    <h2>Читайте також</h2>
  </aside>

  <footer>                         <!-- landmark: contentinfo -->
    <p>© 2025 InclusiveWeb</p>
  </footer>
</body>

<button> vs <div onClick>

Це одна з найчастіших помилок у сучасних JavaScript-застосунках: використання <div> або <span> з обробником onClick замість нативного <button>. Подивімось на детальну різницю:

Semantic forms: label, fieldset, legend

Форми є одним із найскладніших для доступності компонентів. Три семантичні елементи вирішують більшість проблем:

<label> — мітка для поля вводу

Кожне поле форми повинно мати <label>. Це забезпечує три переваги: скрінрідер оголошує мітку при фокусі, область кліку збільшується (клік на текст мітки фокусує поле), а тип поля зрозумілий без візуального контексту.

<fieldset> і <legend> — групування полів

Для групп пов'язаних полів (радіо-кнопки, чекбокси) використовуйте <fieldset> з <legend>. Скрінрідер оголошує текст legend перед кожним полем групи, надаючи контекст.

<form>
  <!-- Явна мітка через for/id -->
  <div>
    <label for="full-name">Повне ім'я</label>
    <input type="text" id="full-name" name="name"
           autocomplete="name" required />
  </div>

  <!-- Прихована мітка (видима лише для скрінрідерів) -->
  <div>
    <label for="search" class="sr-only">Пошук</label>
    <input type="search" id="search" placeholder="Пошук..." />
  </div>

  <!-- Групування радіо-кнопок -->
  <fieldset>
    <legend>Оберіть план підписки</legend>
    <label>
      <input type="radio" name="plan" value="free" /> Безкоштовний
    </label>
    <label>
      <input type="radio" name="plan" value="pro" /> Професійний
    </label>
    <label>
      <input type="radio" name="plan" value="enterprise" /> Enterprise
    </label>
  </fieldset>

  <!-- Поле з підказкою через aria-describedby -->
  <div>
    <label for="password">Пароль</label>
    <input type="password" id="password"
           aria-describedby="password-hint" required />
    <p id="password-hint" class="hint">
      Мінімум 8 символів, одна велика літера та цифра
    </p>
  </div>

  <button type="submit">Зареєструватись</button>
</form>