WCAG 2.2 na stronie firmy: kryteria, które najczęściej nie są spełnione

Czym jest WCAG 2.2 i co oznacza poziom AA

WCAG to wytyczne dostępności treści internetowych opracowane przez konsorcjum W3C, czyli organizację, która tworzy standardy sieci. Wersja 2.2 jest obecnie najnowszą i to z niej W3C zaleca korzystać. Jak podaje przegląd standardu na stronie W3C, wytyczne są ułożone wokół czterech zasad: treść ma być postrzegalna, funkcjonalna, zrozumiała i solidna. W wersji 2.2 jest 13 wytycznych, a każda z nich zawiera sprawdzalne kryteria sukcesu przypisane do jednego z trzech poziomów: A, AA lub AAA.

Poziom AA jest tym, do którego najczęściej odwołują się umowy na budowę stron i wymagania zamawiających. Często umyka przy tym jedna rzecz: spełnienie poziomu AA oznacza spełnienie wszystkich kryteriów z poziomu A oraz wszystkich z poziomu AA. Dlatego w tym zestawieniu znajdują się także kryteria oznaczone literą A, na przykład opisy grafik czy etykiety pól. Bez nich strona nie osiąga poziomu AA, nawet jeśli kolory i wielkości przycisków są dopracowane.

Wersja 2.2 jest zgodna wstecz: według W3C treść, która spełnia jej wymagania, spełnia także wymagania wersji 2.1 i 2.0. Z opisu zmian w wersji 2.2 wynika, że doszło dziewięć nowych kryteriów, a jedno starsze, dotyczące poprawności składni kodu, zostało usunięte jako przestarzałe. Dwa z nowych kryteriów omawiamy niżej, bo dotyczą niemal każdej strony firmy: rozmiar celu dotyku oraz fokus, którego nie zasłaniają inne elementy.

Tego, które firmy mają prawny obowiązek zapewnienia dostępności, tutaj nie rozstrzygamy. Opisujemy to osobno we wpisie o tym, kogo obowiązuje dostępność cyfrowa strony, a w sprawach indywidualnych warto zapytać prawnika. Tutaj skupiamy się na stronie technicznej: co dokładnie mówi kryterium i jak wygląda jego naruszenie.

Kontrast tekstu i elementów interfejsu: jakie wartości są wymagane

Kryterium 1.4.3 wymaga, aby tekst i obrazy tekstu miały kontrast z tłem co najmniej 4,5:1. Dla dużego tekstu próg wynosi 3:1. Dokumentacja tego kryterium określa duży tekst jako co najmniej 18 punktów albo 14 punktów przy pogrubieniu, co według podanego tam przelicznika odpowiada 24 pikselom oraz około 18,5 piksela.

Współczynnik kontrastu liczy się ze względnej jasności obu kolorów według wzoru podanego w standardzie, dlatego nie da się go ocenić na oko. Wartości są progami i nie podlegają zaokrągleniu: dokumentacja podaje wprost, że wynik 4,499:1 nie spełnia wymagania 4,5:1. Kolor, który "prawie przechodzi", trzeba więc przyciemnić.

Przykład błędu i poprawnego rozwiązania

Typowe naruszenie na stronie gabinetu, kancelarii czy firmy remontowej to jasnoszary tekst akapitów na białym tle, bo projekt miał wyglądać "lekko". Drugie, równie częste, to biały napis umieszczony bezpośrednio na zdjęciu w górnej części strony głównej. W3C wymienia to jako osobny błąd: użycie obrazu tła, który nie zapewnia wystarczającego kontrastu z tekstem. Zdjęcie ma miejsca jasne i ciemne, więc część liter staje się nieczytelna.

Poprawne rozwiązanie to ciemniejszy kolor tekstu dobrany przez pomiar oraz jednolita, półprzezroczysta warstwa między zdjęciem a napisem, która daje stały kolor tła pod literami. Dokumentacja przypomina też, że wymaganie obejmuje tekst podpowiedzi w polu formularza oraz tekst widoczny po najechaniu kursorem i po ustawieniu fokusu. Wyjątki są wąskie: tekst w nieaktywnym elemencie interfejsu, tekst czysto ozdobny lub niewidoczny oraz logotypy.

