Drzewo ułatwień dostępu

Wprowadzenie do drzewa ułatwień dostępu

Alice Boxhall

Dave Gash

Meggin Kearney

Wyobraź sobie, że tworzysz interfejs użytkownika tylko dla użytkowników czytników ekranu. W tym przypadku nie musisz tworzyć żadnego wizualnego interfejsu użytkownika, ale musisz podać wystarczającą ilość informacji, aby czytnik ekranu mógł je wykorzystać.

Tworzysz interfejs API opisujący strukturę strony, podobny do interfejsu DOM API, ale możesz pominąć część informacji i węzłów, ponieważ wiele z tych informacji jest przydatnych tylko do celów wizualnych. Może ona wyglądać mniej więcej tak.

To właśnie przeglądarka przekazuje czytnikowi ekranu. Przeglądarka pobiera drzewo DOM i modyfikuje je w taki sposób, aby było przydatne dla technologii wspomagających. To zmodyfikowane drzewo nazywamy drzewem Ułatwienia dostępu.

Drzewo ułatwień dostępu może przypominać starą stronę internetową z lat 90.: kilka obrazów, mnóstwo linków, może pole i przycisk.

Przeglądanie strony w taki sposób daje Ci wrażenia podobne do tych, jakie odczuwa użytkownik korzystający z czytnika ekranu. Interfejs jest prosty i bezpośredni, podobnie jak interfejs drzewa ułatwień dostępu.

Drzewo ułatwień dostępu jest używane przez większość technologii wspomagających. Proces wygląda mniej więcej tak.

1. Aplikacja (przeglądarka lub inna aplikacja) udostępnia semantyczną wersję interfejsu użytkownika za pomocą interfejsu API.
2. Technologia wspomagająca może używać informacji odczytanych za pomocą interfejsu API do tworzenia alternatywnej prezentacji interfejsu użytkownika. Na przykład czytnik ekranu tworzy interfejs, w którym użytkownik słyszy wymowę aplikacji.
3. Technologia wspomagająca może też umożliwiać użytkownikowi interakcję z aplikacją w inny sposób. Na przykład większość czytników ekranu udostępnia uchwyty, które umożliwiają użytkownikowi łatwe symulowanie kliknięcia myszką lub dotknięcia palcem.
4. Technologia wspomagająca przekazuje zamiar użytkownika (np. „kliknięcie”) do aplikacji za pomocą interfejsu API ułatwień. Aplikacja musi wtedy odpowiednio zinterpretować działanie w kontekście pierwotnego interfejsu.

W przypadku przeglądarek internetowych jest dodatkowy krok w każdą stronę, ponieważ przeglądarka jest platformą dla aplikacji internetowych, które działają w niej. Przeglądarka musi przekształcić aplikację internetową w drzewo ułatwień dostępu i zadbać o to, aby odpowiednie zdarzenia były wywoływane w JavaScriptzie na podstawie działań użytkownika pochodzących z ułatwień dostępu.

To jednak odpowiedzialność przeglądarki. Naszym zadaniem jako programistów stron internetowych jest wiedzieć, że to się dzieje, oraz tworzyć strony internetowe, które korzystają z tego procesu, aby zapewnić użytkownikom dostępność.

Dokonujemy tego, zapewniając prawidłową semantykę naszych stron: upewniając się, że ważne elementy na stronie mają prawidłowe role, stany i właściwości, oraz podając odpowiednie nazwy i opisy. Następnie przeglądarka może udostępnić te informacje technologii wspomagającej, aby umożliwić jej dostosowanie działania.

Semantyka w natywnym kodzie HTML

Przeglądarka może przekształcić drzewo DOM w drzewo ułatwień dostępu, ponieważ większość modelu DOM ma ukryte znaczenie semantyczne. Oznacza to, że DOM używa natywnych elementów HTML, które są rozpoznawane przez przeglądarki i działają zgodnie z oczekiwaniami na różnych platformach. W ten sposób ułatwienia dostępu dla elementów HTML, takich jak linki czy przyciski, są obsługiwane automatycznie. Możemy wykorzystać tę wbudowaną funkcję ułatwień dostępu, pisząc kod HTML, który wyraża semantykę elementów strony.

Czasami jednak używamy elementów, które wyglądają jak elementy natywne, ale nimi nie są. Na przykład ten „przycisk” wcale nie jest przyciskiem.

Możesz stworzyć go w dowolny sposób w języku HTML. Poniżej przedstawiamy jeden z nich.

<div class="button-ish">Give me tacos</div>

Gdy nie używamy rzeczywistego elementu przycisku, czytnik ekranu nie ma możliwości określenia, na czym się zatrzymał. Musielibyśmy też dodać tabindex, aby można było korzystać z tej funkcji za pomocą tylko klawiatury, ponieważ w obecnej wersji można z niej korzystać tylko za pomocą myszy.

Możemy łatwo to naprawić, używając zwykłego elementu button zamiast elementu div. Korzystanie z elementu natywnego ma też tę zaletę, że załatwia nam obsługę interakcji z klawiaturą. Pamiętaj, że nie musisz rezygnować z efektów wizualnych tylko dlatego, że używasz elementów natywnych. Możesz nadać im styl, aby wyglądały tak, jak chcesz, zachowując jednocześnie ich semantykę i zachowanie.

Wspomnieliśmy już, że czytniki ekranu będą ogłaszać rolę, nazwę, stan i wartość elementu. Dzięki użyciu odpowiedniego elementu semantycznego uwzględniamy rolę, stan i wartość, ale musimy też zadbać o to, aby nazwa elementu była możliwa do odkrycia.

Ogólnie rzecz biorąc, istnieją 2 typy nazw:

• widoczne etykiety, które są używane przez wszystkich użytkowników do przypisywania znaczenia elementom,
• Tekstowe alternatywy, które są używane tylko wtedy, gdy nie ma potrzeby stosowania etykiety wizualnej.

W przypadku elementów na poziomie tekstu nie trzeba nic robić, ponieważ z definicji będą one zawierać tekst. W przypadku elementów wejściowych lub elementów sterujących oraz treści wizualnych, takich jak obrazy, musimy jednak podać nazwę. W zasadzie dostarczenie tekstowych alternatyw dla treści nietekstowych jest pierwszym punktem na liście kontrolnej WebAIM.

Jednym ze sposobów jest zastosowanie się do rekomendacji, aby „pola formularza miały powiązane etykiety tekstowe”. Etykietę można powiązać z elementem formularza, np. z polem wyboru, na 2 sposoby. W obu przypadkach tekst etykiety staje się też celem kliknięcia dla pola wyboru, co jest przydatne dla użytkowników korzystających z myszy lub ekranu dotykowego. Aby powiązać etykietę z elementem:

• Umieść element wejściowy wewnątrz elementu etykiety

<label>
    <input type="checkbox">Receive promotional offers?
</label>

lub

• Użyj atrybutu for etykiety i odwołuj się do atrybutu id elementu.

<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Gdy pole wyboru ma prawidłowo sformułowaną etykietę, czytnik ekranu może poinformować, że element ma rolę pola wyboru, jest zaznaczony i ma nazwę „Otrzymuj oferty promocyjne?”.