Роля Ориентир

`main`

Ориентирът за основното съдържание на страницата — основното съдържание, без повтарящи се заглавки, навигация и долни колонтитули. Елементът <main> носи тази роля автоматично. Точно един main на страница.

Кога се използва

Използвайте елемента <main>. Той е единственият най-важен ориентир на страницата — потребителите на екранни четци обикновено преминават към main на първо място, за да прескочат навигацията и заглавките.

role="main" върху <div> е подходящо само когато не можете да използвате <main> (предимно при ограничение на CMS). И двете форми трябва да спазват едно и също правило: точно един main на страница. Множество main елементи нарушават функционалността „прескочи към основното съдържание”, а много екранни четци показват само първия.

Ориентирът main трябва да съдържа всичко уникално за текущата страница и не трябва да включва заглавката на сайта, основната навигация или долния колонтитул. Поставете ги в <header>, <nav> и <footer> като съседни елементи, не вътре в <main>.

Кога да се добавя наименование

Единичен main не се нуждае от наименование — екранните четци го обявяват като „main”. Добавяйте aria-label само ако страницата има множество main елементи (което не трябва да се случва) или ако искате да разграничите областта с основното съдържание на SPA от предишна по някаква причина.

Връзката „Прескочи към основното съдържание” трябва да сочи към <main id="main"> (или към избрания от вас идентификатор) с <a href="#main"> в началото на страницата — това е техниката за заобикаляне на блоковете от WCAG 2.4.1.

Чести грешки

Два елемента <main> на една и съща страница. Най-честата причина: SPA вгражда новия <main> на изгледа, без да премахне предишния.
Страница без нито един <main>. Потребителите на екранни четци не могат да прескочат заглавката.
<main> поставен вътре в <header> или <footer>. Йерархията на ориентирите е погрешна.
Поставяне на сайтово-широка навигация вътре в <main>. Тя се повтаря на всички страници, затова принадлежи в <header>/<nav>, а не в уникалното съдържание на страницата.
Връзката „Прескочи към основното съдържание” сочи към идентификатор, който не съществува.

Пример

<body>
  <a href="#main" class="visually-hidden focus-visible">Skip to main content</a>
  <header>…</header>
  <main id="main">
    <h1>Why one main landmark per page</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>