Dostępne okna dialogowe – wykorzystanie HTML 5 i ARIA

Dzisiaj mały przykład wykorzystania HTML 5 i ARIA (Accessible Rich Internet Aplications). Korzystając z kilku dodatkowych atrybutów można sprawić, by okienko dialogowe stało się w pełni dostępne dla programów odczytu ekranu.

Okna dialogowe i alertowe można w sposób bardzo prosty tworzyć za pomocą HTML 5. Jeżeli na takie okno natknie się czytnik ekranu używany przez niewidomego użytkownika, natychmiast przechodzi w tryb aplikacji i traktuje cały obszar jak okienko dialogowe aplikacji. Można się po nim poruszać za pomocą klawisza tabulacji, zaznaczać i odznaczać spacją i wpisywać tekst. Jednak niedostępny jest wówczas tryb przeglądania, który starałem się wyjaśnić w tekście o testowaniu za pomocą czytnika ekranu. W takiej sytuacji użytkownik traci dostęp do wszystkich elementów, które nie mogą przechwycić fokusa sterowanego klawiaturą. Jest to ogromny problem spotykany na przykład na Facebooku i Google+. A rozwiązania są dostępne i wystarczy z nich korzystać.

Struktura okna dialogowego

Ogólna budowa okna dialogowego jest prosta i składa się z zadeklarowanego obszaru z przydzieloną rolą “dialog”. Takiemu oknu trzeba koniecznie przydzielić nazwę, która jest odpowiednikiem paska tytułu okna. Wykorzystuje się do tego atrybut “aria-labelledby” odwołujący się do identyfikatora opisu. W poniższym przykładzie jest to tekst zawarty w nagłówku poziomu pierwszego.

<div aria-labelledby="wndtitle" role="dialog">
<h1 id="wndtitle">Dodaj użytkownika do kręgu</h1>
...
</div>

Od tego momentu program odczytu ekranu będzie anonsował tytuł okna za każdym razem, gdy wejdzie w jego obszar.

Wkładamy kontrolki

W tak przygotowanym kontenerze możemy umieścić niezbędne kontrolki. W tym wypadku będą to trzy pola wyboru i przycisk. Dla uporządkowania umieszczamy je w liście punktowanej, chociaż można je dowolnie formatować. Nie zapominamy o etykietach. Mamy zatem następujący kod:

<div aria-labelledby="wndtitle" role="dialog">
<h1 id="wndtitle">Dodaj użytkownika do kręgu</h1>
<ul>
<li> rodzina</li>
<li> znajomi</li>
<li> pozostali</li>
<li></li>
</ul>
</div>

Okno jest już prawie gotowe, ale trzeba jeszcze dodać objaśnienie.

Dodajemy objaśnienie

W najprostszy sposób można to zrobić umieszczając na początku okna, a za nagłówkiem tytułowym, krótki opis: Zaznacz kręgi, do których chcesz dodać użytkownika. Jednak taki akapit nie jest elementem aktywnym, a zatem nie jest w stanie przechwycić fokusa. Należałoby ten opis jakoś dowiązać do okna w taki sposób, by był anonsowany użytkownikowi. Możemy do tego wykorzystać grupowanie i legendę.

<div aria-labelledby="wndtitle" role="dialog">
<h1 id="wndtitle">Dodaj użytkownika do kręgu</h1>

Zaznacz kręgi, do których chcesz dodać użytkownika
<ul>
<li> rodzina</li>
<li> znajomi</li>
<li> pozostali</li>
<li></li>
</ul>

</div>

W specyfikacji ARIA jest jeszcze inne rozwiązanie, a mianowicie atrybut “aria-describedby”, ale tutaj jego użycie byłoby niezbyt efektywne. Wkrótce podam przykład, gdzie sprawdzi się o wiele lepiej.

Podsumowanie

HTML 5 i ARIA dają bardzo wiele możliwości stworzenia dostępnych okienek. Wymaga to nieco staranności i wyobraźni, a na koniec przetestowania za pomocą czytnika ekranu. Najważniejsze jest, by każdy istotny element zawartości okna był anonsowany i to w sensownym powiązaniu z innymi elementami. Bardzo często zdarzają się okna, w których dostępne są kontrolki, ale nie da się dotrzeć do pozostałych informacji, na przykład treści komunikatu. Może być więc tak, że dostępne są tylko przyciski “tak” i “nie”, ale brakuje do nich pytania.