Rola semantyki w nawigacji po stronach
Poznaliśmy już pojęcia możliwości i semantyki oraz sposób, w jaki technologie wspomagające korzystają z drzewa ułatwień dostępu, aby zapewnić użytkownikom alternatywne wrażenia. 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 powolne w użyciu 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żemy skutecznie używać nagłówków HTML do obsługi tej funkcji.
Skuteczne wykorzystanie nagłówków
Najpierw przypomnijmy sobie wcześniejszą kwestię: kolejność elementów w DOM ma znaczenie, nie tylko w przypadku kolejności elementów w obszarze nawigacji, ale też w przypadku kolejności elementów w czytniku ekranu. Podczas eksperymentowania z czytnikami ekranu takimi jak VoiceOver, NVDA, JAWS i ChromeVox zauważysz, że lista nagłówków jest uporządkowana według kolejności w DOM, a nie według kolejności wizualnej.
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 wspomina o strukturze nagłówków jako o metodzie omijania 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. Wikipedia stosuje na przykład technikę, która polega na celowym umieszczaniu niektórych nagłówków poza ekranem, aby były one dostępne tylko dla czytników ekranu i innych technologii wspomagających.
<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 przypadku złożonych aplikacji może to być dobry sposób na umieszczenie nagłówków, gdy projekt wizualny nie wymaga ich lub nie ma miejsca na widoczny nagłówek.
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, 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 przykłady typowych błędów, które utrudniają znalezienie linków.
- Tagi kotwicy bez atrybutów
href. Takie cele linków są często używane w aplikacjach na jednej stronie i spowodują problemy dla czytników ekranu. Więcej informacji znajdziesz w tym artykule na temat aplikacji 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. Klikalny tekst, np. „Dowiedz się więcej” lub „Kliknij tutaj”, nie zawiera informacji semantycznych 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ż pobrać listę poleceń formularza. Dzięki tej liście czytelnicy mogą wyszukiwać konkretne elementy i przechodzić bezpośrednio do nich.
Czytniki ekranu często popełniają błędy związane z wymową. Na przykład czytnik może wymawiać „Udacity” jako „oo-dacity”, czytać numer telefonu jako dużą liczbę całkowitą lub czytać tekst pisany wielkimi literami tak, jakby był akronimem. 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ą wymawianie słów na głos, więc pozwól czytnikowi kontrolować sposób wyświetlania treści i decydowac, kiedy jest to konieczne.
Czytelnicy mogą użyć rotora, aby zobaczyć listę punktów orientacyjnych. Ta lista pomaga czytelnikom znaleźć główną treść oraz zestaw punktów orientacyjnych nawigacyjnych udostępnianych przez elementy orientacyjne HTML.
W HTML5 wprowadzono kilka nowych elementów, 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śniejszy, bardziej opisowy sposób intuicyjnego wyrażania struktury strony zarówno dla autorów, jak i czytelników.