Jak przygotować stronę internetową pod dostępność cyfrową WCAG

Przygotowanie strony zacznij od inwentaryzacji typów widoków i zadań, które użytkownik ma wykonać, na przykład znalezienia usługi, wysłania formularza lub złożenia zamówienia. Strony z tego samego szablonu mogą mieć różne problemy, jeśli zawierają inne treści, komunikaty lub komponenty.

W3C zaleca ocenę dostępności w całym procesie rozwoju strony i wskazuje, że pojedyncze narzędzie nie rozstrzyga samodzielnie, czy serwis spełnia standardy. Wytyczne WCAG 2.2 opisują kryteria sukcesu oraz wyjaśniają ich zastosowanie.

Tabela pokazuje, które elementy mogą zatrzymać ważne zadanie użytkownika. Zacznij od ścieżek prowadzących do kontaktu, zakupu lub istotnej informacji.

Gdy zakres serwisu obejmuje wiele widoków i komponentów, audyt cyfrowy KC Mobile może pomóc uporządkować ocenę oraz wskazać obszary do poprawy.

Test klawiaturą sprawdza, czy użytkownik może dotrzeć do elementów interaktywnych i wykonać zadanie bez myszy. Otwórz stronę w przeglądarce, przechodź klawiszem Tab, cofaj się przez Shift+Tab i uruchamiaj elementy klawiszem Enter lub Spacją, zależnie od ich funkcji.

Przejdź menu, wyszukiwarkę, formularz i główną konwersję. Zapisz, czy fokus jest widoczny, czy porusza się w logicznej kolejności, czy menu można zamknąć klawiaturą i czy po błędzie da się wrócić do pola wymagającego poprawy.

Czytnik ekranu pozwala sprawdzić nazwy, role i stany elementów oraz to, czy komunikaty o wyniku działania są ogłaszane. Możesz zacząć od Narratora w Windows lub VoiceOver w systemie Apple, pamiętając, że wynik zależy także od przeglądarki i technologii strony.

Wstępne kontrole dostępności W3C obejmują między innymi klawiaturę, widoczny fokus, formularze, etykiety i błędy. Lista pomaga wykonać pierwszy przegląd, ale nie stanowi pełnej oceny zgodności.

Nagłówki powinny odzwierciedlać hierarchię treści, a nazwy linków wyjaśniać cel przejścia. Użytkownik czytnika ekranu może przeglądać linki poza kontekstem akapitu, dlatego etykieta "więcej" nie wskazuje, dokąd prowadzi.

Sprawdź, czy strona ma główny nagłówek opisujący jej temat i czy poziomy nagłówków tworzą logiczną hierarchię. Dodaj link pozwalający pominąć powtarzalny blok nawigacji, a fokus wyróżnij tak, by pozostał widoczny także na tle przyklejonego menu.

Przykłady czytelniejszych etykiet:

• Zamiast "Czytaj więcej" użyj "Poznaj zakres audytu WCAG".
• Zamiast "Kliknij tutaj" użyj "Pobierz formularz zgłoszenia".
• Zamiast "Pole 1" użyj "Adres e-mail".

Nie usuwaj obramowania fokusu bez wprowadzenia widocznego zamiennika. Nazwa, rola i stan elementu powinny odpowiadać temu, co użytkownik może z nim zrobić.

Tekst i elementy interfejsu muszą pozostać czytelne bez polegania wyłącznie na kolorze lub położeniu. W kryterium minimalnego kontrastu WCAG 2.2 W3C podaje współczynnik co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, z określonymi wyjątkami. Wyjaśnienie kryterium kontrastu W3C opisuje zakres i warunki kryterium.

Tekst alternatywny powinien przekazywać informację z obrazu, jeśli obraz wnosi treść. Grafika dekoracyjna może mieć pusty tekst alternatywny, aby czytnik ekranu ją pomijał. Nie wpisuj opisu pliku ani słów kluczowych, które nie pomagają zrozumieć obrazu.

Tabela wskazuje kontrole dla elementów wpływających na odbiór treści wzrokiem lub przy powiększeniu. Sprawdzaj kontrast i opisy w kontekście zadania, a nie wyłącznie jako wynik narzędzia.

WCAG 2.2 - nowości w standardzie opisuje kryteria dodane względem WCAG 2.1. W3C opublikowało WCAG 2.2 jako rekomendację 5 października 2023 roku.

Formularz jest łatwiejszy do obsłużenia, gdy każde pole ma zrozumiałą etykietę, instrukcje są dostępne przed wpisaniem danych, a błąd wskazuje problem i sposób jego naprawy. Placeholder nie powinien być jedyną etykietą, ponieważ znika podczas wpisywania.

Wyślij formularz z pustymi wymaganymi polami i z błędnym formatem danych. Sprawdź, czy komunikat pojawia się przy polu, czy podsumowanie błędów prowadzi do właściwych miejsc i czy po poprawieniu danych użytkownik zachowuje wcześniej wpisane wartości.

Po poprawnym wysłaniu pokaż potwierdzenie w miejscu zauważalnym dla użytkownika i udostępnij je technologii asystującej jako komunikat statusu, jeśli wymaga tego sposób działania strony. Formularz wieloetapowy powinien informować o aktualnym kroku i skutku przejścia dalej.

Dostępność sprawdź na telefonie, przy powiększeniu treści i w każdym widoku zmieniającym działanie komponentu. Menu rozwijane, okno dialogowe i formularz mogą działać inaczej na wąskim ekranie niż na komputerze.

Tabela łączy rodzaj widoku z metodą ręcznej kontroli. Testuj komponent w wariancie, w którym użytkownik z niego korzysta; wynik z komputera nie potwierdza poprawności wersji mobilnej.

W rejestrze błędów zapisz adres widoku, rozmiar ekranu, wariant komponentu, kroki odtworzenia i dowód. Jeśli komponent występuje na wielu podstronach, zapisz miejsca jego użycia i ponownie sprawdź kluczowe ścieżki po poprawce.

Warstwę poprawki ustalisz, sprawdzając, czy problem wynika z zawartości, ustawień systemu zarządzania treścią, komponentu motywu czy rozszerzenia. Przypisanie błędu do niewłaściwej warstwy prowadzi do poprawiania wielu stron, mimo że przyczyna może tkwić w jednym współdzielonym elemencie.

Tabela podpowiada właściciela na podstawie typowego źródła problemu. Potwierdź przyczynę w serwisie, zanim zlecisz zmianę; wspólny błąd w wielu widokach zwykle wymaga poprawy współdzielonego źródła.

Naprawę zaplanuj w rejestrze łączącym problem, wpływ na zadanie, właściciela, dowód przed poprawką i wynik ponownego testu. Najpierw oznacz błędy blokujące zakup, kontakt lub dostęp do ważnej informacji, a potem problemy w komponentach używanych w wielu miejscach.

Minimalny wpis rejestru powinien zawierać:

• Widok i kroki odtworzenia problemu.
• Oczekiwane i zaobserwowane zachowanie.
• Wpływ na zadanie użytkownika oraz warstwę poprawki.
• Osobę odpowiedzialną, termin i dowód poprawy.
• Wynik ponownego testu w tych samych warunkach.

Po wdrożeniu powtórz test klawiaturą i czytnikiem ekranu dla poprawionego widoku oraz innych miejsc używających tego samego komponentu. Jeśli potrzebujesz niezależnej oceny i planu napraw, zamów audyt dostępności cyfrowej dopasowany do widoków i ścieżek serwisu.

• Audyt strony mobilnej: lista kontroli UX, szybkości i konwersji
• Dostępność cyfrowa w e-commerce: EAA, szablony IdoSell i kontrola sklepu
• Jak przeprowadzić audyt lokalnej strony internetowej? Cztery obszary do sprawdzenia
• Audyt stron produktowych w e-commerce: checklista i priorytety poprawek