Landmark — Słownik Disability World

Landmarki to regiony na poziomie strony, między którymi użytkownicy czytników ekranu mogą przeskakiwać bezpośrednio za pomocą dedykowanych skrótów klawiaturowych. Są one dla strony tym, czym rozdziały dla książki: użytkownik widzący odczytuje strukturę z układu wizualnego (nagłówek na górze, pasek boczny po prawej, stopka na dole); użytkownik czytnika ekranu odczytuje strukturę z landmarków.

Standardowe landmarki

Każdy z poniższych jest zarówno elementem HTML5, jak i rolą ARIA. Zaleca się używanie elementu HTML5 tam, gdzie to możliwe; rola ARIA istnieje na potrzeby przypadków, gdy nie można zastosować natywnego elementu.

Region	Element HTML5	Rola ARIA
Baner strony (logo, główna nawigacja)	`<header>` (na górze strony)	`role="banner"`
Główna nawigacja	`<nav>`	`role="navigation"`
Treść główna	`<main>`	`role="main"`
Treść uzupełniająca (pasek boczny)	`<aside>`	`role="complementary"`
Stopka strony (prawa autorskie, linki pomocnicze)	`<footer>` (na dole strony)	`role="contentinfo"`
Wyszukiwarka	`<search>` (HTML5) lub `<form role="search">`	`role="search"`
Region ogólny wymagający identyfikacji	—	`role="region"` (z etykietą)
Formularz (jeśli nie jest wyszukiwarką)	`<form>`	`role="form"`

Należy pamiętać, że <header> i <footer> odpowiadają rolom banner i contentinfo wyłącznie gdy są bezpośrednimi dziećmi elementu <body>. <header> wewnątrz <article> jest jedynie nagłówkiem artykułu — nie staje się landmarkiem banner.

Jak użytkownicy czytników ekranu korzystają z landmarków

Każdy główny czytnik ekranu ma tryb nawigacji wyłącznie po landmarkach:

JAWS: R przechodzi przez landmarki; Shift+R wstecz; Insert+F7 otwiera listę wszystkich landmarków.
NVDA: D przechodzi przez landmarki; Shift+D wstecz; Insert+F7 otwiera listę elementów.
VoiceOver (macOS): VO+U otwiera rotor; należy obrócić do „Landmarks” i przechodzić strzałkami.
VoiceOver (iOS): obrót dwoma palcami do „Landmarks” w rotorze; przesunięcie w górę/dół.
TalkBack (Android): przeciągnięcie w górę, potem w prawo, aby otworzyć menu sterowania odczytywaniem; wybranie trybu „Landmarks”; przesuwanie w prawo.

Strona z dobrymi landmarkami daje użytkownikowi czytnika ekranu spis treści dostępny jednym naciśnięciem klawisza.

Typowe błędy dotyczące landmarków

Brak <main>. Bez landmarku main użytkownicy czytników ekranu muszą przy każdym ładowaniu strony przechodzić klawiszem Tab przez cały nagłówek. Każda strona powinna mieć dokładnie jeden element <main>.
Wiele nieoznaczonych elementów <nav>. Strona z nawigacją górną i boczną, obie jako <nav>, sprawia, że użytkownik czytnika ekranu musi wybierać między dwoma identycznymi wpisami „navigation”. Należy każdy z nich oznaczyć etykietą aria-label: <nav aria-label="Główna">, <nav aria-label="Spis treści">.
role="banner" na elemencie wewnętrznym. <header> wewnątrz <main> lub <article> nie jest bannerem; jest nagłówkiem artykułu. Nie należy dodawać mu role="banner".
Zduplikowane landmarki. Dwa elementy <main> na jednej stronie łamią regułę „landmark-no-duplicate-main”. axe i Lighthouse oba to wykrywają.
Region bez etykiety. role="region" wymaga aria-label lub aria-labelledby. W przeciwnym razie czytniki ekranu go ignorują.

Jak przeprowadzić audyt landmarków

Należy otworzyć stronę w dowolnym współczesnym czytniku ekranu, nacisnąć skrót do listy landmarków i sprawdzić:

Czy jest dokładnie jeden banner, jeden main i jeden contentinfo.
Czy każdy element <nav> ma odrębną dostępną nazwę.
Czy struktura landmarków odpowiada wizualnej strukturze strony.

Lista landmarków, która wyświetla „banner, navigation, navigation, main, complementary, contentinfo” bez dalszych etykiet, oznacza, że użytkownik nie jest w stanie odróżnić dwóch nawigacji. Należy to naprawić.