Ramki pól, ikony i wykresy

Osobne kryterium 1.4.11 obejmuje to, co nie jest tekstem. Elementy interfejsu oraz części grafik potrzebne do zrozumienia treści mają mieć kontrast co najmniej 3:1 z sąsiednimi kolorami. Opis kryterium 1.4.11 podaje konkretne przykłady: ramka pola w kolorze #767676 na białym tle spełnia wymaganie, natomiast ramka pola wyboru w kolorze #9D9D9D na białym tle daje 2,7:1 i go nie spełnia. Jako błąd wskazano też ocenę gwiazdkową w jasnożółtym kolorze na białym tle, z wynikiem 1,2:1.

Na stronach firmowych problem dotyczy przede wszystkim formularzy. Jeżeli jedynym sygnałem, że w danym miejscu jest pole, pozostaje cienka jasnoszara ramka, osoba słabowidząca może go nie zauważyć. Rozwiązaniem jest ciemniejsza ramka albo wyraźne tło pola.

Opisy grafik: kiedy tekst alternatywny jest potrzebny, a kiedy ma być pusty

Kryterium 1.1.1 wymaga, aby każda treść nietekstowa miała tekstowy odpowiednik, który pełni tę samą funkcję. W przypadku grafik oznacza to atrybut alt, czyli tekst odczytywany przez czytnik ekranu (program, który czyta zawartość strony na głos). Kryterium ma poziom A, więc jest podstawą każdej oceny dostępności.

Dokumentacja kryterium 1.1.1 wymienia błędy, które na stronach firm powtarzają się nieustannie. Pierwszy to pominięcie atrybutu alt. Drugi to wpisanie w nim czegoś, co nie jest odpowiednikiem obrazu, na przykład nazwy pliku. Trzeci to przekazywanie ważnej informacji wyłącznie przez obraz tła ustawiony w arkuszu stylów. Czwarty działa w drugą stronę: grafika ozdobna, którą czytnik powinien pominąć, dostaje opis i tylko wydłuża słuchanie strony.

Jak dobrać opis do roli grafiki

W3C udostępnia drzewo decyzyjne dla atrybutu alt, które prowadzi przez kilka pytań. Jeżeli obraz zawiera tekst, którego nie ma nigdzie indziej na stronie, opis powinien ten tekst powtórzyć. Jeżeli obraz jest odnośnikiem lub przyciskiem, opis ma mówić, dokąd prowadzi odnośnik albo jaką czynność wykonuje przycisk, a nie jak wygląda ikona. Jeżeli obraz wnosi znaczenie do treści, potrzebny jest krótki opis tego znaczenia, a przy wykresach i złożonych schematach informacja powinna znaleźć się w tekście strony. Jeżeli obraz jest wyłącznie ozdobą albo powtarza tekst stojący obok, atrybut alt zostaje pusty.

Pusty atrybut to nie to samo co jego brak. Pusty jest informacją dla czytnika, że obraz można pominąć. Brak atrybutu W3C zalicza do błędów.

<!-- Błąd: brak atrybutu alt -->
<img src="IMG_4821.jpg">

<!-- Błąd: nazwa pliku w miejscu opisu -->
<img src="baner-glowna.jpg" alt="baner-glowna.jpg">

<!-- Poprawnie: zdjęcie wnosi treść, opis mówi, co przedstawia -->
<img src="stanowisko.jpg" alt="Mechanik wymienia klocki hamulcowe w aucie na podnośniku">

<!-- Poprawnie: ikona jest odnośnikiem, opis podaje cel -->
<a href="/kontakt/"><img src="sluchawka.svg" alt="Kontakt z warsztatem"></a>

<!-- Poprawnie: ozdobny separator, pusty atrybut -->
<img src="falka.svg" alt="">

