7 podstawowych testów dostępności

Według WHO aż 1,3 miliarda ludzi na świecie żyje z niepełnosprawnością. To ogromna grupa potencjalnych użytkowników, którzy często napotykają bariery w korzystaniu ze stron internetowych lub aplikacji, jeśli pomijana jest w nich kwestia dostępności. Trzeba pamiętać, że niepełnosprawność może przybrać różne formy: problemy ze wzrokiem (np. ślepota, daltonizm), słuchem (np. głuchota), motoryką (np. paraliż, choroba Parkinsona), a także trudności poznawcze (np. dysleksja, ADHD). Każda z tych grup ma inne potrzeby i wymaga innego podejścia do projektowania i testowania dostępności. Co więcej, niepełnosprawność nie zawsze jest trwała. Każdy z nas może doświadczyć przejściowych trudności, takich jak złamana ręka czy infekcja oka, które utrudniają korzystanie z komputera w standardowy sposób.

Dostępność nie jest tylko domeną specjalistów. Choć istnieją testerzy, którzy w szczególny sposób skupiają się na dostępności, nie oznacza to, że reszta zespołu powinna ignorować ten temat. Tak jak każdy tester może sprawdzić podstawowe kwestie bezpieczeństwa, tak każdy może przeprowadzić proste testy dostępności. W tym wpisie przedstawiamy kilka prostych testów, które każdy tester może wykonać, aby sprawdzić, czy produkt jest przyjazny dla osób z niepełnosprawnościami. Niektóre z tych testów można nawet włączyć do standardowych procedur testowych, zmieniając jedynie sposób ich przeprowadzania (np. zamiast klikać myszką, używać tylko klawiatury).

Podczas testowania dostępności ważne jest, aby nie zakładać, że wszyscy użytkownicy korzystają z technologii w ten sam sposób. Czytniki ekranu są używane nie tylko przez osoby niewidome, ale także przez osoby z dysleksją (dla których syntezator mowy ułatwia zrozumienie tekstu) czy osoby, dla których dany język nie jest językiem ojczystym (czytnik może pomóc w tłumaczeniu).

Dostępność to nie tylko wymóg prawny czy sposób na zwiększenie ruchu na stronie. Jest to przede wszystkim kwestia etyki i dobrej praktyki, która przynosi korzyści wszystkim użytkownikom. Jasne instrukcje (np. "Kliknij tutaj, aby kontynuować"), łatwe do poprawienia formularze (np. z podpowiedziami formatu daty), czytelne układy (np. z wyraźnym kontrastem między tekstem a tłem) i transkrypcje wideo (dla osób niesłyszących) to tylko kilka przykładów tego, jak dostępność przekłada się na lepsze doświadczenia użytkowników.

1.    Link „Przeskocz do głównej zawartości” 

Ten być może niepozorny element nawigacyjny ma ogromne znaczenie dla użytkowników poruszających się po stronie za pomocą klawiatury. Pozwala im ominąć powtarzające się menu (np. na stronach rządowych, gdzie menu jest bardzo rozbudowane) i przejść bezpośrednio do głównej treści strony, oszczędzając tym samym ich czas. Z reguły taki link jest ukryty i staje się widoczny tylko po aktywacji klawiaturą (np. po naciśnięciu klawisza Tab). Pamiętaj, że „główna zawartość” to sedno strony – artykuły na blogu, produkty w sklepie, wiadomości na portalu. Link powinien prowadzić właśnie tam.

Wyobraź sobie, że musisz „przeklikać” się przez kilkadziesiąt linków menu za każdym razem, gdy chcesz coś kupić w sklepie online. Brzmi absurdalnie i bardzo utrudnia korzystanie ze strony, prawda? A jednak takie sytuacje się zdarzają, gdy brakuje linku „przeskocz do głównej zawartości”.

O czym pamiętać?

1. Zadbanie o jasną strukturę strony i o to, aby główna treść była wyraźnie wyodrębniona na każdej podstronie.
2. W przypadku rozbudowanych witryn (np. portali informacyjnych) warto rozważyć stworzenie menu z linkami do najważniejszych sekcji (np. "Sport", "Polityka", "Kultura").
3. Czasami prostsze rozwiązanie, takie jak link „przejdź do koszyka” (w sklepie internetowym), może być bardziej efektywne.

2.    Testowanie dostępności klawiatury

