Elementy orientacyjne HTML5 są używane do ulepszania nawigacji

Elementy HTML5, takie jak main, navaside, działają jak punkty orientacyjne lub specjalne obszary na stronie, do których mogą przeskoczyć czytniki ekranu i inne technologie wspomagające. Dzięki elementom typu punkt orientacyjny możesz znacznie ulepszyć nawigację w witrynie dla użytkowników technologii wspomagających. Więcej informacji znajdziesz w artykule HTML 5 i punkty orientacyjne ARIA na stronie Deque University.

Jak ręcznie sprawdzić punkty orientacyjne

Użyj listy elementów typu landmark według W3C, aby sprawdzić, czy każda główna sekcja strony jest zawarta w elemencie typu landmark. Na przykład:

<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>

Możesz też użyć narzędzi takich jak rozszerzenie Microsoftu Accessibility Insights, aby zwizualizować strukturę strony i wyodrębnić sekcje, które nie są zawarte w punktach orientacyjnych:

Zrzut ekranu strony web.dev z elementami wyróżnionymi przez rozszerzenie Accessibility Insights

Jak skutecznie korzystać z miejsc orientacyjnych

  • Zamiast używać ogólnych elementów, takich jak <div> lub <span>, definiuj główne sekcje strony za pomocą elementów typu landmark.
  • Używaj punktów orientacyjnych, aby przekazać strukturę strony. Na przykład element <main> powinien zawierać wszystkie treści bezpośrednio związane z głównym tematem strony, więc na każdej stronie powinien znajdować się tylko jeden taki element. Aby dowiedzieć się, jak używać poszczególnych punktów orientacyjnych, zapoznaj się z podsumowaniem elementów podziału treści na sekcje na stronie MND.
  • Używaj punktów orientacyjnych z pomysłem. Zbyt duża liczba punktów orientacyjnych może utrudniać nawigację użytkownikom korzystającym z technologii wspomagających, ponieważ uniemożliwia im łatwe przejście do wybranych treści.

Więcej informacji znajdziesz w artykule Nagłówki i punkty orientacyjne.

Zasoby