Czy zastanawialiście 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.
Z artykułu dowiecie się, jak zacząć testować strony www pod kątem dostępności cyfrowej.
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 stosowany język 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,
- 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ć użytkownicy.
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.
Wave jest wtyczką do przeglądarki (Chrome, Firefox i Internet Explorer), która pomaga analizować kod HTML i jego strukturę, podkreślając błędy dostępności (m.in.: w organizacji nagłówków na stronie, zbyt mało kontrastowych elementach, niewystarczających opisach tekstów alternatywnych). Wskazuje także 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 można go obsługiwać 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 developerów.
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 czy 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 audiodeskrypcję dla osób niewidomych. Świetnym dodatkiem jest też transkrypcja (plik tekstowy z całą wypowiedzianą w pliku multimedialnym treścią).
Narzędzia, które pomogą zacząć testować dostępność
Testując dostępność, nie musicie 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żna je zainstalować jako wtyczki do przeglądarki.
Warto zaznajomić się z wtyczkami.
Silktide (Chrome)
Silktide, podobnie jak Wave, skanuje kod HTML strony, zgodnie z wybranymi przez testera wytycznymi (WCAG 2.0, 2.1 lub 2.2).
Jest szczególnie przydatny do weryfikacji:
• odpowiedniego kontrastu kolorów między elementami,
• czytelności treści i układu dla osób z wadami wzroku,
• przejrzystości i struktury dłuższych tekstów, co pomaga zapewnić ich zrozumiałość dla użytkowników z wyzwaniami poznawczymi takimi jak dysleksja.
Headings Map (Chrome)
To rozszerzenie pokazuje strukturę dokumentu lub indeks dla każdej strony internetowej o strukturze opartej na nagłówkach. Umożliwia użytkownikom bezpośrednią nawigację do wybranych sekcji poprzez kliknięcie elementów w wygenerowanym konspekcie.
Link do pobrania narzędzia. 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
- NVDA: Darmowy czytnik ekranu. Jeśli chcecie naprawdę zrozumieć, jak inni korzystają z Waszej strony, spróbujcie zainstalować NVDA i się nią posługiwać. Pamiętajcie, że nauka obsługi tego narzędzia wymaga czasu. Link do pobrania NVDA
- 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.
Testing & QA
Zapewnij jakość, wydajność i bezpieczeństwo swojego oprogramowania dzięki naszym usługom testowania i automatyzacji testów.
Oferta Testing&QADostępność cyfrowa to nasza wspólna odpowiedzialność
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 należy pamiętać, że aplikacje internetowe podlegają ciągłym zmianom – dodawane są nowe funkcjonalności, modyfikowane są elementy interfejsu użytkownika. Brak bieżącego testowania może sprawić, że nie zauważycie, iż elementy wcześniej w pełni dostępne stały się niedostępne po wprowadzeniu zmian.
Rozpoczęcie testowania dostępności od opisanych powyżej kroków sprawi, że Wasza aplikacja webowa stanie się bardziej przyjazna i otwarta dla wszystkich użytkowników – nawet jeśli do tej pory nie mieliście okazji prowadzić takich testów.
Jeśli potrzebujecie dalszego wsparcia, możecie skorzystać z wytycznych PFRON lub wytycznych Ministerstwa Cyfryzacji, list kontrolnych (checklist) dostępnych online lub skonsultować się ze specjalistą.
Zostaw komentarz