Jak przetestować dostępność (accessibility) Twojej strony?

Gdybyśmy teraz byli w jednej sali, poprosiłabym wszystkie zebrane osoby o zabranie głosu, jeśli kiedykolwiek próbowały nawigować po internecie za pomocą czytnika ekranu dla osób niewidomych lub widziały, jak to się odbywa. Taka dyskusja mogłaby ujawnić wiele ciekawych spostrzeżeń dotyczących doświadczeń użytkowników oraz ograniczeń, które napotykają, o niektórych albo nie myślimy albo zwyczajnie nie mamy pojęcia. Chociaż nie jest odkrywcze, że sposób konsumpcji treści przez osoby z niepełnosprawnościami jest “inny”, to te różnice często zaskakują, a spektrum osób, które mają bądź mogą mieć problemy z nawigowaniem w wirtualnym świecie jest niezwykle szerokie.

Na przykład, osoby z wadami wzroku często lepiej czytają tekst czarny na żółtym tle niż czarny na białym. Osoby niewidome często nie korzystają z wyszukiwarek na stronach, lecz nawigują bezpośrednio do konkretnych linków za pomocą przeglądarek internetowych. Dlatego tak ważne jest, aby drzewo strony i linki były dobrze uporządkowane. Osoby z ograniczeniami motorycznymi mogą korzystać z alternatywnych urządzeń wskazujących, takich jak trackballe, ekrany dotykowe lub urządzenia śledzące ruchy oczu. Strony muszą być responsywne i łatwe do obsługi bez precyzyjnych kliknięć myszy.

Jednym z podstawowych założeń i głównym celem rozwoju technologii jest usprawnianie procesów i różnych aspektów ludzkiej działalności – ułatwianie życia. Jednak ta sama technologia, która jednym pomaga, dla innych bywa kolejnym wyzwaniem.

Samo pojęcie dostępności w kontekście WCAG wychodzi znacznie poza “niepełnosprawność”, jaka przychodzi nam do głowy w pierwszym momencie. Żeby uświadomić sobie pewne bariery, czy też różnorodność użytkowników, zachęcam do zabawy i przeklikania Cards for Humanity.

Mówi się, że dostępność nie jest o niedoskonałości ludzi, tylko o niedoskonałości stron internetowych – „People don’t have disabilities, websites do”. Jak zatem sprawdzić, jakie ograniczenia naszych stron powodują, że nie spełniają one swojej ważnej funkcji i nie są dostosowane do unikalnych potrzeb użytkowników?

Przeczytaj artykuł “Jak rozumieć ustawę o dostępności (European Accessibility Act, EAA) i co dla Ciebie oznacza?”

Aby sprawdzić, czy Twoja strona jest dostępna zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), możesz skorzystać z kilku metod i narzędzi. Oto kilka kroków, które pomogą Ci w tym procesie:

• Wave: Jest to darmowe i jedno z najpopularniejszych narzędzi, które analizuje strony internetowe pod kątem dostępności. Zostało stworzone przez WebAIM (Web Accessibility In Mind).Przykładowy raport z Wave.

• Axe: Kolejne popularne narzędzie, które integruje się z przeglądarkami, takimi jak Chrome i Firefox, oferując szczegółowe raporty o problemach z dostępnością.jest rozwijane przez Deque Systems, które regularnie aktualizuje Axe, aby zapewnić zgodność z najnowszymi wersjami WCAG i uwzględniać nowe technologie oraz najlepsze praktyki. Axe w wersji premium ma opcję poprowadzenia użytkownika po sposobie testowania (scenariusz testowania).

• Lighthouse: Narzędzie Google, które raczej może być wykorzystane jako uzupełnienie całego procesu testowania i skupia się głównie na ocenie strony pod kątem wydajności, szybkości ładowania strony, czy SEO, którego wytyczne często pokrywają się i mają wspólne standardy z WCAG.

