Czytniki ekranu mają polecenia pozwalające szybko przechodzić między nagłówkami lub najbardziej znanych regionach. ankietę wśród użytkowników czytników ekranu okazało się, że najczęściej przechodzą na nieznaną stronę, sprawdzając nagłówki.
Użycie prawidłowych elementów nagłówka i punktów orientacyjnych pozwala poprawić nawigację w witrynie dla użytkowników technologii wspomagających osoby z niepełnosprawnością.
Konturowanie strony za pomocą nagłówków
Użyj elementów h1–h6, by utworzyć kontur struktury strony. Celem jest
aby utworzyć szkielet lub rusztowanie strony, tak aby każdy, kto się nawigował,
nagłówki mogą kształtować obraz
Zazwyczaj używany jest pojedynczy nagłówek h1 jako główny nagłówek lub logo na stronie
strona, elementy h2 wskazujące główne sekcje i elementy 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żyć domyślnych stylów przeglądarki, ściśle pasują do ich wzornictwa. Uznaje się to za antywzorcowy, ponieważ przerywa się model konspektu.
Zamiast korzystać z domyślnego rozmiaru czcionki w nagłówkach przeglądarki, użyj mają własny CSS i nie pomijaj poziomów.
Na przykład w tej witrynie znajdują się sekcja o nazwie „W WIADOMOŚCIACH”, a po niej dwie nagłówki:
Nagłówek sekcji „W WIADOMOŚCIACH” może mieć postać h2 oraz nagłówek pomocniczy
oba nagłówki mogą składać się z h3 elementów.
Ponieważ font-size w kategorii „W WIADOMOŚCIACH” jest mniejszy od nagłówka, może
staraj się, aby nagłówek pierwszej historii miał postać h2, a następnie
„W WIADOMOŚCIACH” h3. Może to być takie samo jak domyślny styl przeglądarki,
spowodowałoby to złamanie konspektu przekazywanego użytkownikowi czytnika ekranu.
Za pomocą narzędzia Lighthouse możesz sprawdzić, czy strona pomija jakiekolwiek poziomy nagłówka. Użycie Audyt ułatwień dostępu (Lighthouse > Opcje > Ułatwienia dostępu) i wygląd dla wyników kontroli Nagłówki nie pomijaj poziomów.
Używaj punktów orientacyjnych, aby usprawnić nawigację
Elementy HTML5, np. main, nav i aside, działają jako punkty orientacyjne.
specjalne obszary na stronie, do których może przejść czytnik ekranu.
Tagi punktów orientacyjnych pozwalają definiować główne sekcje strony, zamiast polegać
div Pamiętaj, by nie przesadzić, bo zbyt wiele punktów orientacyjnych może
przytłaczająca. Na przykład ogranicz się do jednego elementu main zamiast 3 lub
4.
Lighthouse zaleca ręczne sprawdzenie witryny w celu sprawdzenia, czy „Punkt orientacyjny HTML5” aby usprawnić nawigację”. Możesz użyć tej listy punktów orientacyjnych elementy aby sprawdzić stronę.
Omijaj powtarzające się treści za pomocą linków pomijania
Wiele witryn zawiera w nagłówkach powtarzalną nawigację, co może być irytujące. do poruszania się z technologią wspomagającą osoby z niepełnosprawnością. Aby umożliwić użytkownikom pomijanie tych treści, użyj linku do pomijania.
Link pomijania to reklama zakotwiczona poza ekranem, która jest zawsze pierwszym elementem, który można zaznaczyć czyli DOM. Zwykle zawiera on link do głównej treści strony. Ponieważ tylko na pierwszym elemencie DOM, wystarczy jedno działanie z technologii wspomagającej osoby z niepełnosprawnością, i pomijać 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 – wszystkie
zawierają linki pomijania. Spróbuj je otworzyć i naciśnij klawisz TAB na
klawiaturę kilka razy.
Lighthouse może pomóc Ci sprawdzić, czy strona zawiera link pomijania. Użycie Ponownie przeprowadź kontrolę ułatwień dostępu i sprawdź, czy Strona zawiera nagłówka, linku pomijanego lub regionu punktu orientacyjnego.