Czy Twoja strona działa bez myszki? To pytanie, które każdy tester oprogramowania powinien sobie zadać. Nawigacja za pomocą klawiatury to nie tylko wygoda, ale przede wszystkim konieczność dla wielu użytkowników. Osoby z niepełnosprawnościami ruchowymi (np. z porażeniem mózgowym), korzystające z czytników ekranu (gdzie myszka jest bezużyteczna) czy po prostu preferujące klawiaturę – wszyscy oni polegają na sprawnej nawigacji bez użycia myszy.

Słaba nawigacja klawiaturą jest barierą nie do pokonania dla wielu użytkowników. Co więcej, brak wyraźnego fokusu (np. niewidoczna ramka wokół aktywnego linku) utrudnia korzystanie z czytników ekranu, które informują użytkownika o aktualnie wybranym elemencie. Dobra nawigacja klawiaturą to fundament dostępności. To ona umożliwia korzystanie z innych urządzeń wspomagających, takich jak klawiatury brajlowskie czy moduły śledzenia wzroku.

Jak to przetestować?

Sprawdzamy, czy możemy dotrzeć do wszystkich elementów (np. linków, pól formularzy, przycisków), czy kolejność jest logiczna (np. od lewej do prawej, od góry do dołu), czy fokus jest widoczny i czy nie gubimy się po drodze (np. fokus nie "przeskakuje" między elementami).

Dobrym rozwiązaniem jest zorganizowanie specjalnych sesji testowych tylko z użyciem klawiatury. To nie tylko pozwoli nam wykryć problemy, ale także poprawi nasze własne umiejętności obsługi klawiatury.

O czym pamiętać?

1. Fokus powinien być widoczny na pierwszy rzut oka, bez względu na to, z jakiej przeglądarki korzystamy (Chrome, Firefox, Edge).
2. Styl fokusu powinien być jednolity na całej stronie (np. zawsze niebieska ramka).
3. Fokus powinien być nie tylko funkcjonalny, ale także dobrze wyglądać (np. kontrastować z tłem).

3.    Tekst alternatywny

Czy zastanawiałeś się kiedyś, jak osoby niewidome "widzą" obrazy w Internecie? Odpowiedź kryje się w tekście alternatywnym, czyli krótkim opisie obrazu, który jest odczytywany przez czytniki ekranu.

Tekst alternatywny to nie tylko dodatek do obrazka. Jest to brakujący element układanki dla osób, które nie mogą zobaczyć obrazu. Bez niego przekaz strony może być niepełny lub niezrozumiały. Wyobraź sobie stronę z przepisem, gdzie brakuje zdjęcia potrawy, albo artykuł o nowym samochodzie bez fotografii. Przypomina to wycięcie kluczowych fragmentów tekstu. Właśnie dlatego tak ważne jest, aby obrazy, które niosą istotne informacje, miały dobrze napisany tekst alternatywny, bo to właśnie on pozwala osobom korzystającym z czytników ekranu w pełni uczestniczyć w odbiorze treści.

O czym pamiętać?