Przykład z życia: sklep z Poznania umieszcza na stronie głównej baner z terminem dostawy i kodem rabatowym, w całości zapisany w obrazie. Osoba korzystająca z czytnika nie dowie się o promocji, jeżeli opis brzmi "baner". Poprawny opis powtarza treść baneru, a jeszcze lepszym rozwiązaniem jest zapisanie tej informacji zwykłym tekstem nałożonym na tło.

Automat potrafi stwierdzić tylko to, czy atrybut istnieje. W materiale W3C o wstępnej ocenie dostępności podkreślono, że ocena, czy opis jest odpowiedni, wymaga człowieka. Dobre opisy wspierają przy okazji pozycjonowanie grafiki, ale ich pierwszym zadaniem jest przekazanie treści osobie, która obrazu nie widzi.

Etykiety pól formularza: dlaczego sama podpowiedź w polu nie wystarcza

Kryterium 3.3.2 wymaga, aby wszędzie tam, gdzie użytkownik coś wpisuje lub wybiera, była etykieta albo instrukcja. Dotyczy to pól obowiązkowych i nieobowiązkowych. Powiązane kryterium 1.3.1 dodaje drugi warunek: etykieta ma być połączona z polem w kodzie, tak aby czytnik ekranu mógł ją odczytać razem z polem.

W opisie kryterium 3.3.2 znajdują się przykłady dobrych praktyk: pole daty z podanym obok oczekiwanym formatem oraz osobne pola na imię i nazwisko zamiast jednego ogólnego. Dokumentacja przestrzega zarazem przed nadmiarem: zbyt wiele objaśnień utrudnia wypełnienie formularza tak samo jak ich brak.

Przykład błędu i poprawnego rozwiązania

Najczęstszy błąd na stronach firm to formularz, w którym nazwa pola istnieje tylko jako szara podpowiedź wewnątrz pola. Z naszej praktyki wynika, że taki układ jest wybierany dla oszczędności miejsca. Podpowiedź znika jednak po rozpoczęciu pisania, więc osoba, która wraca do formularza po chwili, nie widzi już, co oznacza które pole. Do tego dochodzi kontrast: tekst podpowiedzi podlega wymaganiu 4,5:1.

Poprawne rozwiązanie opisuje samouczek W3C o etykietach. Zaleca on użycie elementu label wszędzie, gdzie to możliwe, i połączenie go z polem: wartość atrybutu for w etykiecie musi dokładnie odpowiadać wartości atrybutu id pola. Można też umieścić pole wewnątrz elementu label, jednak według samouczka jawne powiązanie jest na ogół lepiej obsługiwane przez technologie wspomagające.

<!-- Błąd: jedynym opisem jest znikająca podpowiedź -->
<input type="email" name="email" placeholder="Adres e-mail">

<!-- Poprawnie: widoczna etykieta połączona z polem -->
<label for="email">Adres e-mail</label>
<input type="email" name="email" id="email">

<!-- Poprawnie: pole wyboru z połączoną etykietą -->
<input type="checkbox" name="zgoda" id="zgoda">
<label for="zgoda">Zgoda na kontakt telefoniczny</label>

Bywa, że widoczna etykieta nie jest potrzebna, na przykład przy polu wyszukiwarki z przyciskiem obok. Samouczek dopuszcza wtedy etykietę ukrytą wizualnie albo atrybut aria-label, zastrzega jednak, że nie wolno jej ukrywać właściwościami, które chowają treść także przed technologiami wspomagającymi, takimi jak display: none.

Osobną sprawą są pola obowiązkowe. Dokumentacja kryterium 1.3.1 podaje przykład formularza, w którym mają one czerwone etykiety i gwiazdkę, a instrukcja nad formularzem wyjaśnia tę konwencję. O liczbie pól i komunikatach o błędach piszemy we wpisie o formularzu kontaktowym.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Kolejność nagłówków: jak powinna wyglądać struktura strony

Nagłówki mają być zapisane w kodzie jako nagłówki i układać się w logiczną hierarchię od h1 w dół. Wynika to z dwóch kryteriów. Kryterium 1.3.1 wymaga, aby struktura widoczna na ekranie była możliwa do odczytania przez program, a kryterium 2.4.6 wymaga, aby nagłówki opisywały temat lub cel fragmentu, który otwierają.

