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.
Stosując prawidłowe elementy nagłówka i punktów orientacyjnych, możesz znacznie poprawić wygodę nawigacji w witrynie dla użytkowników technologii wspomagających osoby z niepełnosprawnością.
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 atrybutu h1 jako głównego nagłówka lub logo na stronie, elementów h2 do wskazania głównych sekcji i elementów h3 w podsekcjach pomocniczych:
<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. Uznaje się to za antywzór, bo narusza model obrysu.
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 ma sekcję „W WIADOMOŚCIACH” z 2 nagłówkami:
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ć nagłówek pierwszego artykułu jako h2, 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.
Korzystaj z punktów orientacyjnych, aby ułatwić nawigację
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
Nagłówki wielu witryn zawierają powtarzalną nawigację, co może być irytujące przy korzystaniu z technologii wspomagającej osoby z niepełnosprawnością. Aby umożliwić użytkownikom pomijanie tych treści, użyj linku do pomijania.
Link do pominięcia to kotwica poza ekranem, która jest zawsze pierwszym elementem możliwym do zaznaczenia w modelu DOM. Zwykle zawiera on link do głównej treś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 kontrolę ułatwień dostępu i znajdź wyniki kontroli Strona zawiera nagłówek, link pomijania lub region punktu orientacyjnego.