Nagłówki i punkty orientacyjne

Rob Dodson

Czytniki ekranu mają polecenia, które umożliwiają szybkie przechodzenie między nagłówkami lub do określonych obszarów. Ankieta przeprowadzona wśród użytkowników czytników ekranu wykazała, że najczęściej poruszają się po nieznanej stronie, korzystając z nagłówków.

Używając odpowiednich nagłówków i elementów orientacyjnych, możesz znacznie ulepszyć nawigację w swojej witrynie dla użytkowników technologii wspomagających.

Używaj nagłówków, aby określić strukturę strony

Użyj elementów h1–h6, aby utworzyć strukturę strony. Celem jest stworzenie szkieletu strony, tak aby każdy, kto nawigeruje za pomocą nagłówków, mógł sobie wyobrazić jej strukturę.

Typową praktyką jest używanie jednego elementu h1 do głównego nagłówka lub logo na stronie, elementów h2 do oznaczania głównych sekcji oraz elementów h3 w podrzędnych podrozdziałach:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

Nie pomijaj poziomów nagłówków.

Deweloperzy często pomijają poziomy nagłówków, aby używać domyślnych stylów przeglądarki, które dokładnie pasują do ich projektu. Jest to uznawane za nieprawidłowy wzór, ponieważ narusza model zarysu.

Zamiast polegać na domyślnym rozmiarze czcionki w przeglądarce, użyj własnego kodu CSS i nie pomijaj poziomów.

Na przykład ta witryna zawiera sekcję „W TEMACIE” z 2 nagłówkami:

Witryna z wiadomościami z nagłówkiem, obrazem głównym i podrozdziałami

Nagłówek sekcji „W ŚWIECIE” może być elementem h2, a wspierające go nagłówki mogą być elementami h3.

Ponieważ font-size w sekcji „IN THE NEWS” jest mniejsze niż nagłówek, możesz chcieć ustawić h2 jako nagłówek pierwszego artykułu, a sekcję „IN THE NEWS” jako h3. Może to pasować do domyślnego stylu przeglądarki, ale spowoduje zerwanie konturów wyświetlanych użytkownikowi czytnika ekranu.

Za pomocą Lighthouse możesz sprawdzić, czy Twoja strona pomija jakiekolwiek poziomy nagłówków. Przeprowadź kontrolę ułatwień dostępu (Lighthouse > Opcje > Ułatwienia dostępu) i sprawdź wyniki kontroli Nagłówki nie pomijają poziomów.

Korzystanie z punktów orientacyjnych do nawigacji

Elementy HTML5, takie jak main, nav i aside, działają jako punkty orientacyjne lub specjalne obszary na stronie, do których czytnik ekranu może przejść.

Zamiast polegać na tagach div, do określania głównych sekcji strony używaj tagów landmark. Uważaj, aby nie przesadzić, ponieważ zbyt wiele punktów orientacyjnych może przytłoczyć. Na przykład zamiast 3 lub 4 elementów main użyj tylko jednego.

Lighthouse zaleca ręczne sprawdzenie witryny pod kątem korzystania z elementów HTML5, które ułatwiają nawigację. Aby sprawdzić swoją stronę, możesz skorzystać z tej listy elementów typu landmark.

Omijanie powtarzających się treści za pomocą linków do pomijania

Wiele witryn zawiera w nagłówkach powtarzające się elementy nawigacji, które mogą być uciążliwe podczas korzystania z technologii wspomagających. Użyj linku pomijania, aby umożliwić użytkownikom pominięcie tych treści.

Link do pominięcia to kotwica poza ekranem, która jest zawsze pierwszym elementem możliwym do zaznaczenia w modelu DOM. Zazwyczaj zawiera link na stronie do głównej zawartości strony. Jest to pierwszy element w modelu DOM, więc wystarczy jedno działanie technologii wspomagającej, aby go ustawić w centrum uwagi i ominąć powtarzalną nawigację.

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Wiele popularnych witryn, takich jak GitHub, The NY Times i Wikipedia, zawiera linki do pomijania. Otwórz je i kilka razy naciśnij klawisz TAB.

Lighthouse może pomóc Ci sprawdzić, czy Twoja strona zawiera link do pominięcia. Ponownie uruchom audyt ułatwień dostępu i sprawdź wyniki audytu Strona zawiera nagłówek, link pomijający lub region orientacyjny.