Jeżeli tytuły sekcji są jedynie powiększonym, pogrubionym akapitem, czytnik ekranu nie rozpozna ich jako nagłówków. Dokumentacja kryterium 1.3.1 nazywa ten błąd wprost: przekazywanie informacji zmianą wyglądu tekstu bez odpowiedniego znacznika. Wymienia też błąd odwrotny, czyli użycie znaczników struktury w sposób, który nie oddaje rzeczywistych relacji w treści. Tak dzieje się, gdy ktoś wybiera h4 dla hasła reklamowego tylko dlatego, że ma odpowiednią wielkość liter.

Czy wolno pomijać poziomy

Samouczek W3C o nagłówkach wyjaśnia, że nagłówek równej lub wyższej rangi otwiera nową sekcję, a nagłówek niższej rangi rozpoczyna podsekcję. Pomijanie poziomów, na przykład przejście z h2 od razu do h4, samouczek określa jako mylące i zaleca, aby unikać go tam, gdzie to możliwe. Dopuszczalne jest natomiast przejście w górę przy zamykaniu podsekcji, czyli na przykład h2 po h4.

Kryterium 2.4.6 nie nakazuje przy tym, aby nagłówki w ogóle występowały. Mówi tylko, że jeżeli są, mają być opisowe. Nagłówek "Oferta" nad listą usług jest więc poprawny, a nagłówek "Więcej" już nie, bo po wyjęciu z kontekstu nic nie mówi.

<!-- Błąd: wygląd zamiast struktury, pominięte poziomy -->
<p class="duzy-pogrubiony">Kancelaria prawa pracy</p>
<h4>Działamy skutecznie</h4>
<h2>Więcej</h2>

<!-- Poprawnie: jeden główny nagłówek i kolejne poziomy -->
<h1>Kancelaria prawa pracy w Krakowie</h1>
  <h2>Zakres pomocy dla pracowników</h2>
    <h3>Odwołanie od wypowiedzenia</h3>
    <h3>Zaległe wynagrodzenie</h3>
  <h2>Zakres pomocy dla pracodawców</h2>

Uporządkowane nagłówki ułatwiają lekturę wszystkim, a o taki sam porządek dbamy przy SEO technicznym.

Widoczny fokus: skąd wiadomo, gdzie jest klawiatura

Fokus to wskaźnik pokazujący, który element strony jest w danej chwili aktywny dla klawiatury. Kryterium 2.4.7 wymaga, aby każdy interfejs obsługiwany klawiaturą miał tryb, w którym ten wskaźnik jest widoczny. Bez niego osoba, która porusza się po stronie klawiszem Tab, bo nie może używać myszy, nie wie, w który odnośnik za chwilę wejdzie.

Problem powstaje zwykle wtedy, gdy autor szablonu usuwa wskaźnik, ponieważ nie pasował do projektu. Dokumentacja kryterium 2.4.7 wymienia dwa błędy: takie ostylowanie obrysów i ramek, że wskaźnik fokusu znika lub staje się niewidoczny, oraz użycie skryptu, który odbiera fokus elementowi w chwili, gdy ten go otrzymuje. Wskaźnik nie może też znikać po upływie określonego czasu.

/* Błąd: wskaźnik usunięty dla całej strony, bez zamiennika */
*:focus { outline: none; }

/* Poprawnie: wyraźny obrys w kolorze kontrastującym z tłem */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Poprawnie: miejsce na przyklejony nagłówek o wysokości 80 pikseli */
html { scroll-padding-top: 96px; }

Kolor obrysu należy dobrać do tła: wskaźnik fokusu podlega opisanemu wcześniej kryterium 1.4.11, czyli potrzebuje kontrastu co najmniej 3:1 z sąsiednim tłem.

Fokus, którego nic nie zasłania

