Rola semantyki w nawigacji po stronie
Wiesz już więcej o afordancji, semantyce i o tym, jak technologie wspomagające korzystają z drzewa ułatwień dostępu do tworzenia alternatywnych treści dla użytkowników. Jak widzisz, pisanie wyrazistego, semantycznego kodu HTML zapewnia dużą dostępność bez większego wysiłku, ponieważ wiele standardowych elementów ma wbudowaną semantykę i odpowiednie zachowanie.
W tej lekcji omówimy mniej oczywiste semantyczne aspekty, które są bardzo ważne dla użytkowników czytników ekranu, zwłaszcza w zakresie nawigacji. Na prostej stronie z dużą liczbą elementów sterujących i małą ilością treści łatwo znaleźć to, czego potrzebujesz. Na stronie z dużą ilością treści, np. na stronie Wikipedii lub agregatorze wiadomości, nie jest jednak praktyczne czytanie wszystkiego od góry do dołu. Potrzebujesz sposobu na sprawne poruszanie się po treściach.
Programiści często mają błędne przekonanie, że czytniki ekranu są nudne i wolno działające lub że wszystko na ekranie musi być możliwe do zlokalizowania przez czytnik ekranu. Często tak nie jest.
Użytkownicy czytników ekranu często korzystają z listy nagłówków, aby znaleźć informacje. Większość czytników ekranu ma łatwe sposoby na izolowanie i skanowanie listy nagłówków stron. Jest to ważna funkcja zwana rotor. Zobaczmy, jak można skutecznie obsługiwać tę funkcję za pomocą nagłówków HTML.
Skuteczne wykorzystanie nagłówków
Najpierw przypomnijmy sobie wcześniejszą kwestię: kolejność elementów DOM ma znaczenie nie tylko w przypadku kolejności elementów w fokusie, ale też kolejności elementów do odczytu przez czytnik ekranu. Poeksperymentując z czytnikami ekranu takimi jak VoiceOver, NVDA, JAWS i ChromeVox, lista nagłówków będzie zgodna z kolejnością DOM, a nie wizualną.
Dotyczy to wszystkich czytników ekranu. Czytniki ekranu współpracują z drzewem ułatwień dostępu, a drzewo ułatwień dostępu jest oparte na drzewie DOM. Dlatego kolejność, w jakiej czytnik ekranu wyświetla informacje, jest bezpośrednio powiązana z kolejnością elementów w drzewie DOM. Oznacza to, że odpowiednia struktura nagłówków jest teraz ważniejsza niż kiedykolwiek.
Większość dobrze ustrukturyzowanych stron ma zagnieżdżone poziomy nagłówków, aby wskazywać relacje nadrzędny–podrzędny między blokami treści. Lista kontrolna WebAIM wielokrotnie odwołuje się do tej techniki.
- 1.3.1 wspomina o tym, że „tagi semantyczne służą do oznaczania nagłówków”
- 2.4.1 wskazuje strukturę nagłówków jako technikę pomijania bloków treści.
- 2.4.6 zawiera szczegółowe informacje o pisaniu przydatnych nagłówków.
- 2.4.10 określa, że „w stosownych przypadkach poszczególne sekcje treści są oznaczone nagłówkami”.
Nie wszystkie nagłówki muszą być widoczne na ekranie. Na przykład Wikipedia korzysta z techniki, która celowo umieszcza niektóre nagłówki poza ekranem, aby były dostępne tylko dla czytników ekranu i innych technologii wspomagających osoby z niepełnosprawnością.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
W złożonych zastosowaniach może to być dobry sposób na umieszczenie nagłówków, gdy ich wygląd nie wymaga wyświetlania nagłówka i nie ma na niego miejsca.
Inne opcje nawigacji
Chociaż strony z dobrymi nagłówkami ułatwiają poruszanie się po nich użytkownikom korzystającym z czytników ekranu, są też inne elementy, których mogą używać do poruszania się po stronie, np. linki, elementy sterujące formularzy i punkty orientacyjne.
Czytelnicy mogą użyć funkcji rotora czytnika ekranu (łatwy sposób na wyodrębnienie i przeskanowanie listy nagłówków strony), aby uzyskać dostęp do listy linków na stronie. Czasami, podobnie jak w Wikipedii, jest wiele linków, więc czytelnik może szukać terminu w linkach. Spowoduje to ograniczenie liczby trafień do linków, które faktycznie zawierają dany termin, a nie wszystkich jego wystąpień na stronie.
Ta funkcja jest przydatna tylko wtedy, gdy czytnik ekranu może znaleźć linki, a tekst linku jest znaczący. Oto kilka typowych wzorców, które sprawiają, że trudno jest znaleźć linki.
- Tagi kotwicy bez atrybutów
href. Te cele linków często używane w aplikacjach jednostronicowych powodują problemy z czytnikami ekranu. Więcej informacji znajdziesz w tym artykule o aplikacjach jednostronicowych. - przyciski zaimplementowane za pomocą linków; Czytniki ekranu interpretują je jako linki, przez co tracą one swoją funkcję. W takich przypadkach zastąp tag kotwicy prawdziwym przyciskiem i odpowiednio go sformatuj.
- obrazy używane jako zawartość linku. Czasami niezbędne obrazy połączone mogą być nieprzydatne dla czytników ekranu. Aby zapewnić prawidłowe wyświetlanie linku w ramach technologii wspomagających, upewnij się, że obraz ma tekst atrybutu
alt.
Innym problemem jest zły tekst linku. Tekst, który można kliknąć, np. „Dowiedz się więcej” lub „Kliknij tutaj”, nie informuje o tym, dokąd prowadzi link. Zamiast tego użyj tekstu opisowego, np. „Dowiedz się więcej o responsywnym projektowaniu” lub „zobacz samouczek dotyczący Canvas”, aby czytniki ekranu mogły przekazywać użytkownikom istotny kontekst dotyczący linków.
Rotor może też pobierać listę poleceń formularza. Za pomocą tej listy czytelnicy mogą wyszukać konkretne produkty i przejść bezpośrednio do nich.
Czytniki ekranu często popełniają błędy związane z wymową. Czytnik ekranu może na przykład wymówić „Udacity” jako „oo-dacity”, odczytać numer telefonu jako dużą liczbę całkowitą lub odczytać tekst pisany wielkimi literami tak, jakby był to akronim. Co ciekawe, użytkownicy czytników ekranu są przyzwyczajeni do tej osobliwości i biorą ją pod uwagę.
Niektórzy deweloperzy próbują zaradzić tej sytuacji, udostępniając tekst przeznaczony tylko dla czytników ekranu, który jest zapisany w sposób fonetyczny. Oto prosta reguła dotycząca pisowni fonetycznej: nie stosuj jej, bo tylko pogorszysz problem. Jeśli na przykład użytkownik korzysta z monitora brajla, słowo będzie źle zapisane, co spowoduje jeszcze większe zamieszanie. Czytniki ekranu umożliwiają odczytywanie słów na głos, więc pozostaw to użytkownikowi własnemu wybór i kontrolę nad działaniem funkcji oraz w razie potrzeby.
Czytelnicy mogą użyć rotora, aby zobaczyć listę punktów orientacyjnych. Ta lista ułatwia czytelnikom znalezienie głównej treści i zestawu punktów nawigacyjnych dostarczanych przez elementy graficzne HTML.
W HTML5 pojawiły się nowe elementy, które pomagają zdefiniować strukturę semantyczną strony, m.in. header, footer, nav, article, section, main i aside. Te elementy zapewniają wskazówki strukturalne na stronie, nie narzucając żadnych wbudowanych stylów (które i tak należy zastosować w kodzie CSS).
Semantyczne elementy strukturalne zastępują wiele powtarzających się bloków div i zapewniają jaśniejszą, bardziej opisową i intuicyjną strukturę strony zarówno dla autorów, jak i czytelników.