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

Dzisiaj rozpoczynamy omawianie kryterium 4.1.2 i od razu uprzedzamy, że ze względu na to, że obejmuje ono wiele zagadnień, będzie ono podzielone na części. 😉

Kryterium 4.1.2 WCAG – Nazwa, Rola, Wartość (Poziom A)

dba o to, aby zapewnić, że wszystkie elementy napotkane na stronie przez technologie wspomagające mogły być przez niepoprawnie zinterpretowane.

Oznacza to, że każdy interaktywny element strony (przyciski, linki, formularze itd.) musi mieć jasno określoną:

• Nazwę – czyli etykietę lub tekst, który opisuje jego funkcję (np. przycisk „Wyślij”).
• Rolę – funkcję, jaką pełni element (np. czy jest to link, przycisk, pole wyboru).
• Wartość – aktualny stan elementu, jeśli jest dynamiczny (np. czy pole wyboru jest zaznaczone, a przycisk jest zwinięty/rozwinięty).

Dzisiaj skupimy się głównie na przyciskach oraz linkach.

Na podstawie wykonanych przez nas wielu audytów dostępności, możemy śmiało postawić tezę, że istnieje duży problem z rozróżnieniem funkcji linków oraz przycisków. Jaka jest między nimi różnica?

• Linki przenoszą nas na inną stronę internetową, inną sekcja tej strony (tzw. kotwica) czy do umieszczonego pliku, który możemy podejrzeć. Zazwyczaj więc zmienia się jej adres, a więc atrybut href.

• Przyciski zaś inicjują działania na bieżącej stronie – mogą otwierać menu, okno modalne, wysyłać formularz lub też powodować dowolną akcję wyzwalaną dzięki JavaScriptowi.

Ujednolicanie tych elementów może wprowadzać w błąd, zwłaszcza osoby korzystające z technologii wspomagających. Poprawna implementacja zgodna z ich semantyką z pewnością wspomaga Użytkowników i pozwala szybko zrozumieć, co dany element robi i jak się nim posługiwać.

Będąc już przy temacie przycisków, należy pamiętać, by zawsze implementować je w taki sposób, by ich stan był zrozumiały dla wszystkich Użytkowników.

O czym mowa? O zwinięciu, rozwinięciu, wybraniu, byciu w toku procesu czy też niedostępności. Pamiętajmy o stosowaniu takich atrybutów jak: aria-expanded, aria-selected, aria-checked, aria-busy, aria-disabled i tak dalej…
Część dalsza nastąpi w przyszłym tygodniu. Kryterium jest rozległe, więc na pewno jeszcze do niego wrócimy! 🙂 A tymczasem miłego odpoczynku, bądźcie bezpieczni! ☀️