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.
Dodaj użytkownika do kręgu
...
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:
Dodaj użytkownika do kręgu
- rodzina
- znajomi
- pozostali
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ę.
Dodaj użytkownika do kręgu
Zaznacz kręgi, do których chcesz dodać użytkownika
- rodzina
- znajomi
- pozostali
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.