Drzewo ułatwień dostępu

Wprowadzenie do drzewa ułatwień dostępu

Alice Boxhall

Dave Gash

Meggin Kearney

Wyobraź sobie, że tworzysz interfejs 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 rodzaj interfejsu API opisującego strukturę strony, podobnego 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 to wyglądać mniej więcej tak.

To właśnie przeglądarka przekazuje czytnikowi ekranu. Przeglądarka pobiera drzewo DOM i modyfikuje je do postaci przydatnej w technologii asystycznej. 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, dużo linków, może pole i przycisk.

Przeglądanie strony w taki sposób jest podobne do korzystania z czytnika ekranu. Interfejs jest prosty i bezpośredni, podobnie jak interfejs drzewa ułatwień dostępu.

To drzewo ułatwień dostępu jest tym, z czym wchodzi w interakcję większość technologii wspomagających osoby z niepełnosprawnością. 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 ma haczyki, które pozwalają użytkownikowi łatwo symulować kliknięcie myszą lub palcem.
4. Technologia wspomagająca przekazuje zamiar użytkownika (np. „kliknięcie”) do aplikacji za pomocą interfejsu API ułatwień dostępu. 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 HTML

Przeglądarka może przekształcić drzewo DOM w drzewo ułatwień dostępu, ponieważ znaczna część DOM ma niejawne 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 skorzystać z tej wbudowanej funkcji 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 go utworzyć w dowolny sposób w języku HTML. Poniżej przedstawiamy jeden z nich.

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

Jeśli nie użyjemy rzeczywistego przycisku, czytnik ekranu nie wie, na co ten przycisk trafił. Konieczne byłoby też dodanie tagu Tabindex, aby był on użyteczny dla użytkowników, którzy mają dostęp tylko za pomocą klawiatury, ponieważ obecnie można z niego korzystać tylko przy użyciu myszy.

Możemy to łatwo 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, i zachować ich semantykę oraz 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 wyróżniamy 2 typy nazw:

• widoczne etykiety – są używane przez wszystkich użytkowników do powiązania znaczenia z elementem;
• 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”. Etykieta można powiązać z elementem formularza na 2 sposoby, np. z polem wyboru. 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, wykonaj jedną z tych czynności:

• 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?”.