Wersja 2.2 dodała kryterium 2.4.11: element, który otrzymał fokus, nie może być w całości zakryty przez inną treść umieszczoną przez autora strony. Częściowe zasłonięcie jest na poziomie AA dopuszczalne. Opis kryterium 2.4.11 podaje przykłady dobrze znane ze stron firm: przyklejony nagłówek lub stopkę oraz baner zgody na pliki cookie. Baner zajmujący całą szerokość, który trzeba zamknąć, zanim da się przejść dalej, spełnia wymaganie. Baner przyklejony do krawędzi ekranu, który pozwala poruszać się po stronie i całkowicie zakrywa aktywny odnośnik, już nie.

Jako sposób naprawy dokumentacja wskazuje właściwość scroll-padding w arkuszu stylów, widoczną w ostatniej regule przykładu, dzięki której przyklejony pasek nie przykrywa aktywnego elementu.

Rozmiar celu dotyku: ile miejsca potrzebuje przycisk

Kryterium 2.5.8, nowe w wersji 2.2, wymaga, aby cel wskaźnika, czyli obszar reagujący na kliknięcie lub dotknięcie, miał co najmniej 24 na 24 piksele CSS. Piksel CSS to jednostka używana w arkuszach stylów. Na wymaganiu korzystają osoby z ograniczoną precyzją ruchów, a w praktyce każdy, kto obsługuje stronę kciukiem w tramwaju.

Dokumentacja kryterium 2.5.8 przewiduje pięć wyjątków. Mniejszy cel jest dopuszczalny, gdy ma wystarczający odstęp: okrąg o średnicy 24 pikseli CSS wyśrodkowany na każdym celu nie może przecinać innego celu ani okręgu innego zbyt małego celu. Wymaganie nie obejmuje odnośników w zdaniu, elementów, których rozmiar ustala przeglądarka, elementów, których funkcja jest dostępna na tej samej stronie przez inny, wystarczająco duży element, oraz sytuacji, w których określony rozmiar jest istotny dla treści, jak gęsto ułożone znaczniki na mapie.

Dokumentacja podaje proste przykłady. Trzy przyciski o wymiarach 24 na 24 piksele CSS stojące obok siebie bez odstępów spełniają wymaganie. Rząd przycisków o wysokości 20 pikseli CSS z marginesem 4 pikseli nad i pod każdym z nich także je spełnia.

Przykład błędu i poprawnego rozwiązania

Na stronach firm kryterium najczęściej naruszają drobne elementy: ikony mediów społecznościowych w stopce ustawione jedna przy drugiej, krzyżyk zamykający okno z promocją, kropki przełączające slajdy oraz numery stron na liście wpisów. Hydraulik z Łodzi, który ma w nagłówku małą ikonę słuchawki zamiast wyraźnego numeru telefonu, utrudnia kontakt osobom, którym trudno w nią trafić.

/* Błąd: ikony 16 na 16 pikseli, bez odstępów */
.stopka-ikony a { width: 16px; height: 16px; margin: 0; }

/* Poprawnie: obszar kliknięcia większy niż sam rysunek ikony */
.stopka-ikony a {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  padding: 8px;
  margin-right: 8px;
}

Rysunek ikony nie musi być większy, wystarczy powiększyć obszar, który reaguje na dotyk. Szerzej o układzie elementów na małym ekranie piszemy we wpisie o projektowaniu wersji mobilnej strony.

Jak sprawdzić własną stronę: test automatyczny i przegląd ręczny

Pierwszą ocenę można wykonać samodzielnie, łącząc test automatyczny z przejściem strony klawiaturą. Dostępne bez opłat narzędzie PageSpeed Insights analizuje stronę za pomocą Lighthouse i, jak podaje opis narzędzia, przedstawia wyniki w czterech kategoriach: wydajność, dostępność, sprawdzone metody i SEO. Wystarczy wpisać adres strony w pole na ekranie startowym i uruchomić analizę przyciskiem obok.

Wynik warto czytać ze zrozumieniem tego, jak powstaje. Według dokumentacji Lighthouse jest to średnia ważona wszystkich audytów dostępności, a każdy audyt kończy się wynikiem zaliczonym albo niezaliczonym, bez punktów cząstkowych. Jeżeli więc etykiety brakuje przy jednym polu, cały audyt etykiet jest niezaliczony. Wśród audytów znajdują się między innymi: "Kolory tła i pierwszego planu mają wystarczający współczynnik kontrastu", "Elementy graficzne mają atrybuty [alt]", "Z elementami formularzy są powiązane etykiety" oraz "Elementy nagłówków pojawiają się w kolejności malejącej".

