WCAG 2.1 – 4.1.2. Nazwa, rola, wartość (Poziom A) cz. 3

Kryterium 4.1.2 WCAG podkreśla znaczenie prawidłowego przypisywania atrybutów ‘name’, ‘role’ i ‘value’ do elementów interaktywnych na stronie. Dzięki nim technologie asystujące, w tym czytniki ekranu, są w stanie poprawnie przetworzyć funkcje i stany elementów.

Jak działają atrybuty ‘name’, ‘role’ i ‘value’?

👉Name – nazwa elementu

To tekstowa etykieta przypisana do elementu. Informuje Użytkownika o funkcji danego obiektu, szczególnie gdy nie jest ona widoczna wprost. Przykładem jest przycisk w formie ikony – np. „X” do zamykania okna. Użytkownicy czytników ekranu nie zrozumieją go, jeśli nie zostanie do niego przypisana odpowiednia etykieta (np. `aria-label=”Zamknij okno”`).

👉Role – rola elementu

Role określają, jakiego rodzaju jest to element. Standardowe elementy HTML, jak przyciski <button> czy linki <a>, mają automatycznie przypisane odpowiednie role. Jeśli jednak zostaną stworzone niestandardowe elementy za pomocą <div> czy <span> – musimy ręcznie przypisać odpowiednią rolę (role=”button”, role=”link”), by technologie asystujące mogły prawidłowo rozpoznać i zinterpretować funkcję tych elementów.

👉Value – wartość elementu

Atrybut ten odnosi się do dynamicznych elementów, takich jak suwaki, pola wyboru czy przyciski przełączające. Informuje on Użytkownika o aktualnym stanie elementu, np. zaznaczeniu checkbox’a, wartości suwaka (aria-valuenow) czy który przycisk w grupie został wybrany.

A kiedy stosować ARIA (Accessible Rich Internet Applications), a kiedy semantyczne elementy HTML?

💡Zasada jest prosta – wWszędzie gdzie MOŻESZ, UŻYWAJ semantycznych elementów HTML. ARIA powinna być stosowana tylko wtedy, gdy HTML nie wystarcza.

Semantyczne elementy HTML mają wbudowaną funkcjonalność dostępnościową, więc nie wymagają dodatkowych atrybutów ARIA.

Gdy budujemy niestandardowe elementy, które nie mają domyślnie przypisanych ról lub wartości, użycie ARIA jest niezbędne.

Na przykład budując niestandardowy suwak z elementu <div>, musimy przypisać role. Do takiego elementu musimy dodać role=”slider”, oraz atrybuty aria-valuenow, aria-valuemin, aria-valuemax, aby czytnik ekranu mógł odczytać aktualną wartość suwaka.

❗️Pamiętajmy, by nie stosować nadmiernie ARIA.

Przypisanie ról ARIA do semantycznych elementów HTML, może prowadzić do komplikacji. Natywne elementy są automatycznie rozpoznawane przez technologie asystujące, więc dodatkowe role są zbędne, a nawet mogą powodować błędy.

Mamy nadzieję, że rozgrzaliście się tym tematem, tak samo jak my. 😉 Odpoczywajcie, miłego weekendu!