9 rzeczy, które możesz sprawdzić nie znając się na dostępności

Test 1: Sprawdź powiększenie tekstu do 200%

Używając dowolnej przeglądarki internetowej powiększ tekst na stronie do 200% i sprawdź czy treść na stronie jest nadal czytelna.

Naturalnie wszelkie rozjazdy tekstu, nachodzenie na siebie treści lub nagłe jej ukrycie po powiększeniu związane jest z faktem, że strona nie została przygotowana zgodnie z wymaganiem WCAG 1.4.4 Resize text.

Test 2: Sprawdź możliwość poruszania się pod stronie za pomocą klawiatury

Sprawdź czy do wszystkich pół formularzy (list rozwijalnych, opcji wyboru, pól wprowadzania danych) oraz linków można „dostać” się za pomocą klawisza TAB.

Nie możesz? No cóż wysoce prawdopodobnie jest, że strona nie jest zgodna z wymaganiem 2.1.1: Keyboard

Test 3: Sprawdź widoczność fokusa

Przechodzisz klawiszem TAB po stronie, ale nie widzisz gdzie jesteś? Oj, to najprawdopodobniej strona na której jesteś nie jest zgodna z wymaganiem 2.4.7: Focus Visible.

Test 4: Sprawdź czy pola formularza używają placeholderów?

Twój formularz używa podpowiedzi w polach w postaci placeholderów (tekstów zastępczych). Super! Wstaw do wszystkich pól używających placeholdera tylko po jednej literze. Placeholder-y znikną, a ty zostaniesz z listą pól, do których będziesz musiał/a wprowadzić poprawne dane. Zastanawiasz się do jakiego pola miałeś wpisać imię lub nazwisko, adres email lub telefon. Nie pamiętasz, cóż to nie twoja wina, po prostu strona nie spełnia wymagania 2.4.6: Headings and Labels. Placeholdery mają także jedna bardzo ważną wadę. Nie spełniają normy WCAG pod kątem kontrastu.

Test 5: Sprawdź kolory na stronie

A propos kontrastów i samych kolorów. Zapewne widzieliście strony lub ich fragmenty, które posiadały białe tło i jasno szary tekst lub inny zestaw kolorów, który uniemożliwiał swobodne przeczytanie tegoż tekstu. A może miałeś/aś problem z przeczytaniem czegoś czego tłem jest obraz?

To typowe dla stron, które nie spełniają kontrastu minimalnego opisanego w wymaganiu 1.4.3: Contrast (Minimum). Jak to sprawdzić? Narzędzi jest mnóstwo, ale najprostszymi i darmowymi są CCA (Color Contrast Analyser) oraz Wave. Uruchom je, a zdziwisz się jak dużo błędów związanych z kontrastem odnajdziesz. Z resztą nie tylko związanych z kontrastem.

Test 6: Sprawdź czy linki wyróżniają się z tekstu i są klarowne?

Nie podkreślasz linków w tekście, tylko rozróżniasz je kolorem. W porządku powiedz to daltoniście, który ma problem z odróżnieniem kolorów. Może się okazać, że nie zauważy różnicy co jest tekstem, a co linkiem.

Jak to sprawdzić? Ponownie użyj programu CCA i zasymuluj widok strony w skali szarości lub jeśli masz dostęp do kodu dodaj na początku twojej strony w tagu 'html' następujący ciąg znaków: style="filter:saturate(0%)", a stanie się magia. Twoja strona zmieni tymczasowo wygląd, a wszystkie twoje kolory znikną.

Czy jesteś teraz w stanie odróżnić co jest linkiem, a co zwykłym tekstem? Nie, to dlatego że strona nie spełnia wymagania 1.4.1 Use of Color.

Pozostając przy linkach czy mówi Ci coś nazwa: ‘Aby obejrzeć szczegóły kliknij tutaj’ lub ‘Czytaj więcej’? Ok w kontekście otaczającego ją tekstu dla osoby widzącej może jeszcze jest to do zrozumienia, ale co ma powiedzieć osoba niewidoma lub niedowidząca używająca czytnika ekranowego.

Pewnie się podda i zrezygnuje z nawigacji, gdyż nie wie w jaki link klika i gdzie ją to doprowadzi, a to dlatego że tak sformułowane linki nie są dla niej zrozumiałe i niezgodne z wymaganiem 2.4.9 Cel linku.

Test 7: Nic nie dzieje się z automatu lub można to zatrzymać

