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. Nie musisz tworzyć żadnego wizualnego interfejsu użytkownika, ale które mają być używane przez czytnik ekranu.

Należy utworzyć interfejs API opisujący strukturę strony, podobny do interfejsu DOM API, ale mniej informacji i węzłów bo wiele z nich ma znaczenie tylko w formie wizualnej. it może wyglądać mniej więcej tak.

Zasadniczo to właśnie przeglądarka wyświetla czytnikowi ekranu. pobiera drzewo DOM i przekształca je w formularz, który ułatwia technologii wspomagających osoby z niepełnosprawnością. To zmodyfikowane drzewo nazywamy Ułatwienia dostępu Drzewo.

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

Przeglądanie wizualne strony w takiej sytuacji działa podobnie jak w przypadku korzystania z czytnika ekranu. Interfejs jest dostępny, ale jest prosty i prosty, podobny do interfejsu 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 powinien wyglądać podobnie do tego.

1. Aplikacja (przeglądarka lub inna aplikacja) ujawnia semantyczną wersję swojej Interfejs użytkownika do technologii wspomagającej osoby z niepełnosprawnością za pomocą interfejsu API.
2. Technologia wspomagająca osoby z niepełnosprawnością może wykorzystywać informacje odczytywane przez interfejs API do utworzyć alternatywną prezentację interfejsu dla użytkownika. Przykład: czytnik ekranu tworzy interfejs, w którym użytkownik słyszy mowę jest reprezentacja aplikacji.
3. Technologia wspomagające osoby z niepełnosprawnością może również umożliwiać użytkownikowi interakcję z aplikacją w inny sposób. Na przykład większość czytników ekranu ma haczyki umożliwiające użytkownika, aby łatwo symulować kliknięcie myszą lub palcem.
4. Technologia wspomagające osoby z niepełnosprawnością przekazuje zamiar użytkownika (np. „kliknięcie”) z aplikacji za pomocą interfejsu Accessibility API. Następnie aplikacja ma obowiązek odpowiednio zinterpretować działanie w kontekście oryginalnego interfejsu użytkownika.

W przeglądarkach internetowych wymaga to dodatkowych działań w każdym kierunku, ponieważ stanowi platformę dla działających w niej aplikacji internetowych. Przeglądarka musi przetłumaczyć aplikację internetową na drzewo ułatwień dostępu i zadbać o to, w JavaScripcie odpowiednie zdarzenia są wywoływane przez odpowiednie działania użytkownika. z technologii wspomagających osoby z niepełnosprawnością.

Jednak to wszystkie obowiązki przeglądarki. Zadaniem programistów stron internetowych jest że to się dzieje, i tworzyć strony internetowe, które w celu zapewnienia użytkownikom wygody korzystania z usług.

Robimy to, upewniając się, że prawidłowo wyrażamy semantykę naszych stron: Upewnienie się, że ważne elementy strony są prawidłowo dostępne role, stany i właściwości oraz określenie przez nas nazw na potrzeby ułatwień dostępu tekstów reklamy. Przeglądarka może następnie zezwolić technologii wspomagającej osoby z niepełnosprawnością na dostęp do tego elementu informacje potrzebne do stworzenia spersonalizowanego środowiska.

Semantyka w natywnym HTML

Przeglądarka może przekształcić drzewo DOM w drzewo ułatwień dostępu, DOM ma niejawne znaczenie semantyczne. Oznacza to, że DOM używa natywnego kodu HTML rozpoznawane przez przeglądarki i przewidywalne elementy na różnych platform. Ułatwienia dostępu w przypadku natywnych elementów HTML, takich jak linki i przyciski, w sposób automatyczny. Możemy wykorzystać wbudowane ułatwienia dostępu, przez napisanie kodu HTML wyrażającego semantykę elementów strony.

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

Może być utworzona w języku HTML na wiele sposobów. jeden ze sposobów przedstawiono poniżej.

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

Gdy nie używamy rzeczywistego przycisku, czytnik ekranu nie ma możliwości sprawdzenia gdzie wylądował. Musimy też wykonać dodatkowe czynności – dodać Tabindex, dla użytkowników korzystających tylko z klawiatury, ponieważ obecnie można go używać tylko za pomocą myszy.

Możemy łatwo to naprawić, używając zwykłego elementu button zamiast div. Użycie elementu natywnego pozwala też zadbać o klawiaturę interakcji z klientami. I pamiętaj, że nie musisz tracić wspaniałych efektów wizualnych, efekty tylko dzięki użyciu elementu natywnego; możesz ustalić styl elementów natywnych, aby wyglądały tak, jak chcesz, zachowując ich dorozumiałą semantykę i zachowanie użytkownika.

Zauważyliśmy wcześniej, że czytniki ekranu informują o roli, nazwie elementu stan i wartość. Przez użycie właściwego elementu semantycznego, roli, stanu i wartości ale musimy też utworzyć nazwę elementu, wykrywalne.

Ogólnie wyróżniamy 2 typy nazw:

• Widoczne etykiety, które są używane przez wszystkich użytkowników do powiązania znaczenia z atrybutem ,
• Tekstowe alternatywne wersje, które są używane tylko wtedy, gdy nie ma potrzeby dodawania elementów wizualnych .

Przy elementach na poziomie tekstu nie trzeba nic robić, ponieważ z definicji zawierać tekst. Jednak w przypadku elementów wejściowych, sterujących i wizualnych takich jak obrazy, musimy określić nazwę. oferowanie alternatywnych tekstów w przypadku treści innych niż tekst jest bardzo jako pierwszy element na liście kontrolnej WebAIM.

Możesz to zrobić, stosując się do rekomendacji: „Dane wejściowe formularza mają powiązanych etykiet tekstowych”. Istnieją 2 sposoby powiązania etykiety z formularzem np. pole wyboru. Każda z metod powoduje, że tekst etykiety jest też może zostać docelowym kliknięciem pola wyboru, co przydaje się również przy korzystaniu z myszy lub użytkowników ekranów dotykowych. Aby powiązać etykietę z elementem:

• Umieszczanie elementu wejściowego wewnątrz elementu etykiety

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

lub

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

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

Jeśli pole wyboru będzie prawidłowo oznaczone, czytnik ekranu może zgłosić element ma rolę „pole wyboru”, jest zaznaczony i nosi nazwę „Odbierz oferty promocyjne?”