Rola semantyki w nawigacji na stronie
Wiesz już, jakie są możliwości i semantykę oraz jak technologie wspomagające osoby z niepełnosprawnością wykorzystują drzewo ułatwień dostępu, aby zapewnić użytkownikom alternatywne wrażenia. Wyraźne, semantyczne pisanie kodu HTML nie wymaga wiele wysiłku. Wiele elementów standardowych ma wbudowane semantykę i funkcję pomocniczą.
Podczas tej lekcji omówimy niektóre mniej oczywiste semantyki, które są bardzo ważne dla użytkowników czytników ekranu, a zwłaszcza w zakresie nawigacji. Prosta strona z dużą liczbą elementów sterujących, ale niewielką ilością treści, umożliwia łatwe przeskanowanie jej, aby znaleźć to, czego potrzebujesz. Jednak na stronie z dużą ilością treści, takiej jak wpis w Wikipedii lub agregator wiadomości, nie można czytać wszystkiego od góry do dołu. Potrzebny jest sposób na sprawne poruszanie się po treści.
Deweloperzy często myli się z błędem, że czytniki ekranu są uciążliwe i powolne w obsłudze lub że wszystko na ekranie musi być widoczne, aby czytnik ekranu mógł je znaleźć. Często jest inaczej.
Użytkownicy czytników ekranu często szukają informacji za pomocą listy nagłówków. Większość czytników ekranu ma łatwy sposób na izolowanie i skanowanie listy nagłówków stron, czyli ważnej funkcji nazywanej rotorem. Zobaczmy, jak skutecznie zastosować nagłówki HTML do obsługi tej funkcji.
Efektywne posługiwanie się nagłówkami
Najpierw przypomnijmy o tym, że zamówienia DOM mają znaczenie – nie tylko w przypadku kolejności fokusu, ale także kolejności czytników ekranu. Gdy eksperymentujesz z czytnikami ekranu takimi jak VoiceOver, NVDA, JAWS i ChromeVox, zobaczysz, że nagłówki na liście mają kolejność DOM, a nie układ wizualny.
Dotyczy to ogólnie czytników ekranu. Ponieważ czytniki ekranu wchodzą w interakcje z drzewem ułatwień dostępu, a drzewo ułatwień dostępu jest oparte na drzewie DOM, kolejność odbierana przez czytnik ekranu zależy więc bezpośrednio od kolejności DOM. Oznacza to, że odpowiednia struktura nagłówków jest ważniejsza niż kiedykolwiek wcześniej.
Na stronach o najbardziej uporządkowanych stronach poziomy nagłówków są zagnieżdżane w celu wskazania relacji nadrzędnych i podrzędnych między blokami treści. Lista kontrolna WebAIM wielokrotnie odwołuje się do tej metody.
- 1.3.1 Wzmianki „Znaczniki semantyczne służą do oznaczania nagłówków”
- 2.4.1 wskazuje strukturę nagłówków jako technikę omijania bloków treści
- 2.4.6 zawiera szczegółowe informacje na temat tworzenia przydatnych nagłówków.
- 2.4.10 stwierdza: „poszczególne sekcje treści są oznaczone za pomocą nagłówków”
Nie wszystkie nagłówki muszą być widoczne na ekranie. Na przykład w Wikipedii zastosowano technikę polegającą na celowym umieszczaniu niektórych nagłówków 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 przypadku złożonych zastosowań może to być dobry sposób na umieszczenie nagłówków, gdy projekt wizualny nie wymaga lub nie zapewnia miejsca na widoczny nagłówek.
Inne opcje nawigacji
Strony z prawidłowymi nagłówkami ułatwiają użytkownikom poruszanie się po stronie, ale to m.in. linki, elementy sterujące formularza i punkty orientacyjne, za pomocą których można poruszać się po stronie.
Czytelnicy mogą korzystać z pokrętła czytnika ekranu (którego pozwala łatwo wyodrębniać i skanować listę nagłówków stron), aby uzyskać dostęp do listy linków na stronie. Czasami na stronach wiki znajduje się wiele linków, więc czytelnik może w nich szukać jakiegoś hasła. Ogranicza to działania do linków, które rzeczywiście zawierają dany termin, a nie do wszystkich jego wystąpień na stronie.
Ta funkcja jest przydatna tylko wtedy, gdy czytnik ekranu może odnaleźć linki, a ich tekst ma znaczenie. Oto przykłady wzorców, które sprawiają, że linki są trudne do znalezienia.
- Tagi kotwicy bez atrybutów
href. Często używane w aplikacjach jednostronicowych cele linków powodują problemy z czytnikami ekranu. Więcej informacji znajdziesz w tym artykule o aplikacjach jednostronicowych. - Przyciski zaimplementowane z linkami. Spowodowało to, że czytnik ekranu zinterpretuje treść jako link, co spowoduje utratę funkcji przycisku. W takich przypadkach zastąp tag kotwicy prawdziwym przyciskiem i nadaj mu odpowiedni styl.
- Obrazy używane jako treść linku. Czasami niezbędne obrazy z linkami
mogą być niedostępne dla czytników ekranu. Aby mieć pewność, że link będzie prawidłowo widoczny dla technologii wspomagającej osoby z niepełnosprawnością, dodaj do obrazu tekst atrybutu
alt.
Słaby tekst linku to kolejny problem. Klikalny tekst, np. „Dowiedz się więcej” czy „Kliknij tutaj”, nie dostarcza semantycznych informacji o tym, gdzie prowadzi link. Zamiast tego używaj opisowego tekstu, np. „Dowiedz się więcej o elastycznym projektowaniu stron” lub „zobacz ten samouczek na płótnie”, aby czytniki ekranu mogły przekazywać wartościowy kontekst linków.
Wirnik może też pobierać listę elementów sterujących formularza. Korzystając z niej, czytelnicy mogą wyszukiwać konkretne elementy i przechodzić bezpośrednio do nich.
Częstym błędem popełnianym przez czytniki ekranu jest wymowa. Na przykład czytnik ekranu może wypowiedzieć „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 tego zjawiska i biorą to pod uwagę.
Niektórzy deweloperzy próbują rozwiązać ten problem, dodając fonetyczny tekst przeznaczony tylko dla czytnika ekranu. Oto prosta zasada pisowni fonetycznej: nie rób tego, bo tylko pogłębia to problem. Jeśli na przykład użytkownik korzysta z monitora brajlowskiego, słowo będzie napisane nieprawidłowo, co zwiększy dezorientację. Czytniki ekranu umożliwiają pisanie słów na głos, więc zostaw to czytelnikowi, aby mógł kontrolować sposób korzystania z aplikacji i decydować, czy to konieczne.
Czytelnicy mogą użyć pokrętła, aby wyświetlić listę punktów orientacyjnych. Ta lista ułatwia czytelnikom znalezienie głównej treści i zestawu punktów orientacyjnych nawigacyjnych dostarczanych przez elementy znaczników HTML.
W HTML5 wprowadzono nowe elementy, które pomagają zdefiniować strukturę semantyczną strony, m.in. header, footer, nav, article, section, main i aside. Elementy te zawierają wskazówki strukturalne na stronie bez wymuszania wbudowanych stylów (co i tak należy zrobić w przypadku CSS).
Semantyczne elementy struktury zastępują wiele powtarzających się bloków div oraz zapewniają jaśniejszy i bardziej opisowy sposób intuicyjnego wyrażania struktury strony zarówno z myślą o autorach, jak i czytelnikach.