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

Ostatnio mówiliśmy sobie o różnicy między linkami i przyciskami oraz stanach przycisków.
Waszą propozycją w komentarzach było porównanie wizualne linku oraz przycisku. W jaki sposób ich wygląd może wpływać na dostępność cyfrową?

Najważniejszą zasadą jest to, by projektując, a później implementując nasze elementy, być spójnym w obszarze naszego serwisu.

Nie powinniśmy na jednej podstronie implementować przycisku, który na drugiej będzie wyglądał zupełnie inaczej (kształt, kolor, grafika), pełniąc tym samym tę samą funkcję/cel.
Ważne jest, aby linki i przyciski były odpowiednio odróżnialne pod względem wizualnym. Najczęściej wygląda to tak:

🔗Link:

• Zazwyczaj podkreślony (lub inny sposób wyróżnienia, na przykład poprzez pogrubienie lub kolor – pamiętajmy o odpowiednim kontraście).
• Zwykle to tekst, ale może występować również w formie graficznej.
• Kolor linku zmienia się po kliknięciu w niego lub też jest wyróżniony kolorem, jeśli wcześniej byliśmy już na tej stronie (często domyślnie jest to kolor fioletowy).

🔘Przycisk:

• Najczęściej ma formę klikalnego obiektu, często w kształcie prostokąta, z tekstem lub ikoną w środku.
• Wygląd przycisku zależny jest od wyobraźni projektanta: może być z cieniowaniem, obramowaniem, a także wyróżniony różnymi kolorami (uwaga na kontrast 😉), które mogą symbolizować różne akcje (na przykład zielony „potwierdź”, czerwony „anuluj”).

Pamiętajmy, że każdy przycisk powinien mieć swoją etykietę. Jeśli Użytkownik nie jest w stanie wprost stwierdzić, jaką funkcję pełni, powinien mieć zapewnioną pomoc.

Dlaczego etykieta przycisku jest tak ważna?

Ważne jest, by każdy element interfejsu był zrozumiały i jednoznaczny. Dla użytkowników technologii wspomagających, takich jak czytniki ekranu, brak opisu przycisku oznacza brak informacji o jego funkcji. Zamiast dowiedzieć się, że dany przycisk służy do „zamknięcia okna”, „wysłania formularza” czy „otwarcia menu”, Użytkownik może usłyszeć jedynie „przycisk”, co jest niejasne i nieefektywne. Co możemy zrobić?

Atrybut aria-label:

• W wielu przypadkach lepszym rozwiązaniem niż title jest użycie atrybutu aria-label, który w sposób bezpośredni informuje technologie asystujące (np. czytniki ekranu) o funkcji przycisku.
• Atrybut aria-label może być używany w sytuacjach, gdy przycisk nie zawiera żadnego tekstu, np. ikony „zamknij” (krzyżyk), „dodaj” (plus) lub inne symbole. Przykład:
  <button aria-label=”Zamknij”>✖</button>

Problemy z title

Chociaż atrybut title może wydawać się dobrym rozwiązaniem do dostarczania dodatkowych informacji o przycisku, nie zawsze działa on poprawnie. Kilka problemów:

• Niezgodność z czytnikami ekranu: W niektórych przypadkach czytniki ekranu ignorują ten atrybut lub odczytują go w sposób niewłaściwy: https://www.powermapper.com/tests/screen-readers/labelling/a-title/
• Brak wizualnej wskazówki: Informacja z title pojawia się dopiero po najechaniu myszką, co oznacza, że użytkownicy klawiatury, a także osoby korzystające z ekranów dotykowych, mogą nigdy jej nie zobaczyć.
• Alternatywą dla atrybutu title, może być poprawne zaimplementowanie tooltipu, który będzie odpowiadał wszystkim Użytkownikom (klawiaturowym, korzystającym z ekranu dotykowego, czytnika ekranu ale też myszki).