Wprowadzenie do drzewa ułatwień dostępu
Wyobraź sobie, że tworzysz interfejs tylko dla użytkowników czytników ekranu. W tym przypadku nie musisz tworzyć żadnego wizualnego interfejsu, ale musisz podać wystarczającą ilość informacji, aby czytnik ekranu mógł z nich korzystać.
W ten sposób utworzysz rodzaj interfejsu API opisującego strukturę strony, podobnego do interfejsu DOM API, ale z mniejszą ilością informacji i mniejszą liczbą węzłów, ponieważ wiele z tych informacji jest przydatnych tylko do prezentacji wizualnej. Może wyglądać mniej więcej tak.
To jest zasadniczo to, co przeglądarka faktycznie prezentuje czytnikowi ekranu. Przeglądarka pobiera drzewo DOM i modyfikuje je do postaci przydatnej dla technologii wspomagających osoby z niepełnosprawnością. To zmodyfikowane drzewo nazywamy drzewem ułatwień 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.
Wzrokowe skanowanie strony w dół, jak w tym przypadku, daje wrażenia podobne do tych, jakie ma użytkownik czytnika ekranu. Interfejs jest dostępny, ale jest prosty i bezpośredni, podobnie jak interfejs drzewa ułatwień dostępu.
Drzewo ułatwień dostępu to element, z którym współpracuje większość technologii wspomagających osoby z niepełnosprawnością. Proces przebiega mniej więcej tak:
- Aplikacja (przeglądarka lub inna aplikacja) udostępnia semantyczną wersję swojego interfejsu technologii wspomagającej osoby z niepełnosprawnością za pomocą interfejsu API.
- Technologia wspomagająca osoby z niepełnosprawnością może używać informacji odczytywanych przez interfejs API do tworzenia alternatywnej prezentacji interfejsu użytkownika. Na przykład czytnik ekranu tworzy interfejs, w którym użytkownik słyszy głosową reprezentację aplikacji.
- Technologia wspomagająca osoby z niepełnosprawnością może też umożliwiać użytkownikowi interakcję z aplikacją w inny sposób. Na przykład większość czytników ekranu udostępnia punkty zaczepienia, które pozwalają użytkownikowi łatwo symulować kliknięcie myszą lub dotknięcie palcem.
- Technologia wspomagająca osoby z niepełnosprawnością przekazuje intencję użytkownika (np. „kliknij”) z powrotem do aplikacji za pomocą interfejsu API ułatwień dostępu. Aplikacja jest wtedy odpowiedzialna za odpowiednią interpretację działania w kontekście pierwotnego interfejsu.
W przypadku przeglądarek internetowych w każdą stronę jest dodatkowy krok, ponieważ przeglądarka jest w rzeczywistości platformą dla aplikacji internetowych, które są w niej uruchamiane. Przeglądarka musi więc przetłumaczyć aplikację internetową na drzewo ułatwień dostępu i upewnić się, że w JavaScript są wywoływane odpowiednie zdarzenia na podstawie działań użytkownika pochodzących z technologii wspomagającej osoby z niepełnosprawnością.
Za to wszystko odpowiada przeglądarka. Naszym zadaniem jako twórców stron internetowych jest po prostu mieć świadomość, że tak się dzieje, i tworzyć strony internetowe, które wykorzystują ten proces, aby zapewnić użytkownikom ułatwienia dostępu.
W tym celu dbamy o prawidłowe wyrażanie semantyki naszych stron: upewniamy się, że ważne elementy na stronie mają prawidłowe role, stany i właściwości ułatwień dostępu oraz że określamy nazwy na potrzeby ułatwień dostępu i opisy. Przeglądarka może następnie umożliwić technologii wspomagającej dostęp do tych informacji, aby dostosować działanie do potrzeb użytkownika.
Semantyka w natywnym kodzie HTML
Przeglądarka może przekształcić drzewo DOM w drzewo ułatwień dostępu, ponieważ duża część modelu 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ą w przewidywalny sposób na różnych platformach. Ułatwienia dostępu w przypadku natywnych elementów HTML, takich jak linki czy przyciski, są więc obsługiwane automatycznie. Możemy wykorzystać tę wbudowaną dostępność, 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żna go utworzyć w HTML na wiele sposobów. Jeden z nich przedstawiamy poniżej.
<div class="button-ish">Give me tacos</div>
Jeśli nie użyjemy rzeczywistego elementu przycisku, czytnik ekranu nie będzie wiedział, na co trafił. Musielibyśmy też wykonać dodatkową pracę, aby dodać tabindex, żeby umożliwić korzystanie z niego użytkownikom, którzy używają tylko klawiatury, ponieważ w obecnej formie można go używać tylko za pomocą myszy.
Możemy to łatwo naprawić, używając zwykłego elementu button zamiast div.
Użycie elementu natywnego ma też tę zaletę, że dba o interakcje z klawiaturą. Pamiętaj, że nie musisz rezygnować z efektów wizualnych tylko dlatego, że używasz elementu natywnego. Możesz stylizować elementy natywne, aby wyglądały tak, jak chcesz, i zachowały domyślną semantykę i zachowanie.
Wspomnieliśmy wcześniej, że czytniki ekranu odczytują rolę, nazwę, stan i wartość elementu. Użycie odpowiedniego elementu semantycznego zapewnia rolę, stan i wartość, ale musimy też zadbać o to, aby nazwa elementu była wykrywalna.
Ogólnie rzecz biorąc, istnieją 2 rodzaje nazw:
- widoczne etykiety, które są używane przez wszystkich użytkowników do powiązania znaczenia z elementem, oraz
- Tekst alternatywny, który jest używany tylko wtedy, gdy nie ma potrzeby stosowania etykiety wizualnej.
W przypadku elementów na poziomie tekstu nie musimy nic robić, ponieważ z definicji będą one zawierać jakąś treść tekstową. Jednak w przypadku elementów wejściowych lub sterujących oraz treści wizualnych, takich jak obrazy, musimy określić nazwę. W rzeczywistości zapewnienie alternatyw tekstowych dla treści niebędących tekstem jest pierwszym punktem na liście kontrolnej WebAIM.
Jednym ze sposobów jest zastosowanie się do zalecenia „Pola formularza mają powiązane etykiety tekstowe”. Etykietę z elementem formularza, takim jak pole wyboru, można powiązać na 2 sposoby. Obie metody powodują, że tekst etykiety staje się również celem kliknięcia pola wyboru, co jest przydatne dla użytkowników myszy lub ekranu dotykowego. Aby powiązać etykietę z elementem, wykonaj jedną z tych czynności:
- Umieść element wejściowy w elemencie etykiety.
<label>
<input type="checkbox">Receive promotional offers?
</label>lub
- Użyj atrybutu
foretykiety i odwołaj się do elementuid
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
Gdy pole wyboru jest prawidłowo oznaczone, czytnik ekranu może poinformować, że element ma rolę pola wyboru, jest zaznaczony i ma nazwę „Czy chcesz otrzymywać oferty promocyjne?”.
