Доступність сайтів: чому важливо мати головний орієнтир у документі

Сьогодні все більше людей із порушеннями зору користуються інтернетом за допомогою спеціальних програм — скрінрідерів, які «читають» текст вебсторінок уголос. Щоб ці користувачі могли безперешкодно отримувати інформацію, сайти повинні бути семантично структурованими — тобто містити елементи, які допомагають програмам зрозуміти, де знаходиться головний зміст сторінки.

Однією з найпоширеніших помилок, яку виявляє сервіс PageSpeed Insights є: «Документ не містить основного орієнтира» (англ. Document should have one main landmark):

Помилка вказує на те, що на сторінці бракує основного орієнтира — елемента, який визначає, де саме розташований головний контент (стаття, опис товару, публікація тощо).

У HTML5 для цього використовується тег:

<main>
   ...основний контент сторінки...
</main>

або його ARIA-аналог:

<div role="main">
   ...основний контент сторінки...
</div>

Якщо такого тега немає, або він повторюється кілька разів, PageSpeed (і система axe-core) виводить цю помилку.

Як виправити помилку

Щоб сторінка відповідала стандартам доступності, її структура має бути приблизно такою:

<header role="banner">
   <!-- шапка сайту -->
</header>

<nav role="navigation">
   <!-- головне меню -->
</nav>

<main role="main">
   <!-- основний контент сторінки -->
</main>

<footer role="contentinfo">
   <!-- підвал сайту -->
</footer>

Якщо сторінка містить кілька iframe, кожен із них має містити або один, або жоден орієнтир main.

Увесь контент має бути всередині семантичних тегів (<header>, <nav>, <main>, <footer>) або елементів із відповідними ролями.

Навіщо це потрібно

🧭 Для користувачів скрінрідерів:

Вони можуть швидко перейти до основного вмісту, не прослуховуючи кожен пункт меню чи рекламний банер.

🌍 Для доступності (Accessibility):

Такі сторінки стають зрозумілими людям із вадами зору чи моторики.

🔍 Для SEO:

Пошукові системи краще розуміють структуру сторінки, що позитивно впливає на індексацію.

Чи обов’язкові орієнтири?

Теги <header>, <nav>, <main> і <footer> не є обов’язковими з точки зору роботи сайту, але їх наявність дуже рекомендується. Вони допомагають браузерам, пошуковим системам і програмам для людей з порушеннями зору розуміти структуру сторінки. Особливо важливо, щоб на сторінці був хоча б один тег <main> — саме він позначає основний зміст і усуває помилку «Документ не містить основного орієнтира».

Що потрібно зробити

Додати тег <main> або role="main" довкола головної частини сайту. Використати правильну структуру з header, nav, main, footer.

Результат

Після внесення цих змін:

🔹 PageSpeed / axe-core більше не показуватимуть помилку про відсутність головного орієнтира.

🔹 Сайт стане доступнішим для людей із порушеннями зору.

🔹 Семантика HTML5 буде чіткою та зрозумілою як для людей, так і для пошукових систем.