Элементы ориентиров HTML5 используются для улучшения навигации.

Элементы HTML5, такие как main , nav aside , выступают в качестве ориентиров или специальных областей на странице, к которым могут перейти программы чтения с экрана и другие вспомогательные технологии. Используя элементы ориентиров, вы можете значительно улучшить навигацию на своем сайте для пользователей вспомогательных технологий. Узнайте больше в HTML 5 и ARIA Landmarks Университета Деке.

Как вручную проверить ориентиры

Используйте список элементов ориентиров W3C, чтобы убедиться, что каждый основной раздел вашей страницы содержит элемент ориентира. Например:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Вы также можете использовать такие инструменты, как расширение Microsoft Accessibility Insights, чтобы визуализировать структуру вашей страницы и выделить разделы, которые не содержатся в ориентирах:

Снимок экрана web.dev с достопримечательностями, выделенными расширением Accessibility Insights.

Как эффективно использовать достопримечательности

  • Используйте элементы-ориентиры для определения основных разделов вашей страницы, а не полагайтесь на общие элементы, такие как <div> или <span> .
  • Используйте ориентиры, чтобы передать структуру вашей страницы. Например, элемент <main> должен включать в себя весь контент, непосредственно связанный с основной идеей страницы, поэтому на каждой странице должен быть только один элемент. См. сводку элементов секционирования контента на MDN, чтобы узнать, как использовать каждый ориентир.
  • Используйте ориентиры разумно. Наличие слишком большого количества ориентиров может фактически затруднить навигацию для пользователей ассистивных технологий, поскольку это не позволяет им легко перейти к нужному фрагменту контента.

Дополнительную информацию см. в публикации «Заголовки и ориентиры» .

Ресурсы