Automatyczne narzędzia identyfikują problemy i sugerują poprawki. Generują dość szczegółowe raporty i wizualnie prezentują wyniki badań zawierając informacje o miejscach występowania nieprawidłowości i oceniają ich znaczenie. Narzędzia te w łatwy sposób integrują się z przeglądarkami i z ich poziomu można je uruchomić, są dostępne jako rozszerzenie do Chrome i FireFox. Wave radzi sobie również w przypadku treści dynamicznych, jednak, jak w większości automatycznych rozwiązań, są też pewne aspekty, przy których takie narzędzia nie wystarczają, żeby profesjonalnie ocenić witrynę. Mogą one jedynie wstępnie dokonać analizy, ale ich zaletę niewątpliwie stanowi to, że są dostępne od ręki. Dlatego, jeśli chcemy szybko przeskanować naszą stronę, warto wziąć je pod uwagę. Niektóre serwery lub CAPTCHA blokują jednak tego typu narzędzia.

Żaden dostępny dziś szeroko automat nie jest w stanie wykryć wszystkich problemów, np. logiki nawigacji czy zrozumiałości treści lub też może nieprawidłowo wskazywać błędy, które w istocie nimi nie są. Przy automatycznych narzędziach czasem brakuje też kontekstu użytkownika i rzeczywistych odczuć towarzyszących poruszaniu się po stronie. Prawdziwi odbiorcy mogą doświadczyć problemów niewidocznych dla narzędzi. Automaty koncentrują się głównie na technicznych aspektach dostępności, a nie na rzeczywistej użyteczności strony dla jej użytkowników. Dlatego, aby uzyskać pełny obraz dostępności strony, takie narzędzie powinno być uzupełnione innymi sposobami/metodami oraz manualnym testowaniem, w tym testami z udziałem użytkowników z różnymi rodzajami niepełnosprawności.

UWAGA! Jeśli chodzi o testowanie aplikacji natywnych, jest to duże wyzwanie dla testów automatycznych.

Niektóre elementy możemy przetestować samodzielnie np. sprawdzenie nawigacji klawiaturą lub scrollem na telefonie.

• Nawigacja klawiaturą: Upewnij się, że wszystkie elementy na stronie są dostępne za pomocą klawiatury. Sprawdź, czy można poruszać się po stronie za pomocą klawisza Tab i czy widoczne są wskaźniki focusu. W zależności od branży, spróbuj dowiedzieć się czegoś o usłudze, zamówić coś, przejść do koszyka zakupowego lub wykonać inną akcję.

• Czytniki ekranu: Przetestuj swoją stronę za pomocą czytników ekranu, takich jak: NVDA, JAWS lub VoiceOver aby zobaczyć, jak jest odczytywana.

Oto szczegółowa instrukcja:

Instalacja:

1. Pobierz NVDA z oficjalnej strony.
2. Zainstaluj NVDA zgodnie z instrukcjami na ekranie.

Testowanie:

1. Uruchom NVDA po instalacji.
2. Otwórz przeglądarkę internetową (najlepiej Firefox, ponieważ NVDA działa z nią bardzo dobrze).
3. Przejdź na stronę, którą chcesz przetestować.
4. Użyj klawiatury, aby nawigować po stronie. Typowe skróty klawiaturowe:
   – Tab: Przechodzi do następnego elementu interaktywnego.
   – Shift + Tab: Przechodzi do poprzedniego elementu interaktywnego.
   – Insert + strzałki: Przemieszczanie się po tekście.
5. Zwróć uwagę, czy wszystkie elementy są poprawnie odczytywane, czy linki i przyciski mają logiczne opisy, a struktura strony jest zrozumiała.

Instalacja:

1. Pobierz JAWS z oficjalnej strony Freedom Scientific.
2. Zainstaluj JAWS zgodnie z instrukcjami na ekranie.

Testowanie:

1. Uruchom JAWS po instalacji.
2. Otwórz przeglądarkę internetową (JAWS działa dobrze z Internet Explorerem i Chrome).
3. Przejdź na stronę, którą chcesz przetestować.
4. Użyj klawiatury, aby nawigować po stronie. Typowe skróty klawiaturowe:
   – Tab: Przechodzi do następnego elementu interaktywnego.
   – Shift + Tab: Przechodzi do poprzedniego elementu interaktywnego.
   – Insert + strzałki: Przemieszczanie się po tekście.
5. Sprawdź, czy wszystkie elementy są poprawnie odczytywane, czy linki i przyciski mają logiczne opisy, a struktura strony jest zrozumiała.

