Czytniki ekranu mają polecenia pozwalające szybko przechodzić między nagłówkami lub konkretnymi regionami. Z ankiety przeprowadzonej wśród użytkowników czytników ekranu wynika, że najczęściej poruszają się po nieznanej stronie, analizując nagłówki.
Stosując odpowiednie nagłówki i punkty orientacyjne, możesz znacznie poprawić komfort korzystania z nawigacji użytkownikom korzystającym z technologii wspomagających osoby z niepełnosprawnością.
Kontur strony za pomocą nagłówków
Użyj elementów h1–h6, aby utworzyć strukturę strony. Celem jest stworzenie szkieletu, czyli szkieletu strony, tak aby każda osoba poruszająca się po nagłówkach mogła wyobrazić sobie swój myślenie.
Powszechną praktyką jest używanie jednego elementu h1 jako głównego nagłówka lub logo na stronie, elementów h2 do oznaczenia 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
Programiści często pomijają poziomy nagłówków, aby używać domyślnych stylów przeglądarki, które ściśle pasują do ich projektu. Jest to uważane za brak wzorca, ponieważ narusza on model konspektu.
Zamiast polegać na domyślnym rozmiarze czcionki w nagłówkach przeglądarki, użyj własnego arkusza CSS i nie pomijaj poziomów.
Na przykład ta witryna ma sekcję o nazwie „W WIADOMOŚCIACH” z 2 nagłówkami:
Nagłówkiem sekcji „W WIADOMOŚCIACH” może być h2, a nagłówkami pomocniczymi mogą być elementy h3.
Ponieważ atrybut font-size „W WIADOMOŚCIACH” jest mniejszy niż nagłówek, może być kuszące, aby nagłówek pierwszego artykułu miał wartość h2, a „W WIADOMOŚCIACH” – h3. Choć może to być zgodne z domyślnym stylem przeglądarki,
zakłóciłoby to zarys przekazywany użytkownikowi czytnika ekranu.
Za pomocą narzędzia Lighthouse możesz sprawdzić, czy strona pomija jakieś poziomy nagłówków. Uruchom audyt 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 ułatwia nawigację
Elementy HTML5, takie jak main, nav i aside, stanowią punkty orientacyjne, czyli specjalne obszary na stronie, do których czytnik ekranu może przejść.
Do definiowania większych sekcji strony używaj tagów punktów orientacyjnych zamiast znaczników div. Uważaj, aby nie przesadzić, bo zbyt wiele punktów orientacyjnych może przytłaczać. Na przykład używaj tylko 1 elementu main zamiast 3 lub 4.
Lighthouse zaleca ręczne sprawdzenie witryny, by sprawdzić, czy „elementy punktów orientacyjnych HTML5 są używane do usprawnienia nawigacji”. Aby sprawdzić swoją stronę, skorzystaj z tej listy elementów punktów orientacyjnych.
Pomiń powtarzające się treści dzięki linkom pomijania
Wiele witryn zawiera w nagłówkach powtarzające się elementy nawigacyjne, co może być uciążliwe w nawigacji przy użyciu technologii wspomagającej osoby z niepełnosprawnością. Aby umożliwić użytkownikom pominięcie tej treści, użyj linku pomijania.
Link pominięcia to kotwica poza ekranem, która zawsze jest pierwszym elementem w DOM, który można zaznaczyć. Zwykle zawiera ona link do głównej treści strony. Jest to pierwszy element DOM, więc wystarczy wykonać jedno działanie technologii wspomagającej, aby ją skoncentrować i pominąć 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 umożliwiające pomijanie. Otwórz je i naciśnij kilka razy klawisz TAB na klawiaturze.
Narzędzie Lighthouse może Ci pomóc sprawdzić, czy na Twojej stronie znajduje się link pomijania. Ponownie uruchom kontrolę ułatwień dostępu i poszukaj wyników kontroli Strona zawiera nagłówek, link pominięcia lub region punktu orientacyjnego.