1. Opis powinien być krótki, ale treściwy. Należy unikać długich opisów (np. "Zdjęcie przedstawia piękny zachód słońca nad morzem, z pomarańczowym niebem i fioletowymi chmurami odbijającymi się w wodzie"), które mogą utrudnić korzystanie z czytnika ekranu.
2. Warto skupić się na tym, co najważniejsze na obrazie. Jeśli to wykres (np. słupkowy), opisz trendy (np. "Wykres pokazuje wzrost sprzedaży w ciągu ostatnich 5 lat"). Jeśli to zdjęcie psa, podaj rasę i ewentualnie szczegóły, które są istotne dla kontekstu (np. "Owczarek niemiecki bawiący się piłką”).
3. Mniej znaczy więcej. Nie zaczynaj opisu od "obraz przedstawia" czy "zdjęcie". Czytnik ekranu sam poinformuje użytkownika, że to obraz.

Nie każdy obraz wymaga opisu. Obrazy czysto dekoracyjne, które nie niosą żadnych informacji i nie wnoszą niczego do treści, mogą pozostać bez tekstu alternatywnego.

Przykłady:

• zły tekst alternatywny: "Pies"
• lepszy tekst alternatywny: "Pies rasy labrador"
• najlepszy tekst alternatywny: "Szczeniak labradora bawiący się piłką na trawie"

4.    Kontrast 

Kontrast nie jest tylko kwestią ładnego wyglądu strony. To ważny element dostępności, który decyduje o tym, czy treść jest czytelna dla wszystkich użytkowników. Wyobraź sobie, że próbujesz przeczytać jasnoszary tekst na białym tle w pełnym słońcu. Jest to prawie niemożliwe, prawda? To samo dotyczy osób z wadami wzroku (np. zaćma, zwyrodnienie plamki żółtej), dla których odpowiedni kontrast jest niezbędny do komfortowego korzystania ze strony.

Kontrast to różnica w jasności między tekstem a tłem. Im większa różnica, tym łatwiej odczytać tekst. W kontekście dostępności mierzymy kontrast za pomocą współczynnika kontrastu kolorów, który określa stosunek jasności tekstu do tła.

Wytyczne WCAG (Web Content Accessibility Guidelines) określają minimalne wymagania dotyczące kontrastu dla różnych elementów strony. Dla zwykłego tekstu jest to 4,5:1, a dla dużego tekstu 3:1. Oznacza to, że tekst musi być odpowiednio ciemniejszy od tła, aby był czytelny.

Istnieje wiele narzędzi, które pomagają w testowaniu kontrastu, takich jak WAVE czy Color Contrast Analyzer. Wystarczy podać kolory tekstu i tła, a narzędzie obliczy współczynnik kontrastu i poinformuje, czy spełnia on wymagania WCAG.

O czym pamiętać?

1. Nie polegaj na własnym osądzie. Używaj narzędzi do testowania kontrastu, które są precyzyjne i obiektywne.
2. Kontrast dotyczy nie tylko tekstu, ale także elementów interfejsu, takich jak przyciski (np. "Dodaj do koszyka") czy ikony (np. koszyk, lupa). Pamiętaj więc, aby sprawdzić różne elementy.
3. Niektórzy użytkownicy mogą potrzebować wyższego kontrastu niż minimalny wymagany przez WCAG. Rozważ dodanie opcji dostosowania kontrastu na stronie (np. tryb ciemny).

5. Poziomy nagłówków

Wyobraź sobie książkę, która nie miałaby żadnych rozdziałów, akapitów ani tytułów. Jej czytanie byłoby chaotyczne i męczące, prawda? Podobnie jest ze stronami internetowymi. Poziomy nagłówków (od H1 do H6) to elementy, które nadają strukturę treści, ułatwiając nawigację i zrozumienie informacji.

Nagłówki pełnią funkcję drogowskazów, które prowadzą użytkowników przez treść strony internetowej. Bez nich mogą oni czuć się zagubieni, tracić czas na szukanie informacji i ostatecznie opuścić stronę. Dla osób korzystających z czytników ekranu nagłówki są jeszcze ważniejsze. To one pozwalają szybko zorientować się w strukturze strony i przejść do interesujących ich sekcji. Wielu z nich zaczyna przeglądanie strony od sprawdzenia nagłówków, aby zorientować się w jej zawartości.

Jak używać nagłówków?

• H1 - to główny nagłówek strony, który powinien być unikalny i odzwierciedlać jej temat (np. "Nowa kolekcja wiosna/lato 2024").
• H2 - nagłówki drugiego poziomu, które dzielą stronę na sekcje tematyczne (np. "Kurtki", "Sukienki", "Spodnie").
• H3-H6 - nagłówki niższych poziomów służące do dalszego porządkowania treści w ramach sekcji (np. "Kurtki skórzane", "Kurtki jeansowe").

Nagłówki powinny być używane hierarchicznie. Oznacza to, że nie powinno stosować się nagłówka H3 bez poprzedzającego go H2.

O czym pamiętać?

Dobrze skonstruowana struktura nagłówków poprawia nie tylko dostępność, ale także SEO (wyszukiwarki lepiej rozumieją treść) i ogólne wrażenia użytkowników. Jako przykład wzorowej struktury nagłówków często wymieniana jest strona BBC (gdzie nagłówki są czytelne i logicznie uporządkowane).

6. Charakterystyka sensoryczna

Czy Twoja strona internetowa jest zrozumiała dla każdego, niezależnie od tego, czy widzi kolory, słyszy dźwięki, czy rozpoznaje kształty? To pytanie, które warto sobie zadać, jeśli zależy Ci na prawdziwej dostępności. Kryterium sukcesu 1.3.3 WCAG 2.0, czyli "Charakterystyka sensoryczna", przypomina nam, że informacje na stronie nie powinny opierać się wyłącznie na jednym zmyśle.

W praktyce oznacza to, aby nie przekazywać istotnych informacji tylko za pomocą koloru (np. "Produkty oznaczone na zielono są dostępne, a na czerwono niedostępne"), kształtu (np. "Kliknij na trójkąt, aby rozwinąć menu"), dźwięku (np. "Usłyszysz sygnał dźwiękowy, gdy formularz zostanie wysłany") czy położenia elementów (np. "Najważniejsze informacje zawsze znajdują się w prawym górnym rogu"). Nie wolno zapominać, że osoby z różnymi niepełnosprawnościami mogą mieć trudności z odbiorem informacji prezentowanych wyłącznie za pomocą jednego zmysłu. Niektóre osoby mogą nie widzieć kolorów (np. daltoniści), inne mogą mieć problemy ze słuchem (np. osoby głuche), a jeszcze inne mogą mieć trudności z rozpoznawaniem kształtów (np. osoby z dysleksją). Dlatego ważne jest, aby informacje były dostępne w różny sposób, aby każdy mógł z nich skorzystać.

O czym pamiętać?

1. Unikaj polegania na jednym zmyśle i jeśli używasz koloru, dodaj również tekstowe etykiety (np. "Dostępne", "Niedostępne"). Jeśli używasz dźwięku, dodaj napisy lub transkrypcję.
2. Testuj w różnych warunkach i sprawdź, czy strona jest czytelna w skali szarości (np. za pomocą narzędzia do symulacji daltonizmu), aby upewnić się, że informacje nie są przekazywane wyłącznie za pomocą koloru.
3. Połącz tekst, kolor, kształt i dźwięk, aby stworzyć bogate i zrozumiałe doświadczenie dla wszystkich użytkowników (np. animacja z dźwiękiem, która ilustruje proces składania zamówienia).

7. Test powiększenia 200%

W Polsce żyje ponad 1,8 miliona osób z niepełnosprawnościami wzroku (dane na rok 2018). To ogromna grupa użytkowników, którzy mogą mieć trudności z korzystaniem z wielu stron internetowych, jeśli pomijane w nich są kwestie dostępności. 

Wielu użytkowników korzysta z funkcji powiększenia w przeglądarce (np. Ctrl + "+" lub Cmd + "+"), aby lepiej widzieć tekst i elementy na stronie. Powiększenie do 200% to standardowy test dostępności, który sprawdza, czy strona pozostaje czytelna i funkcjonalna nawet przy dużym powiększeniu. Po powiększeniu układ strony może się zmienić (np. elementy mogą się przesunąć), ale tekst i elementy nie powinny być ucięte ani nieczytelne. Wszystkie funkcje (np. linki, przyciski) powinny działać tak samo, jak przy standardowym powiększeniu.

O czym pamiętać?

Osoby z wadami wzroku często korzystają z powiększenia, aby móc korzystać z Internetu. Jeśli strona nie jest przystosowana do powiększenia, mogą oni mieć trudności z przeczytaniem treści (np. zbyt mały tekst), wypełnieniem formularzy (np. pola formularza nachodzą na siebie) czy skorzystaniem z innych funkcji (np. przyciski są zbyt małe, aby w nie kliknąć). To może prowadzić do frustracji i rezygnacji z korzystania ze strony. Najlepszym sposobem jest stosowanie responsywnego designu, który automatycznie dostosowuje układ strony do różnych rozmiarów ekranu i powiększeń. Dzięki temu użytkownicy będą mieli optymalne doświadczenia niezależnie od tego, jak korzystają ze strony.

Dostępność to przede wszystkim ludzie

Trzeba pamiętać, że nie ma jednego uniwersalnego rozwiązania, które zadowoli wszystkich. To, co jest idealne dla jednej osoby, może być problematyczne dla innej. Dlatego tak ważne jest, aby testować dostępność z udziałem osób o różnych potrzebach i preferencjach (np. osób niewidomych, niesłyszących, z niepełnosprawnościami ruchowymi).

Dostępność polega również na dawaniu dawanie użytkownikom wyboru. Niech sami zdecydują, jak chcą korzystać ze strony. Warto zapewnić im różne opcje nawigacji (np. menu, wyszukiwarka), dostosowywania wyglądu (np. zmiana rozmiaru czcionki, kontrastu) czy sterowania multimediami (np. możliwość zatrzymania animacji, wyłączenia dźwięku).

Nie trzeba być ekspertem i znać na pamięć wszystkich wytycznych WCAG, aby przyczynić się do poprawy dostępności. Jeśli coś wydaje Ci się nieintuicyjne (np. niezrozumiała ikona), trudne do zrozumienia (np. skomplikowany język) lub po prostu niewygodne w użyciu (np. zbyt małe przyciski), warto to zgłosić. Lepiej bowiem zwrócić uwagę na potencjalny problem, niż go zignorować.