Wprowadzenie do ARIA i semantyki nienatywnej kodu HTML
Dotychczas zalecamy korzystanie z natywnych elementów HTML, ponieważ zapewniają one koncentrację, obsługę klawiatury i wbudowaną semantykę. Czasami jednak prosty układ i natywny kod HTML nie radzą sobie z tym zadaniem. Obecnie nie ma np. ustandaryzowanego elementu HTML dla bardzo popularnej konstrukcji interfejsu użytkownika, czyli menu. Nie ma też elementu HTML udostępniającego właściwość semantyczną, np. „użytkownik musi dowiedzieć się o tym jak najszybciej”.
W trakcie tej lekcji zademonstrujemy, jak wyrazić semantykę, której HTML nie potrafi samodzielnie wyrazić.
Specyfikacja Accessible Rich Internet Applications (WAI-ARIA, czyli po prostu ARIA) określona przez Web Accessibility Initiative, jest odpowiednia do łączenia obszarów z problemami z ułatwieniami dostępu, którymi nie można zarządzać za pomocą natywnego kodu HTML. Działanie tej funkcji opiera się na określeniu atrybutów, które zmieniają sposób przekształcania elementu w drzewo ułatwień dostępu. Przeanalizujmy przykład.
W tym fragmencie kodu używamy elementu listy jako niestandardowego pola wyboru. Klasa „checkbox” CSS nadaje elementowi wymagane cechy wizualne.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Jest to rozwiązanie odpowiednie dla osób widzących, ale czytnik ekranu nie informuje, że element ma być polem wyboru, więc użytkownicy niedowidzący mogą go całkowicie pominąć.
Jednakże, korzystając z atrybutów ARIA, możemy podać brakujące informacje,
aby czytnik ekranu mógł poprawnie je zinterpretować. W tym miejscu dodaliśmy atrybuty role i aria-checked, by wyraźnie wskazać element jako pole wyboru i wskazać, że jest on domyślnie zaznaczony. Pozycja na liście zostanie dodana do drzewa ułatwień dostępu, a czytnik ekranu oznaczy ją poprawnie jako pole wyboru.
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA zmienia i rozszerza standardowe drzewo ułatwień dostępu DOM.
Choć ARIA pozwala na subtelną (a nawet radykalną) modyfikację drzewa ułatwień dostępu dla dowolnego elementu na stronie, to tylko ona się zmienia. ARIA nie poprawia naturalnego zachowania elementu; nie umożliwia zaznaczenia elementu ani nie dodaje odbiorników zdarzeń klawiatury. To wciąż część naszych zadań.
Pamiętaj, że nie ma potrzeby zmieniania domyślnej semantyki. Niezależnie od tego, jak można używać standardowego elementu HTML <input type="checkbox">, nie trzeba mieć dodatkowego atrybutu ARIA dla role="checkbox", aby można było je prawidłowo odczytać.
Warto też pamiętać, że niektóre elementy HTML mają ograniczenia dotyczące ról i atrybutów ARIA. Na przykład do standardowego elementu <input
type="text"> może nie być przypisana żadna dodatkowa rola ani atrybut.
Więcej informacji znajdziesz w specyfikacji ARIA w kodzie HTML.
Zobaczmy, jakie inne możliwości oferuje ARIA.
Co może zrobić ARIA?
Jak widać w przykładzie pola wyboru, ARIA może modyfikować semantykę istniejącego elementu lub dodawać semantykę do elementów, które nie mają natywnej semantyki. Pozwala też wyrażać wzorce semantyczne, które w ogóle nie występują w kodzie HTML, np. w menu czy panelu kart. Często ARIA pozwala nam tworzyć elementy typu widżet, których nie dałoby się używać zwykłego kodu HTML.
- Na przykład ARIA może dodać etykietę i opis, które będą dostępne tylko dla interfejsów API technologii wspomagających.
<button aria-label="screen reader only label"></button>
- ARIA może wyrażać semantyczne relacje między elementami, które rozszerzają standardowe połączenie nadrzędne i podrzędne, na przykład niestandardowy pasek przewijania sterujący określonym regionem.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Z kolei ARIA może „ożywiać” fragmenty strony, dzięki czemu natychmiast informuje technologię wspomagającą o zmianie.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
Jednym z podstawowych aspektów systemu ARIA jest zbieranie ról. Rola w warunkach ułatwień dostępu to skrótowy wskaźnik dla określonego wzorca interfejsu. ARIA udostępnia słownik wzorców, którego możemy używać za pomocą atrybutu role w dowolnym elemencie HTML.
Stosując w poprzednim przykładzie atrybut role="checkbox", informowaliśmy technologię asystującą, że element powinien odpowiadać wzorcowi pola wyboru. Oznacza to, że gwarantujemy, że będzie on zaznaczony (zaznaczony lub niezaznaczony) oraz że można go przełączać za pomocą myszy lub spacji, tak jak w przypadku standardowego elementu pola wyboru HTML.
Interakcje z klawiaturą są w czytniku ekranu tak widoczne, dlatego podczas tworzenia niestandardowego widżetu musisz upewnić się, że atrybut role jest zawsze stosowany w tym samym miejscu co atrybut tabindex. Dzięki temu zdarzenia klawiatury trafią do odpowiedniego miejsca, a po wybraniu elementu zostanie dokładnie określona jego rola.
Specyfikacja ARIA opisuje taksonomię możliwych wartości atrybutu role i powiązanych atrybutów ARIA, których można używać w połączeniu z tymi rolami. Jest to najlepsze źródło informacji o tym, jak role i atrybuty ARIA współdziałają ze sobą oraz jak można ich używać w sposób obsługiwany przez przeglądarki i technologie wspomagające.
specyfikacja jest jednak bardzo zwarta; łatwiejszym rozwiązaniem jest zapoznanie się z dokumentem dotyczącym metod tworzenia ARIA, w którym opisano sprawdzone metody korzystania z dostępnych ról i właściwości ARIA.
ARIA udostępnia też role punktów orientacyjnych, które rozszerzają opcje dostępne w HTML5. Więcej informacji znajdziesz w specyfikacji wzorców projektowania ról lokalnych.