Elementy HTML5, takie jak main, nav i aside, działają jak punkty orientacyjne, czyli specjalne obszary na stronie, do których mogą przechodzić czytniki ekranu i inne technologie wspomagające osoby z niepełnosprawnością.
Korzystając z elementów orientacyjnych, możesz znacznie poprawić komfort korzystania z witryny przez osoby korzystające z technologii wspomagających osoby z niepełnosprawnością.
Więcej informacji znajdziesz w artykule o punktach orientacyjnych HTML 5 i ARIA na stronie Deque University.
Ręczne sprawdzanie punktów orientacyjnych
Skorzystaj z listy elementów punktów orientacyjnych opracowanych przez organizację W3C, aby sprawdzić, czy każda główna sekcja strony jest zawarta w danym punkcie orientacyjnym. 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 Accessibility Insights firmy Microsoft, aby zwizualizować strukturę strony i wyróżnić sekcje, które nie znajdują się w punktach orientacyjnych:
Jak skutecznie korzystać z punktów orientacyjnych
- Do definiowania głównych sekcji strony używaj elementów orientacyjnych zamiast elementów ogólnych, takich jak
<div>czy<span>. - Wskaż strukturę strony za pomocą punktów orientacyjnych.
Na przykład element
<main>powinien zawierać wszystkie treści bezpośrednio związane z główną ideą strony, więc na każdej stronie powinna występować tylko jedna treść. Zapoznaj się z podsumowaniem elementów podziału treści w MDN, aby dowiedzieć się, jak używać poszczególnych punktów orientacyjnych. - Ostrożnie korzystaj z punktów orientacyjnych. Zbyt duża liczba punktów orientacyjnych może utrudniać nawigację użytkownikom technologii wspomagających, ponieważ uniemożliwia im to łatwe przeskoczenie do wybranego fragmentu treści.
Więcej informacji znajdziesz w poście Nagłówki i punkty orientacyjne.