Czy zastanawiałeś/zastanawiałaś się kiedyś, dlaczego niektóre serwisy internetowe są niewygodne w użyciu, zwłaszcza gdy się spieszysz, korzystasz z małego ekranu albo po prostu masz gorszy dzień? Być może te serwisy nie są dostępne.
Dostępność (ang. accessibility) oznacza, że produkty, usługi, a w tym przypadku strony i aplikacje internetowe, są zaprojektowane tak, by mogły z nich korzystać wszyscy użytkownicy Internetu, w tym także osoby z niepełnosprawnościami.
Dla kogo tak naprawdę jest dostępność?
Zapewnienie dostępności to nie tylko obowiązek prawny (wynikający m.in. z Europejskiego Aktu o Dostępności i powiązanego z nim standardu WCAG 2.1 ), ale przede wszystkim szansa na dotarcie do większej liczby klientów i budowanie wizerunku nowoczesnej firmy.
Dostępność służy każdemu z nas. Oprócz osób z trwałymi niepełnosprawnościami (wzroku, słuchu, ruchu, poznawczymi), na dostępnych aplikacjach zyskują również:
- Osoby starsze
- Osoby, które są zmęczone i potrzebują, by obsługa była prosta i intuicyjna
- Osoby z tymczasowymi ograniczeniami, np. złamaną nogą, kontuzją ręki lub rodzice z wózkiem dziecięcym
- Osoby korzystające z Internetu w trudnych warunkach (np. na słońcu lub w hałaśliwym otoczeniu)
- Cudzoziemcy, dla których np. język polski nie jest ojczystym.
Tak jak każdy inny element w procesie wytwarzania oprogramowania, dostępność powinna być wytwarzana i testowana przez zespół projektowy. W przypadku niektórych produktów czy usług (np. medycznych, rządowych, serwisów informacyjnych), uważna implementacja dostępnych rozwiązań jest szczególnie ważna i powinna stanowić priorytet.
Kiedy zacząć testowanie?
W przypadku dostępności cyfrowej wczesne testowanie – już na etapie makiet i designów – ma szczególne znaczenie. Szacuje się, że 70% problemów z dostępnością może być zaadresowane i naprawione jeszcze przed etapem developmentu, a co za tym idzie, ich naprawa jest dużo tańsza i mniej czasochłonna niż zmiana gotowych komponentów w działającym systemie.
Wczesne testowanie pozwala uchwycić m.in. błędy związane z wielkością i rozmieszczeniem elementów w aplikacji, łatwości przejścia przez kolejne ekrany, kontrastem zastosowanych tekstów i obrazów do tła, czy wielkością i rodzajem użytych czcionek.
Nie jest to łatwe zadanie, ponieważ wymaga szerokiej wiedzy domenowej, uważności i rozeznania w rodzajach technologii wspomagających, z których potencjalnie mogą korzystać Klienci.
Jak testować dobrze?
Testowanie dostępności wymaga znajomości poprawnego pisania i zastosowania kodu HTML (semantyczny HTML), ponieważ technologie wspomagające, które towarzyszą różnym użytkownikom podczas korzystania z aplikacji internetowych (takie jak czytniki ekranu, switch pady), bazują na współpracy z kodem HTML. Kiedy kod aplikacji nie zawiera znaczących błędów, istnieje duże prawdopodobieństwo, że użytkownikowi będzie łatwiej korzystać z serwisu internetowego.
Dodatkowo, wiele z praktyk i zachowań użytkowników może być imitowana przy pomocy darmowych lub płatnych narzędzi do testów, poszerzających standardową analizę kodu i prezentujących wyniki w sposób czytelny i umożliwiający dalszą analizę.
Najbardziej popularnym, i jednocześnie dostępnym, narzędziem do testów dostępności jest Wave.
Link do Wave: https://wave.webaim.org/extension/
Wave jest to wtyczka do przeglądarki (Chrome, Firefox i Internet Explorer), która pomaga analizować kod HTML i jego strukturę, wskazuje na błędy dostępności (m.in. w organizacji nagłówków na stronie, zbyt mało kontrastowych elementów, niewystarczających opisów tekstów alternatywnych), lecz także wskazuje na poprawnie użyte dostępne rozwiązania (np. aria-label), umożliwiając testerowi jednoczesną pracę i naukę dostępności.
Co ciekawe, Wave jest sam w sobie narzędziem dostępnym – wykorzystuje podwójne oznaczenia elementów – kolorem i grafiką, a także jest możliwe w obsłudze przy pomocy czytnika ekranu. Daje to szansę analizy dostępności, także tym testerom, którzy sami są osobami z niepełnosprawnościami.
Techniki testowania dostępności
Choć pełen audyt dostępności wymaga dogłębnej wiedzy eksperckiej, możesz samodzielnie wykryć podstawowe błędy w aplikacji.
Pamiętaj, że nawet automatyczne narzędzia audytujące nie zastąpią testów ręcznych i spojrzenia z perspektywy użytkownika.
Najlepszą praktyką jest nieustanne weryfikowanie swoich przekonań na temat dobrych, dostępnych rozwiązań w źródłach – np. na stronach WCAG lub w wytycznych dla deweloperów.
Oto kilka prostych, ręcznych testów, które możesz wykonać już dziś:
Nawigacja za pomocą klawiatury
(Test dla osób z niepełnosprawnością ruchową i użytkowników czytników ekranu)
Wiele osób, w tym użytkownicy czytników ekranu oraz osoby z ograniczoną sprawnością rąk, nie używa myszki do poruszania się po sieci – korzystają wyłącznie z klawiatury.
Jak testować?
- Odłóż myszkę. Testuj tylko przy użyciu klawiatury.
- Użyj klawisza TAB do przechodzenia przez wszystkie interaktywne elementy strony (linki, przyciski, pola formularzy, elementy sterujące multimediów).
- Sprawdź kolejność. Upewnij się, że kolejność przechodzenia jest logiczna, zazwyczaj od góry do dołu i od lewej do prawej. Jeśli chcesz wrócić do elementu, użyj kombinacji klawiszy Shift + TAB.
- Sprawdź fokus. Zwróć uwagę czy element, na którym aktualnie się znajdujesz, jest wyraźnie widoczny (np. podświetlony ramką).
- Upewnij się, że gdy już wejdziesz w dany element (np. pole formularza lub okno modalne), możesz z niego wyjść, używając klawiatury, bez konieczności resetowania strony.
Testowanie treści nietekstowych
(Obrazy, grafiki i multimedia)
Osoby niewidome lub słabowidzące korzystają na co dzień z czytników ekranu(np. NVDA), które odczytują zawartość strony. Zadaniem osób tworzących treści jest zadbanie o to, żeby każdy miał pełen dostęp do informacji w serwisie internetowym. Osoby, które nie są w stanie zobaczyć: zdjęć, grafik, innych elementów graficznych, powinny mieć zapewnione alternatywy tekstowe dla tych elementów.
Jak testować?
- Sprawdź, czy każde zdjęcie lub grafika (która nie jest czysto dekoracyjna) ma przypisany tekst alternatywny i czy jego treść oddaje sens obrazu.
- Nie rozpoczynaj opisu od słów „zdjęcie” lub „obrazek” – czytnik ekranu już wie, że to jest obraz. Staraj się, aby opis był zwięzły.
- Jeśli obraz ma charakter czysto dekoracyjny i nie przekazuje żadnej istotnej informacji (np. kreska oddzielająca sekcje), atrybut alt powinien być pusty (alt=””). Dzięki temu czytnik ekranu pominie ten element.
- Jeśli na stronie są filmy, musisz zapewnić alternatywy dla treści audio i video. Oznacza to napisy (Closed Captions) zsynchronizowane z treścią dla osób głuchych lub niesłyszących oraz audiodeskrypcja dla osób niewidomych. Świetnym dodatkiem jest też transkrypcja (plik tekstowy z całą wypowiedzianą w pliku multimedialnym treścią).
Narzędzia, które pomogą Ci zacząć testować dostępność
Testując dostępność nie musisz inwestować w drogie oprogramowanie. Większość narzędzi wspierających testy jest darmowa i stanowi część pakietów narzędzi developerskich (Dev Tools) w przeglądarce lub możesz je zainstalować jako wtyczki do przeglądarki.
Warto zaznajomić się z takimi wtyczkami jak:
Silktide (Chrome)
Praktyczne narzedzie, zbliżone do Wave, które pozwala szybko ocenić problemy z dostępnością pod kątem WCAG 2.0, 2.1, lub 2.2.
Link do pobrania narzędzia: https://chromewebstore.google.com/detail/silktide-accessibility-ch/mpobacholfblmnpnfbiomjkecoojakah?hsCtaAttrib=270482513099
Headings Map (Chrome)
Ta wtyczka pozwala w prosty sposób sprawdzić strukture nagłówków na stronie. Proste i super szybkie narzędzie.
Link do pobrania narzędzia: https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
Dodatkowo należy poszerzyć testy o czytniki ekranu oraz sprawdzanie treści serwisu na różnego typu urządzeniach (laptopy, tablety, telefony z różną rozdzielczością ekranu i różnego rodzaju systemem operacyjnym).
Najpopularniejsze czytniki ekranu to:
- NVDA: Darmowy czytnik ekranu. Jeśli chcesz naprawdę zrozumieć, jak inni korzystają z Twojej strony, spróbuj zainstalować NVDA i spróbuj się nią posługiwać. Pamiętaj, że nauka obsługi tego narzędzia wymaga czasu.
Link do pobrania NVDA: https://www.nvaccess.org/download/
- Talk Back (Android): to wbudowany w system Android czytnik ekranu, który umożliwia użytkownikom interakcję z urządzeniem za pomocą komunikatów głosowych oraz nawigacji opartej na gestach.
Funkcja ta pozwala na odczytywanie wiadomości tekstowych, przeglądanie aplikacji oraz korzystanie z internetu bez konieczności patrzenia na ekran, co znacząco zwiększa dostępność smartfonów i tabletów dla osób niewidomych i słabowidzących.
- Voice Over (MacOS): to zintegrowany czytnik ekranu firmy Apple, dostępny na urządzeniach z systemami macOS i iOS, oferujący rozbudowaną obsługę gestów dotykowych, poleceń klawiaturowych oraz wyświetlaczy brajlowskich.
Zapewnia szczegółowe komunikaty głosowe opisujące wszystkie elementy widoczne na ekranie, umożliwiając użytkownikom nawigację po aplikacjach, odczytywanie dokumentów oraz interakcję z treściami w sposób wysoce konfigurowalny i intuicyjny.
Co istotne, ten sam czytnik ekranu jest dostępny zarówno na komputerach, jak i na smartfonach, a korzystanie z niego przebiega w identyczny sposób na obu typach urządzeń. Warto również podkreślić, że VoiceOver jest najpopularniejszym czytnikiem ekranu w społeczności osób niewidomych.
Dostępność cyfrowa to nasza wspólna odpowiedzialność.
Pamiętaj, że dostępność to ciągły proces, a nie jednorazowe działanie. Nie wystarczy przetestować aplikację, czy też wykonać jej profesjonalny audyt. Aby poprawić dostępność – znalezione błędy muszą być naprawione. Dodatkowo musisz pamiętać, że aplikacje internetowe podlegają ciągłym zmianom – dodawane są nowe funkcjonalności, zmieniane są elementy interfejsu użytkownika i bez ciągłego testowania elementy, które były w pełni dostępne, po wprowadzonej zmianie mogą przestać takie być.
Pomimo tych wyzwań, jeśli do tej pory nie miałeś / nie miałaś okazji testować dostępności, zaczynając od tych powyższych kroków, już teraz sprawisz, że Twoja aplikacja webowa będzie bardziej przyjazna i otwarta dla wszystkich klientów.
Jeśli potrzebujesz dalszego wsparcia, możesz skorzystać z wytycznych PFRON (link do strony: https://www.pfron.org.pl/) lub Ministerstwa Cyfryzacji (Link do wytycznych: https://www.gov.pl/web/dostepnosc-cyfrowa/czym-jest-audyt-ekspercki-dostepnosci-cyfrowej-i-jak-go-zorganizowac ), list kontrolnych (checklist) dostępnych online, lub skonsultować się ze specjalistą.
Jeśli chcesz nauczyć się więcej – sprawdź nasz kurs: Praktyczny kurs testowania dostępności (accessibility) dla początkujących
