"Dostępna" brzmi jak cecha całej witryny. W praktyce to seria drobnych decyzji we frontendzie. Oto sześć z nich, tak jak znajdujemy je na prawdziwych stronach, i tak, jak wyglądają, gdy są zrobione dobrze.
1. Szary tekst na białym
Jak to znajdujemy. Teksty pomocnicze, ceny pod produktami i podpowiedzi przy formularzach w jasnej szarości. Wygląda spokojnie, a w projekcie na jasnym monitorze czyta się dobrze.
Jak powinno być. Tekst i tło osiągają współczynnik kontrastu 4,5:1. Dużemu tekstowi, od 24 px lub od 18,66 px pogrubionemu, wystarczy 3:1. Parę kolorów sprawdź w narzędziu do kontrastu WCAG, zanim trafi do systemu projektowego.
Kryterium. 1.4.3 Kontrast (minimalny), poziom AA.
2. Fokus jest niewidoczny
Jak to znajdujemy. W CSS jest outline: none, bo obramowanie przeszkadzało przy klikaniu. Przy myszy nikt tego nie zauważy. Kto porusza się klawiaturą, od tego miejsca nie widzi, gdzie jest.
Jak powinno być. Własny widoczny styl fokusu zamiast żadnego: wyraźne obramowanie lub pierścień odcinający się od tła, na każdym odnośniku, przycisku i polu.
Kryterium. 2.4.7 Widoczny fokus, poziom AA.
3. Pole formularza bez etykiety
Jak to znajdujemy. Pole wyszukiwania albo pole newslettera, które ma wyłącznie tekst zastępczy. Znika on przy pisaniu, a czytniki ekranu nie traktują go niezawodnie jako nazwy.
Jak powinno być. label, którego for wskazuje na id pola. Jeśli w układzie nie ma miejsca na widoczną etykietę, etykieta i tak zostaje w kodzie i jest ukryta wizualnie, a nie usunięta.
Kryterium. 3.3.2 Etykiety lub instrukcje, poziom A, razem z 4.1.2 Nazwa, rola, wartość.
4. Baner cookie, z którego fokus nie wychodzi
Jak to znajdujemy. Baner trzyma fokus, dopóki jest otwarty. To akurat jest poprawne. Błędem jest to, że jego przyciski reagują tylko na mysz: naciskasz Tab, wracasz na "Akceptuję", Enter nic nie robi i nigdy nie docierasz do strony.
Jak powinno być. Każdy przycisk w banerze działa z klawiatury, a po zamknięciu fokus wraca tam, gdzie był. Zamykanie klawiszem Escape to dodatkowo dobra praktyka.
Kryterium. 2.1.1 Klawiatura i 2.1.2 Brak pułapki klawiaturowej, oba poziom A. Dlaczego automatyczny skan tego nie znajdzie, wyjaśnia dlaczego automatyczny skan nie znajdzie pułapki klawiaturowej.
5. Obraz z błędnym tekstem alternatywnym
Jak to znajdujemy. alt="obraz", alt="foto_2024_final.jpg" albo alternatywa opisująca, co widać na zdjęciu, podczas gdy obraz jest w rzeczywistości przyciskiem.
Jak powinno być. Tekst alternatywny mówi, co obraz robi w tym miejscu. Przy obrazie-przycisku jest to akcja, a nie sceneria. Obrazy czysto dekoracyjne dostają puste alt="", żeby czytnik je pominął.
Kryterium. 1.1.1 Treść nietekstowa, poziom A.
6. Nagłówki, które tylko wyglądają na nagłówki
Jak to znajdujemy. div o rozmiarze 32 px jako tytuł strony, a pod nim prawdziwe elementy h3. Wizualnie hierarchia się zgadza, w dokumencie jej nie ma. Kto porusza się listą nagłówków, nie odnajdzie się na stronie.
Jak powinno być. Jedna h1 na stronę, pod nią h2 i h3 w kolejności wynikającej z treści. Rozmiar robi CSS, strukturę robi kod.
Kryterium. 1.3.1 Informacje i relacje, poziom A.
Co łączy tę szóstkę
Żaden z tych przypadków nie jest wyjątkiem dla małej grupy. Niewidoczny fokus dotyka każdego, kto akurat nie używa myszy. Szary tekst dotyka każdego, kto czyta w pociągu w słońcu. Brak struktury nagłówków dotyka każdego, kto porusza się po stronie według nagłówków.
I żaden z nich nie jest drogi, dopóki zostanie znaleziony w projekcie. Drogi robi się wtedy, gdy siedzi w systemie projektowym i wychodzi na wszystkie strony naraz.
Sprawdź, jak wypada Twoja strona
Bezpłatne skanowanie sprawdza stronę według zautomatyzowanych reguł WCAG 2.1 AA i pokazuje pierwsze wyniki.
Ten artykuł ma charakter informacyjny i nie stanowi porady prawnej.