Wysoki wynik nie oznacza zgodności z WCAG. Dokumentacja Lighthouse wymienia osobną listę kontroli ręcznych, na przykład logiczną kolejność przechodzenia klawiszem Tab, które nie wpływają na liczbę punktów. W3C ujmuje to jeszcze ostrożniej: strona może pozornie przejść proste testy, a mimo to zawierać poważne bariery. Dlatego test automatyczny trzeba uzupełnić przeglądem ręcznym.

1. Przejście strony klawiaturą

   Po odłożeniu myszy należy przejść klawiszem Tab przez stronę główną, ofertę i formularz. Każdy odnośnik i przycisk powinien być osiągalny, kolejność logiczna, a wskaźnik fokusu stale widoczny.

2. Pomiar kontrastu

   Raport Lighthouse wskazuje elementy poniżej progu. Osobno trzeba ocenić napisy umieszczone na zdjęciach.

3. Przegląd opisów grafik

   Przy każdej grafice należy zadać pytanie z drzewa decyzyjnego W3C: czy obraz niesie treść, pełni funkcję, czy jest ozdobą.

4. Lista nagłówków

   Wypisanie samych nagłówków strony pokazuje, czy tworzą czytelny spis treści i czy nie brakuje poziomów.

5. Formularz i elementy dotykowe na telefonie

   Na telefonie warto wypełnić formularz, zamknąć baner i wybrać pozycję z menu, zwracając uwagę, czy w małe elementy da się trafić za pierwszym razem.

Od czego zacząć poprawki i kiedy potrzebna jest pomoc

Naprawy najlepiej zacząć od elementów wspólnych dla całego serwisu, czyli nagłówka, menu, stopki, formularza i palety kolorów, ponieważ jedna zmiana w szablonie poprawia wtedy wszystkie podstrony naraz. Dopiero potem warto przejść do treści: opisów grafik i nagłówków w poszczególnych wpisach i ofertach. Opisy i poziomy nagłówków zwykle da się uzupełnić w panelu systemu zarządzania treścią, natomiast kolory, style fokusu, rozmiary przycisków i powiązanie etykiet z polami wymagają zmian w szablonie, więc jest to zadanie dla wykonawcy strony.

• Tekst akapitów, przycisków i podpowiedzi w polach ma kontrast co najmniej 4,5:1, a duży tekst co najmniej 3:1.
• Ramki pól, ikony pełniące funkcję i wskaźnik fokusu mają kontrast co najmniej 3:1 z tłem.
• Każda grafika ma atrybut alt: opisowy, gdy niesie treść lub jest odnośnikiem, pusty, gdy jest ozdobą.
• Każde pole formularza ma etykietę połączoną z nim w kodzie.
• Strona ma główny nagłówek, a kolejne poziomy nie są pomijane ani dobierane według wielkości liter.
• Wskaźnik fokusu jest widoczny i nie chowa się pod przyklejonym paskiem ani banerem.
• Elementy klikalne mają co najmniej 24 na 24 piksele CSS albo odpowiedni odstęp.

Pomoc specjalisty jest potrzebna w trzech sytuacjach. Pierwsza to strona z rozbudowanymi elementami interaktywnymi, takimi jak konfigurator, koszyk czy rezerwacja terminu, gdzie proste testy pokazują niewielką część problemów. Druga to konieczność formalnego potwierdzenia zgodności, które wymaga pełnej oceny według wszystkich kryteriów, a nie tylko opisanych tutaj. Trzecia to przebudowa serwisu: wymagania dostępności warto wówczas zapisać w zamówieniu i uwzględnić już na etapie projektowania UX, bo zmiana kolorów i układu w gotowej stronie firmowej kosztuje więcej pracy niż dobre założenia na początku.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl