Audyt dostępności cyfrowej WCAG i poprawki w kodzie
Robimy audyt dostępności według WCAG 2.2: klawiatura, czytnik ekranu, kontrast, formularze i komunikaty błędów. Potem poprawiamy kod i przygotowujemy deklarację dostępności, jeśli Twój serwis jej wymaga.
Czym jest dostępność cyfrowa
To takie zbudowanie serwisu, żeby korzystały z niego także osoby niewidome, niedowidzące, poruszające się tylko klawiaturą albo z niepełnosprawnością ruchową. Punktem odniesienia jest standard WCAG 2.2 na poziomie AA. Porządkuje on wymagania w cztery zasady.
Postrzegalność
- Teksty alternatywne (1.1.1)
- Kontrast co najmniej 4,5:1
- Powiększenie tekstu do 200%
Funkcjonalność
- Obsługa klawiaturą (2.1.1)
- Widoczny fokus (2.4.7)
- Cel dotyku co najmniej 24 na 24 piksele (2.5.8), nowe w WCAG 2.2
- Fokus niezasłonięty (2.4.11), nowe w WCAG 2.2
Zrozumiałość
- Etykiety i instrukcje (3.3.2)
- Identyfikacja błędów (3.3.1)
- Logowanie bez zagadek (3.3.8), nowe w WCAG 2.2
Solidność
- Nazwa, rola i wartość elementów (4.1.2)
4.1.1 Parsowanie: przestarzałe i usunięte z WCAG 2.2
Kogo dotyczą przepisy
Zakres zależy od rodzaju działalności, więc sprawdzamy go na początku. To nie jest porada prawna, tylko punkt wyjścia do rozmowy.
Ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej
- Podmioty publiczneStrona i aplikacje dostępne oraz deklaracja dostępności.
Ustawa z 26 kwietnia 2024 r. o zapewnianiu dostępności niektórych produktów i usług
- Sklepy internetoweUsługi handlu elektronicznego dla konsumentów.
- Bankowość, e-booki, transport osóbUsługi i powiązane strony oraz aplikacje.
Test ręczny, narzędzie i nakładka
Trzy rzeczy, które często traktuje się zamiennie. Nakładki nie naprawiają kodu strony, a czytniki ekranu korzystają z kodu, nie z nakładki. Audyt robimy ręcznie, z czytnikiem ekranu i samą klawiaturą, i uzupełniamy go narzędziami automatycznymi, które wyłapują tylko część problemów.
- Całe ścieżki, od początku do końca
- Fokus i kolejność
- Komunikaty błędów
- Kontrast i powiększenie
- Nagłówki i struktura strony
- Teksty alternatywne i opisy
Jedno pole formularza przed i po
Najczęstszy problem w sklepach i panelach: błąd widać tylko po kolorze, a czytnik ekranu nic nie słyszy.
- 1.4.1Podpowiedź zamiast etykietyPodpowiedź w polu znika przy pisaniu i nie zastępuje etykiety, a sam kolor ramki nie może mówić o błędzie.
- 3.3.2Etykieta powiązana z polemEtykieta powiązana z polem, odczytywana przez czytnik ekranu.
- 1.3.5AutouzupełnianiePole mówi przeglądarce, że czeka na adres e-mail, więc przeglądarka wpisze go sama, co pomaga osobom z trudnościami motorycznymi.
- 3.3.1Błąd opisany słowamiBłąd opisany słowami i ogłoszony przez czytnik w chwili pojawienia się.
Jak wygląda wpis w raporcie
Jedno naruszenie z raportu i to, co oznacza każda jego część.
- blokuje
- 3
- utrudnia
- 9
- drobne
- 3
- Kryterium
- 2.1.1 Klawiatura, poziom A
- Priorytet
- Blokuje zakup
- MiejsceWybór metody dostawyMiejsce w ścieżce, a nie tylko adres strony, żeby było jasne, który element poprawić.
- ProblemKafelki dostawy nie przyjmują fokusuOpis problemu z kryterium WCAG, do którego się odnosi.
- SkutekOsoba bez myszy nie złoży zamówieniaSkutek dla użytkownika decyduje o priorytecie.
- PoprawkaPrzyciski radiowe ze stylem kafelkówKonkretna zmiana w kodzie, najczęściej bez zmiany wyglądu.
- Ponowny testŚcieżka przechodzona klawiaturą i czytnikiemPo poprawkach przechodzimy ścieżkę jeszcze raz.
W raporcie każde naruszenie ma też zrzut ekranu.
Jak przebiega audyt dostępności
Od wyboru stron do testu po poprawkach, tak samo dla serwisu, który musi spełniać WCAG, i dla takiego, który po prostu chce obsłużyć każdego klienta.
- Wybór stron i ścieżekWybieramy reprezentatywne typy stron i najważniejsze ścieżki, na przykład zakup albo rejestrację.Dostajesz: Wycena i termin
- Testy ręcznePrzechodzimy ścieżki samą klawiaturą i z czytnikiem ekranu, sprawdzamy kontrast i powiększenie do 200%.Dostajesz: Lista naruszeń w ścieżkach
- Testy automatyczneNarzędzia sprawdzają resztę stron: brakujące etykiety i opisy, strukturę nagłówków i opisy elementów dla czytnika ekranu.Dostajesz: Uzupełnienie listy
- RaportKażde naruszenie z kryterium WCAG 2.2, miejscem i zrzutem oraz sposobem poprawy. Miejsce wskazujemy w ścieżce, a nie tylko adresem strony.Dostajesz: Raport z priorytetami
- Poprawki i ponowny testPoprawiamy kod, testujemy ścieżki jeszcze raz i, jeśli trzeba, przygotowujemy deklarację dostępności. Redakcji pokazujemy, jak dodawać zdjęcia, tabele i dokumenty, żeby serwis nie tracił dostępności z czasem.Dostajesz: Serwis po poprawkach i deklaracja
Nowy projekt czy istniejący serwis
Dla serwisów, które muszą spełniać WCAG, i dla tych, które po prostu chcą obsłużyć każdego klienta.
Nowy projekt
- Strona, sklep albo panel dopiero powstaje.
- Chcesz uniknąć poprawek po fakcie.
- Komponenty, kolory i formularze projektowane pod WCAG
- Serwis dostępny od pierwszej wersji
Dostępność zaplanowana od początku: komponenty, kolory i formularze projektowane pod WCAG.
Istniejący serwis
- Sklep, usługa cyfrowa albo strona instytucji już działa.
- Potrzebujesz deklaracji dostępności.
- Audyt
- Raport z priorytetami
- Poprawki w kodzie
- Ponowny test
- Deklaracja dostępności
Audyt, raport z priorytetami, poprawki w kodzie i ponowny test. Audyt idzie pięcioma krokami opisanymi wyżej, a deklarację przygotowujemy po poprawkach.
Najczęstsze pytania o dostępność cyfrową
Odpowiedzi o przepisach, audycie i deklaracji dostępności.
Czytaj dalej
Nasz artykuł o przepisach i WCAG 2.2, poradnik o deklaracji dostępności i usługi, które często idą razem z audytem.
Chcesz sprawdzić dostępność serwisu?
Napisz adres serwisu i czy potrzebujesz deklaracji dostępności. Odpowiemy w godzinę z pytaniami i wyceną audytu.