Wkurzają was na stronach automatycznie uruchamiające się rzeczy, wyskakujące okna lub szybko przewijane karuzele zdjęć? Są one równie irytujące dla osób niepełnosprawnych, które nierzadko powiększają stronę lub używają technologii asystujących do ich odczytywania. Każda taka zmiana na stronie wiąże się z tym, że za każdym razem czytnik ekranu lub inny program do odczytu treści, będzie się starał anonsować taką zmianę. To teraz wyobraźcie sobie, że robi to co kilka sekund, gdyż co kilka sekund zmienia się treść na stronie. Co kilka sekund czytnik stara się nadążyć za zmieniającą się treścią na stronie, osoba niepełnosprawna lub nawet przeciętna, cierpiąca na pewnego rodzaju dysfunkcje - nie nadąży.

Mało tego wyobraźcie sobie osobę, która aby przeczytać tekst lub obejrzeć zdjęcie musi powiększyć stronę do 400 lub 800%, a by przeczytać jej fragment. Jaki będzie jej poziom frustracji w momencie gdy po kilku sekundach, ten fragment strony zmieni je się na inny? Po kilku sekundach nastąpi kolejna zmiana i kolejna i tak w kółko.

Dlatego jeśli jakąś treść na stronie nie jesteś w stanie zatrzymać, wyłączyć mechanizmu jej przewijania, odświeżania, mrugania lub auto-odtwarzania to prawdopodobnie strona nie spełnia wymagań takich jak:

• 2.2.1 – Timing Adjustable
• 2.2.2 - Pause, Stop, Hide
• 2.2.4 – Interruptions
• 1.4.7 – Low or No Background Audio
• 1.4.2 – Audio Control

Test 8: Czy strona posiada klarowne i krótkie komunikaty błędów

Wypełniasz formularz na stronie, wciskasz zapisz lub wyślij i dostajesz komunikat: „Formularz zawiera błędy. Sprawdź wprowadzone dane.”

Super komunikat jest krótki, ale czy klarowny. Jakie to są błędy? No pola z błędem oznaczone są czerwonym kolorem. Ok to w myśl wymagania 1.4.1 Use of Color jest to błędem dostępności, gdyż jako daltonista lub niewidomy mogę tego nie zobaczyć. W którym miejscu formularza popełniłem błąd? Dlaczego mam sprawdzać cały formularz, jeśli tak się dzieje to oznacza, ze strona zapewne nie spełnia wymagań:

• 3.3.1 – Error Identification
• 3.3.3 – Error Suggestion
• 3.3.4 – Error Prevention (Legal, Financial, Data)

Test 9: Sprawdź potencjalne pułapki interfejsu

Powiedzmy, że na swojej aplikacji lub stronie otwierasz okno modalne (tzw. pop-up) i wprowadzasz w nim dane. Klikasz myszką 'zamknij' lub 'zapisz' i wszystko działa.

Spróbuj to samo zrobić tylko z klawiatury. Nie możesz zamknąć okna modalnego lub zapisać wprowadzonych w nim danych to pewnie dlatego, że okno modalne nie zostało napisane z uwzględnieniem wymagania 2.1.2 – No Keyboard Trap.

Używasz w swojej aplikacji lub na stronie jednoklawiszowych skrótów klawiaturowych w stylu: H, T, M, L, F, U, C, K (zbieżność słów przypadkowa). Spoko, uruchom darmowy czytnik ekranu NVDA i sprawdź czy nie stoją one w konflikcie ze skrótami tego programu. Uruchomiłeś swój program i twoje skróty nie działają razem z czytnikiem, cóż to pewnie przez fakt, że nikt nie pomyślał o ich przemapowaniu lub wyłączeniu, co jest niezgodne z wymaganiem 2.1.4 – Character Key Shortcuts.

Szybkie testy dostępności

17 wymagań WCAG, dokładnie tyle i aż tyle wymagań jesteś w stanie sprawdzić wykonując powyższą listę szybkich sprawdzeń.

Te 9 testów można wykonać dosłownie w ciągu kilku minut, a niektóre nawet w ciągu kilku sekund i nie warto do nich pisać testów automatycznych, zresztą ciężko byłoby je zweryfikować automatem.

Powyższa lista testów nie jest tożsama z listą tzw. łatwych testów (easy checks) opublikowaną przez W3C. Jest to tylko moja sugestia i nie wyklucza stosowania innych checklist.

Zauważ, że w ciągu tych kilku, no dobrze niech nawet będzie kilkunastu minut, które poświęciłeś/poświęciłaś na weryfikację dostępności, udało Ci się zweryfikować prawie 30% wymagań opisanych w normie WCAG na poziomie AA. Czy zatem testowanie dostępności jest trudne i czasochłonne? Odpowiedź pozostawię tobie.