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 widać, pisanie ekspresywnego, semantycznego języka HTML zapewnia wiele ułatwień dostępu przy minimalnym nakładzie pracy, ponieważ wiele elementów standardowych ma wbudowaną zarówno semantykę, jak i funkcjonalność.
W tej lekcji omówimy mniej oczywiste pojęcia, które są bardzo ważne dla użytkowników czytników ekranu, zwłaszcza w zakresie nawigacji. Na prostej stronie, która zawiera wiele elementów sterujących, ale nie ma zbyt wielu treści, można bez trudu znaleźć potrzebne informacje. Jednak na stronach z dużą ilością treści, takich jak wpis w Wikipedii lub agregator wiadomości, czytanie od góry do dołu jest zbyt trudne. Potrzebny jest sposób na sprawne poruszanie się po treści.
Deweloperzy często wierzą, że czytniki ekranu są uciążliwe i powolne w użyciu, lub że wszystko, co jest na ekranie, musi być zaznaczone, by czytnik mógł je znaleźć. 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 wyodrębniania i skanowania nagłówków stron – jest to ważna funkcja nazywana pokrętłem. Zobaczmy, jak skutecznie wykorzystać nagłówki HTML do obsługi tej funkcji.
Efektywne korzystanie z nagłówków
Najpierw przypomnijmy sobie wcześniejszą kwestię: kolejność DOM ma znaczenie, a nie tylko kolejność wyróżnienia, ale także kolejność czytników 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 ogólnie czytników ekranu. Czytniki ekranu wchodzą w interakcję z drzewem ułatwień dostępu, a drzewo ułatwień dostępu jest oparte na drzewie DOM, więc kolejność interpretowana przez czytnik ekranu zależy więc bezpośrednio od kolejności DOM. Oznacza to, że właściwa struktura nagłówków jest ważniejsza niż kiedykolwiek wcześniej.
Na większości stron o dobrej strukturze poziom nagłówków jest zagnieżdżony, aby wskazać relację nadrzędny-podrzędny między blokami treści. Do tej techniki wielokrotnie powtarza się lista kontrolna WebAIM.
- 1.3.1 Wzmianki: „Znaczniki semantyczne służą do wyznaczania 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 na temat tworzenia przydatnych nagłówków.
- 2.4.10 wskazuje „Poszczególne sekcje treści są oznaczone za pomocą nagłówków”
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 prawidłowymi nagłówkami ułatwiają użytkownikom czytników ekranu poruszanie się po stronie, istnieją inne elementy, których mogą użyć do poruszania się po stronie, takie jak linki, elementy sterujące formularza i punkty orientacyjne.
Czytelnicy mogą używać pokrętła czytnika ekranu (łatwe do odizolowania i przeskanowania listy nagłówków stron), aby uzyskać dostęp do listy linków na stronie. Czasami, podobnie jak w przypadku witryn wiki, jest wiele linków, więc czytelnik może wyszukiwać hasło wśród nich. Ogranicza to działania do linków, które faktycznie zawierają dane hasło, a nie do wszystkich jego wystąpień na stronie.
Ta funkcja jest przydatna tylko wtedy, gdy czytnik ekranu może znaleźć linki, a ich tekst jest zrozumiały. 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 z linkami. Sprawia to, że czytnik ekranu zinterpretuje treść jako link, a przycisk nie będzie działać. W takich przypadkach zastąp tag kotwicy prawdziwym przyciskiem i nadaj mu odpowiedni styl.
- obrazy użyte jako treść linku; Czasami niezbędne obrazy, do których prowadzą linki, mogą być bezużyteczne dla czytników ekranu. Aby mieć pewność, że link będzie prawidłowo dostępny dla technologii asystujących, upewnij się, że obraz zawiera tekst atrybutu
alt.
Słaby tekst linku to kolejny problem. 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, takiego jak „Dowiedz się więcej o elastycznym projektowaniu” lub „Zobacz ten samouczek canvas”, aby ułatwić czytnikom ekranu podanie przydatnego kontekstu linków.
Pokrętło może też pobrać listę elementów sterujących formularza. Za pomocą tej listy czytelnicy mogą wyszukać konkretne produkty i przejść bezpośrednio do nich.
Częstym błędem popełnianym przez czytniki ekranu jest wymowa. 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ą dość przyzwyczajeni do tego osobliwego zjawiska i biorą go pod uwagę.
Niektórzy deweloperzy próbują rozwiązać tę sytuację, podając tekst, który działa tylko w czytniku ekranu, i jest zapisany fonetycznie. Oto prosta zasada zapisu fonetycznego: nie rób tego – to tylko pogorszy problem. Jeśli np. użytkownik używa monitora brajlowskiego, słowo zostanie zapisane nieprawidłowo, co prowadzi do większego dezorientacji. 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ć pokrętła, aby wyświetlić 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. Elementy te dają wskazówki strukturalne na stronie bez narzucania wbudowanych stylów (co i tak należy zrobić w przypadku CSS).
Semantyczne elementy strukturalne zastępują wiele powtarzających się bloków div i zapewniają jaśniejszy, bardziej opisowy sposób na intuicyjne przedstawianie struktury strony zarówno autorom, jak i czytelnikom.