Włączenie VoiceOver na macOS:

1. Otwórz “Preferencje systemowe”.
2. Przejdź do sekcji “Dostępność”.
3. Wybierz “VoiceOver” i włącz tę funkcję.

Testowanie z VoiceOver na macOS:

1. Otwórz przeglądarkę Safari.
2. Przejdź na stronę, którą chcesz przetestować.
3. Użyj skrótów klawiaturowych VoiceOver do nawigacji:
   – Control + Option + strzałki: Przemieszczanie się po różnych elementach na stronie.
   – Control + Option + Space: Aktywowanie elementów.
4. Zwróć uwagę, czy wszystkie elementy są poprawnie odczytywane, czy linki i przyciski mają logiczne opisy, a struktura strony jest zrozumiała.

Włączenie VoiceOver na iOS:

1. Przejdź do “Ustawienia”.
2. Wybierz “Dostępność”.
3. Przejdź do sekcji “VoiceOver” i włącz tę funkcję.

Testowanie z VoiceOver na iOS:

1. Otwórz przeglądarkę Safari.
2. Przejdź na stronę, którą chcesz przetestować.
3. Użyj gestów VoiceOver do nawigacji:
   – Przesunięcie palcem w prawo/lewo: Przechodzi do następnego/poprzedniego elementu.
   – Dwu-klik: Aktywowanie elementów.
4. Sprawdź, czy wszystkie elementy są poprawnie odczytywane, czy linki i przyciski mają logiczne opisy, a struktura strony jest zrozumiała.

Użyj narzędzi, takich jak Contrast Analyser, aby sprawdzić, czy kolory tekstu i tła mają odpowiedni kontrast.

• WebAIM Contrast Checker: Narzędzie dostępne online, które umożliwia szybkie sprawdzenie kontrastu kolorów: WebAIM Contrast Checker.
• Accessible Colors: Kolejne narzędzie online, które pomaga w doborze odpowiednich kombinacji kolorów: Accessible Colors.

Testowanie kontrastu kolorów za pomocą narzędzi takich jak Contrast Analyser jest prostym, ale skutecznym sposobem na poprawę dostępności Twojej strony internetowej. Regularne testowanie i dostosowywanie kolorów pomogą w spełnieniu i utrzymywaniu standardów WCAG i poprawią widoczność Twojej strony.

Praktyczne wskazówki dotyczące wdrożenia accessibility poznasz, czytając artykuł

Najlepsza i zdecydowanie najciekawsza forma pozyskania wiedzy, która jest niezastąpionym sposobem zebrania najbardziej jakościowych wniosków.

Jeśli jeszcze tego nie robisz, możesz zatrudnić osoby z różnymi niepełnosprawnościami do przetestowania Twojej strony. To najbardziej efektywny sposób, aby zidentyfikować rzeczywiste problemy, z jakimi mogą się spotkać użytkownicy. Obserwacja ich zachowań i sposobów eksplorowania platform, może dostarczyć Ci przełomowych wniosków.

Audyt z udziałem użytkowników z różnymi niepełnosprawnościami to najbardziej efektywny sposób na zidentyfikowanie rzeczywistych problemów dostępności na Twojej stronie internetowej. Oto konkretne kroki do skutecznego przeprowadzenia takiego audytu:

Określenie celów audytu:

• Zdefiniuj, jakie aspekty dostępności chcesz przetestować (np. nawigacja, formularze, multimedia).
• Ustal, jakie kryteria sukcesu będą używane do oceny strony (np. zgodność z WCAG 2.2. na poziomie AA).

Wybór uczestników:

• Zatrudnij osoby z różnymi niepełnosprawnościami, takimi jak niewidome, niedowidzące, niesłyszące, niedosłyszące, osoby z ograniczeniami motorycznymi oraz z niepełnosprawnością poznawczą.
• Możesz skontaktować się z organizacjami pozarządowymi, które współpracują z osobami niepełnosprawnymi, aby znaleźć uczestników audytu.

Przygotowanie scenariuszy testowych:

• Stwórz szczegółowe scenariusze testowe, które będą obejmować typowe zadania, jakie użytkownicy wykonują na Twojej stronie (np. rejestracja, zakupy, wyszukiwanie informacji).

