Cel kryterium - czyli o co chodzi?
Kryterium 4.1.2 (poziom A) dotyczy zapewnienia, że interaktywne elementy strony internetowej, takie jak linki i przyciski, mają prawidłowo określoną nazwę, rolę i wartość. Dzięki temu technologie asystujące, np. czytniki ekranu, mogą prawidłowo interpretować ich funkcję i przekazywać ją użytkownikom.
Kto skorzysta z tego rozwiązania?
Prawidłowo wdrożone etykiety i role elementów interaktywnych pomagają osobom niewidomym i niedowidzącym, użytkownikom korzystającym z czytników ekranu oraz osobom nawigującym wyłącznie za pomocą klawiatury. Jasno zdefiniowane elementy poprawiają również ogólną użyteczność strony.
Jak poprawnie wdrożyć dostępne linki i przyciski?
🔗 Link:
- Powinien być wyróżniony wizualnie, np. poprzez podkreślenie lub zmianę koloru.
- Po kliknięciu jego kolor powinien się zmieniać, co wskazuje, że strona została odwiedzona.
- Może mieć formę tekstową lub graficzną, ale zawsze powinien zawierać jasną treść informującą o jego celu.
🔘 Przycisk:
- Zazwyczaj ma formę klikalnego elementu, np. prostokątnego pola z tekstem lub ikoną.
- Może być zaprojektowany z różnymi efektami wizualnymi, np. cieniowaniem, obramowaniem czy animacjami.
- Powinien mieć wyraźną etykietę opisującą jego działanie.
Dlaczego etykieta przycisku jest tak ważna?
Każdy interaktywny element musi jasno wskazywać swoją funkcję. W przeciwnym razie użytkownik korzystający z czytnika ekranu może otrzymać niejasny komunikat, np. „przycisk”, zamiast konkretnej informacji, np. „Zamknij okno” lub „Wyślij formularz”.
Jak poprawnie oznaczać przyciski?
Atrybut aria-label:
Jest lepszym rozwiązaniem niż title, ponieważ bezpośrednio informuje technologie asystujące o funkcji przycisku. Stosuje się go w sytuacjach, gdy przycisk nie zawiera tekstu, np. dla ikon:
<button aria-label="Zamknij">✖</button>Problemy z title:
- Nie jest zawsze poprawnie odczytywany przez czytniki ekranu.
- Informacja z
titlepojawia się tylko po najechaniu myszką, więc użytkownicy klawiatury i ekranów dotykowych mogą jej nie zobaczyć.
Alternatywa: Tooltip
Zamiast title, lepiej zastosować dobrze zaprojektowany tooltip, który będzie widoczny zarówno dla użytkowników klawiatury, myszki, jak i ekranów dotykowych. Dzięki temu wszyscy użytkownicy będą mieli dostęp do niezbędnych informacji.
Dlaczego to jest ważne?
Spójność wizualna i techniczna linków oraz przycisków wpływa na komfort użytkowania strony. Poprawnie opisane elementy umożliwiają użytkownikom intuicyjną nawigację i korzystanie z funkcji serwisu bez zbędnych trudności.
Czy wiesz, że?
Brak właściwie oznaczonych elementów interaktywnych jest jednym z najczęstszych problemów dostępności wykrywanych podczas audytów stron internetowych. Proste poprawki, takie jak dodanie aria-label czy zastosowanie jednolitego stylu linków i przycisków, znacząco poprawiają doświadczenie użytkowników.
Dobre praktyki w zakresie dostępności ułatwiają korzystanie ze stron internetowych wszystkim użytkownikom – nie tylko osobom z niepełnosprawnościami.
