Etykiety i relacje ARIA

Używanie etykiet ARIA do tworzenia opisów elementów ułatwień dostępu

Alice Boxhall

Dave Gash

Meggin Kearney

Etykiety

ARIA udostępnia kilka mechanizmów umożliwiających dodawanie etykiet i opisów do elementów. W rzeczywistości ARIA to jedyny sposób na dodanie dostępnej pomocy i tekstu opisu. Przyjrzyjmy się właściwościom, których ARIA używa do tworzenia dostępnych etykiet.

aria-label

aria-label pozwala nam określić ciąg znaków, który ma być używany jako etykieta dostępności. Spowoduje to zastąpienie jakiegokolwiek innego mechanizmu natywnego oznaczania etykietami, takiego jak element label. Jeśli np. element button zawiera zarówno tekst, jak i element aria-label, używana będzie tylko wartość aria-label.

Atrybutu aria-label możesz użyć, gdy chcesz w jakikolwiek sposób pokazać przeznaczenie elementu, np. przycisk, który zamiast tekstu zawiera grafikę, ale musisz wyraźnie wskazać ten cel każdemu, kto nie może uzyskać dostępu do tego oznaczenia, np. w przypadku przycisku, który wskazuje tylko jego przeznaczenie.

aria-labelledby

aria-labelledby umożliwia określenie identyfikatora innego elementu w DOM jako etykiety elementu.

Działa to podobnie do elementu label, z pewnymi kluczowymi różnicami.

1. Typu aria-labelledby można używać do dowolnych elementów, a nie tylko do tych, które można oznaczyć etykietami.
2. W przypadku elementu label etykieta odnosi się do elementu, do którego odnosi się etykieta. W przypadku elementu aria-labelledby zależność jest odwrócona.
3. Z elementem z etykietą może być powiązany tylko 1 element etykiety, ale aria-labelledby może pobierać listę identyfikatorów IDREF, aby utworzyć etykietę z kilku elementów. Etykieta zostanie połączona w kolejności, w jakiej są podane identyfikatory IDREF.
4. Za pomocą polecenia aria-labelledby możesz odwołać się do elementów, które są ukryte, a w innym przypadku nie znalazłyby się w drzewie ułatwień dostępu. Możesz na przykład dodać ukryty element span obok elementu, który chcesz oznaczyć etykietą, i odwołać się do niego za pomocą funkcji aria-labelledby.
5. Ponieważ jednak ARIA wpływa tylko na drzewo ułatwień dostępu, aria-labelledby nie zachowuje znanego działania klikania etykiet, które jest stosowane w przypadku elementu label.

Co ważne, właściwość aria-labelledby zastępuje wszystkie inne źródła nazw elementu. Jeśli np. element zawiera zarówno aria-labelledby, jak i aria-label lub aria-labelledby i natywny tag HTML label, etykieta aria-labelledby zawsze ma pierwszeństwo.

Relacje

Przykładem atrybutu relacji jest aria-labelledby. Atrybut relacji tworzy semantyczną relację między elementami na stronie niezależnie od ich relacji DOM. W przypadku aria-labelledby ta relacja to „ten element jest oznaczony przez ten element”.

Specyfikacja ARIA zawiera 8 atrybutów relacji. Sześć z nich – aria-activedescendant, aria-controls, aria-describedby, aria-labelledby i aria-owns – odwołuje się do co najmniej 1 elementu, aby utworzyć nowe połączenie między elementami na stronie. Różnica polega na tym, co oznacza dany link i w jaki sposób jest on prezentowany użytkownikom.

aria-właściciel

aria-owns to jedna z najpopularniejszych relacji ARIA. Umożliwia on nam informowanie technologii wspomagającej, że element osobny w DOM powinien być traktowany jako element podrzędny bieżącego elementu lub zmienić kolejność istniejących elementów podrzędnych. Jeśli na przykład wyskakujące menu podrzędne jest umieszczone obok swojego menu nadrzędnego, ale nie może być elementem podrzędnym DOM w stosunku do jego elementu nadrzędnego, bo wpływałoby to na wizualną prezentację, możesz za pomocą polecenia aria-owns zaprezentować czytnikowi ekranu menu podrzędne jako podrzędne menu nadrzędnego.

aria-active$endant

aria-activedescendant odgrywa podobną rolę. Tak jak aktywny element strony jest tym, który jest zaznaczony, ustawienie aktywnego elementu potomnego elementu umożliwia nam poinformowanie technologii wspomagającej, że dany element powinien być przedstawiony użytkownikowi jako aktywny element, gdy jego element nadrzędny jest na pierwszym planie. Na przykład w polu listy możesz pozostawić fokus strony w kontenerze pola listy, ale zachować atrybut aria-activedescendant zaktualizowany na obecnie wybrany element listy. Spowoduje to, że aktualnie wybrany element wygląda na technologię wspomagającą osoby z niepełnosprawnością.

aria-describedby

aria-describedby zapewnia przystępny opis w taki sam sposób, w jaki określa etykietę aria-labelledby. Podobnie jak w przypadku aria-labelledby, element aria-describedby może odwoływać się do elementów, które są niewidoczne z innego powodu – zarówno te ukryte w DOM, jak i ukryte przed użytkownikami technologii wspomagających. Jest to przydatna technika, gdy użytkownik może potrzebować dodatkowego objaśnienia, niezależnie od tego, czy ma ona zastosowanie zarówno do użytkowników technologii wspomagających, jak i do wszystkich użytkowników.

Typowym przykładem jest pole do wpisywania hasła wraz z opisowym tekstem objaśniającym minimalne wymagania dotyczące hasła. W odróżnieniu od etykiety ten opis może, ale nie musi, nigdy nie zostać przedstawiony użytkownikowi. Może on samodzielnie wybrać, czy chce uzyskać do niego dostęp, może wyświetlić go po wszystkich innych informacjach lub może zostać zatrzymany przez coś innego. Jeśli na przykład użytkownik będzie wpisywać informacje, zostaną one cofnięte i mogą zakłócić opis elementu. Opis jest więc świetnym sposobem na przekazanie dodatkowych, ale nieistotnych informacji. Nie przeszkadza w znajdowaniu bardziej istotnych informacji, np. o roli elementu.

aria-posinset i aria-setsize

Pozostałe atrybuty relacji są nieco inne i współdziałają. Parametry aria-posinset („pozycja w zestawie”) i aria-setsize („rozmiar zestawu”) odnoszą się do definiowania relacji między elementami równorzędnymi w zestawie, np. liście.

Gdy elementy w modelu DOM nie mogą określić rozmiaru zestawu, np. w przypadku użycia leniwego renderowania w celu uniknięcia zgromadzenia całej dużej listy w elemencie DOM naraz, aria-setsize może określać rzeczywisty rozmiar zestawu, a aria-posinset – pozycję elementu w zestawie. Na przykład, w przypadku zbioru, który może zawierać 1000 elementów, można powiedzieć, że dany element ma aria-posinset 857, mimo że pojawia się jako pierwszy w DOM. Następnie należy użyć technik dynamicznego HTML, aby mieć pewność, że użytkownik może przejrzeć pełną listę na żądanie.