Przygotowanie środowiska testowego:

• Upewnij się, że środowisko testowe jest dobrze przygotowane i że uczestnicy mają dostęp do niezbędnych technologii wspomagających (np. czytników ekranu, urządzeń do powiększania obrazu, programów do rozpoznawania mowy).

Instrukcje dla uczestników:

• Przedstaw uczestnikom cele audytu oraz scenariusze testowe.
• Zapewnij wsparcie techniczne na wypadek problemów podczas testowania.

Zbieranie danych:

• Obserwuj, jak uczestnicy wykonują zadania, i notuj wszystkie napotkane problemy.
• Nagrywaj sesje testowe (za zgodą uczestników), aby móc dokładnie przeanalizować ich doświadczenia.
• Przeprowadzaj wywiady po zakończeniu testów, aby uzyskać dodatkowe informacje o trudnościach i sugestiach uczestników.

Analiza wyników:

• Przeanalizuj zebrane dane, identyfikując kluczowe problemy dostępności i ich wpływ na użytkowników.
• Skup się na problemach, które najczęściej występują i mają największy wpływ na doświadczenia użytkowników.

Tworzenie raportu:

• Sporządź raport z audytu, zawierający:
  – Opis metodologii audytu.
  – Wyniki testów, w tym napotkane problemy i ich wpływ na użytkowników.
  – Zalecenia dotyczące naprawy problemów.
  – Przykłady najlepszych praktyk i propozycje ulepszeń.

Prezentacja wyników:

• Przedstaw wyniki audytu zespołowi deweloperskiemu oraz interesariuszom, aby zapewnić, że wszyscy są świadomi napotkanych problemów i planowanych działań naprawczych.

1.  Fundacja Integracja
– Opis: Fundacja Integracja zajmuje się szeroko pojętą pomocą osobom z niepełnosprawnościami, w tym prowadzeniem audytów dostępności stron internetowych. Współpracuje z firmami, aby poprawić dostępność cyfrową i przestrzegać wytycznych WCAG.
– Strona internetowa: Integracja

2.  Fundacja Widzialni
– Opis: Fundacja Widzialni specjalizuje się w promocji dostępności cyfrowej, prowadząc audyty i szkolenia z zakresu dostępności. Organizacja ta przeprowadza testy z udziałem użytkowników z niepełnosprawnościami, aby identyfikować i naprawiać problemy dostępności.
– Strona internetowa: Widzialni

3.  Polski Związek Głuchych (PZG)
– Opis: PZG działa na rzecz osób niesłyszących i niedosłyszących, oferując m.in. audyty dostępności stron internetowych. Organizacja ta przeprowadza testy z udziałem użytkowników, aby poprawić dostępność dla osób z problemami słuchu.
– Strona internetowa: PZG

4.  Migam
– Opis: Migam specjalizuje się w usługach tłumaczeń na język migowy, ale także prowadzi audyty dostępności stron internetowych z udziałem osób niesłyszących i niedosłyszących.
– Strona internetowa: Migam

• Realne dane: Dostarczają rzeczywistych danych o doświadczeniach użytkowników, co jest trudne do uzyskania za pomocą samych narzędzi automatycznych.

• Identyfikacja krytycznych problemów: Umożliwiają wykrycie problemów, które mogą być przeoczone podczas automatycznego testowania.

• Poprawa użyteczności: Zebrane informacje pomagają w tworzeniu bardziej użyte

Chcesz dowiedzieć się, jak skutecznie wdrożyć wymagania WCAG na swojej stronie? Przeczytaj nasz artykuł o wdrażaniu wytycznych WCAG i poznaj szczegółowe kroki, które pomogą Ci poprawić dostępność i użyteczność Twojej platformy.

Skontaktuj się z nami, aby przeprowadzić audyt i dostosować swoją platformę do najnowszych przepisów, zwiększając jej dostępność i funkcjonalność. Dowiedz się więcej o naszej usłudze audytu platform internetowych lub porozmawiaj z nami o swoich oczekiwaniach.

Wypełnij formularz, a pokażemy, jak usprawnić Twoją stronę i zapewnić lepsze doświadczenia różnorodnym użytkownikom.