Samodzielny audyt dostępności – jak go przeprowadzić?

Dlaczego zapewnienie dostępności cyfrowej biznesu ma coraz większe znaczenie? Jak sprawdzić, czy Twoja strona lub aplikacja są dostępne?

Dostępność cyfrowa to już nie tylko kwestia czysto ludzka i etyczna, to już niebawem będzie obowiązek prawny wielu biznesów. W czerwcu 2025 (jeśli nie będzie obsuwy) wejdzie dyrektywa unijna – European Accessibility Act. Zgodnie z nią obowiązek zapewnienia równych szans w dostępie do produktów i usług dla wszystkich, także dla osób ze szczególnymi potrzebami.

Co rozumieć przez “osoby ze szczególnymi potrzebami”?

Zwykle, gdy mówimy o dostępności, to w głowie pojawiają się osoby z niepełnosprawnościami. Jednak dostępność to znacznie więcej. Pomaga ona też osobom z różnymi trudnościami tymczasowymi (np. złamana ręka, słaby wzrok po zakropleniu u okulisty) lub sytuacyjnymi (matka z wózkiem, która musi podjechać pod górkę lub osoba mająca zajęte ręce torbami z zakupami).

Dostępność cyfrowa uwzględnia również osoby neuroróżnorodne, np. ze spektrum autyzmu, ADHD, dysleksją. Ich mózgi pracują inaczej niż większości ludzi i przez to mają oni trochę inne potrzeby.

Dlaczego dostępność cyfrowa jest istotna?

Powodów jest kilka i trochę już o nich wspomniałam. Zbierzmy je jednak razem:

• docierasz do szerszego grona odbiorców i zwiększyć konwersję,
• budujesz pozytywny wizerunek marki,
• od czerwca 2025 r. wchodzi Europejski Akt o Dostępności, Przedsiębiorcy z sektora prywatnego (m.in. z branży komputerowej, bankowej czy ecommerce) zostaną objęci obowiązkiem zapewnienia dostępności swoich produktów i usług dla wszystkich,
• wpływasz na lepsze doświadczenia wszystkich użytkowników, bo dostępność cyfrowa sprawia, że witryna staje się bardziej intuicyjna i łatwa w obsłudze,
• wspiera ona również działania SEO.

Jak sprawdzić, czy strona jest dostępna cyfrowo?

Zwykle jak chcemy coś zmienić, zoptymalizować czy wprowadzić, pierwszym krokiem jest analiza obecnej sytuacji.

Podobnie jest i w tym przypadku. Przeprowadzenie audytu i sprawdzenie dostępności swojej strony internetowej powinno być pierwszym krokiem w procesie wdrażania dostępności.

Jak przeprowadzić  audyt dostępności?

Możesz to zlecić specjalistom, jednak nim to zrobisz, zachęcam Cię do przeprowadzenia samodzielnego audytu dostępności. Pozwoli to wyeliminować podstawowe błędy, a przy okazji zrozumiesz lepiej czego nie robić w przyszłości.

Taki samodzielny audyt dostępności na pewno zajmie Ci chwilę, ale jestem pewna, że przyniesie Ci to o wiele więcej korzyści, niż gdy od razu zlecisz to na zewnątrz.

Poznaj zatem najważniejsze kroki, które powinny znaleźć się w samodzielnym audycie dostępności witryny oraz narzędzia, które Ci w tym pomogą.

1. Poznaj WCAG – Wytyczne dotyczące dostępności

Istnieje taki dokument, który się zwie “Wytyczne dla dostępności treści internetowych (WCAG – Web Content Accessibility Guidelines)”. W nim właśnie znajdziemy wszelkie wytyczne i wskazówki, jak sprawić, aby nasza witryna internetowa czy aplikacja, były bardziej dostępne dla szerszego grona osób.

Daleka jestem od namawiania Cię do przeczytania całego dokumentu WCAG 2.1. Na ten moment wystarczy Ci całkiem dobre opracowanie (!) na naszej stronie rządowej: WCAG 2.1 w skrócie.

Dodam do tego jeszcze kilka rzeczy w celu uzupełnienia materiału:

– alternatywy tekstowe dla treści nietekstowych – czyli znane z SEO “alty”. Zapomnijmy jednak na chwilę o robotach Google i skupmy się na człowieku. Główne zasady tworzenia alt-ów to:

• dodajemy je tylko do grafik i multimediów nosących jakieś ważne dla użytkownika informacje – np. aby móc zrozumieć treść lub wywołujące odpowiednie emocje,
• grafiki dekoracyjne (cieszą oko, dodają tego czegoś wizualnej stronie produktu, ale w sumie mogłoby ich nie być), powinny mieć tzw. pusty alt, czyli alt=”” – dzięki temu czytnik ekranu je pominie,
  tworząc alt-y zastanów się, co użytkownik powinien usłyszeć, gdy czytnik będzie odczytywał treść umieszczoną pod grafiką.
  w altach nie używaj takich fraz jak: przycisk Dodaj do koszyka, obraz przedstawia…, na zdjęciu widać… – programy do czytania stron wiedzą, że to zdjęcie i o tym poinformują, więc nie powielajmy informacji, które tylko zabierają czas użytkownikowi i irytują.
• transkrypcje i audiodeskrypcje dla materiałów multimedialnych – pod grafikami możemy dać alt, ale pod filmem czy podcastem już nie jest tak łatwo. Dlatego dla osób z problemami wzroku lub słuchu (ale i tych, co oglądają/słuchają coś w pracy ;)) powinniśmy przygotowywać:
  • transkrypcje – to przeniesienie formy mówionej na tekstową,
  • audiodeskrypcje – oprócz zapisu w formie pisanej dialogów, mamy tu także opis scen, narrację przekazującą, co się dzieje na ekranie.
• Audiodeskrypcja czy transkrypcja towarzysząca filmowi nie jest tym samym, co napisy. Napisy pojawiają się na filmie i mogą być:
  • otwarte – są na stałe wmontowane w film i widzi je każdy użytkownik,
  • zamknięte – można je włączyć lub wyłączyć w razie potrzeby.

– kolor nie stanowi jedynego wyróżnika ważnych informacji – chodzi tu o osoby ze ślepotą barw, które mogą nie zauważyć jakiejś istotnej informacji, która będzie odróżniać się od reszty tylko kolorem. Dlatego przy linkach dawajmy podkreślenie (z dobrym kontrastem ;)), a np. przy komunikatach błędów ikonę wykrzyknika.

 

– “link pozwalający przeskoczyć szybko do treści („przejdź do treści”/ “skip to content”)” – spore ułatwienie, dla osób niewidomych i korzystających z klawiatury. Zamiast za każdym razem przeklikiwać się przez całe menu strony, można od razu przejść do jej zawartości, np. opisu produktu czy logowania, jak to jest np. na stronie banku BNP Paribas:

 

– wyraźnie opisane pola formularza – trend minimalizmu powoduje, że coraz częściej designerzy rezygnują z etykiet przy polach formularza (czyli tekst obok pola, mówiący co należy wpisać) posiłkując się jedynie bardzo jasnymi tekstami zastępczymi, tzw. placeholderami. Oczywiście i placeholdery mogą informować, co należy wpisać w danym poli, jednak ponieważ znajdują się one w środku pola, to są projektowane w jasnych barwach. Osoby ze słabym wzrokiem mogą mieć problem w ich przeczytaniu, a z kolei czytniki ekranów nie są w stanie ich przeczytać. Dlatego placeholdery są ok, ale tylko w towarzystwie etykiet.

 

2. Przeprowadź szybki audyt automatyczny z wykorzystaniem narzędzi do testowania dostępności

W Internecie jest bardzo dużo narzędzi umożliwiających bezpłatny i szybki audyt strony pod kątem dostępności. Wiele z nich nie tylko wskazuje błędy, ale także podpowiada jak je naprawić.

Moim ulubionym narzędziem jest WAVE, które występuje w formie wtyczki do przeglądarki, jak i aplikacji webowej (narzędzia na stronie internetowej).

Niektóre ze wskazanych przez WAVE błędów może być dla Ciebie mocno niezrozumiała – nie przejmuj się tym, nie jesteś ekspertem. Podejdź do wyników na zasadzie: mniej więcej wiem, ile rzeczy jest do poprawienia, to teraz poprawię to, co wiem jak i rozumiem o co chodzi, a resztę zostawię specjalistom – np. pójdę i porozmawiam z programistą.

Nie przerażaj się wynikiem raportu. Pamiętaj, że to wstępny audyt i nie wszystko musisz samodzielnie rozwiązać. Zwłaszcza jeśli dotyczy to kodu strony (oczywiście przy założeniu, że masz wsparcie programistów lub to im zlecisz wdrażanie poprawek). Skup się na tym, co możesz samodzielnie poprawić, jak alternatywy tekstowe czy treść linków.

Na poniższym zrzucie ekranu (strona przetestowana WAVE) możesz zauważyć, że wszystkie wskazane błędy są opisane i możesz też szybko sprawdzić je w kodzie strony. Dodatkowo możemy sprawdzić, jak strona wygląda bez dodanych stylów (kolorów etc.) – tak ją widzą roboty Google i czytniki ekranu, z których korzystają osoby niewidome.

 

Jedną z wad WAVE jest to, że jeśli masz 15 podstron w serwisie to, aby przetestować je wszystkie, musisz zrobić 15 takich testów. Rozwiązaniem tego problemu jest narzędzie Pope Tech, które bazując na WAVE, sprawdza całą witrynę wzdłuż i wszerz i daje jeszcze kilka bajerów. Przy okazji bardzo polecam artykuły na blogu tej firmy – naprawdę porządnie przygotowana spora dawka wiedzy o dostępności.

Inne przydatne narzędzia do testowania dostępności to m.in.:

• Let’s get color blind (wtyczka do Chrome) – narzędzie pozwalające sprawdzić kolorystykę strony oczami osoby ze ślepotą barw,
  Porównanie jak stronę internetową widzi osoba z prawidłowym rozróżnianiem barw, a jak osoba z jedną z najczęstszych form daltonizmu (deuteranopia)
• Colour Contrast Checker (wtyczka do Chrome) – narzędzie do sprawdzania kontrastu

A tu masz jeszcze inne narzędzia do testowania dostępności cyfrowej – coś na pewno dla siebie znajdziesz 🙂

 

3. Sprawdź stronę za pomocą czytnika ekranu

Czytniki ekranu, jak sama nazwa wskazuje, czytają treść strony – tę widoczną dla oka, jak i tę przygotowaną specjalnie dla nich ukrytą w kodzie. Bardzo ułatwiają one korzystanie z internetu nie tylko osobom z zaburzeniami widzenia, ale także z trudnościami poznawczymi i osobom starszym.

Robiąc test z użyciem czytnika ekranu, możesz wejść w buty osób, które z nich korzystają na co dzień. Zobaczysz na ile trudności i irytujących rzeczy natrafisz.

Na szczęście czytniki ekranów są darmowe, gdyż są wbudowane w popularne systemy operacyjne lub możesz je za darmo pobrać z internetu:

• VoiceOver dla urządzeń Apple – wbudowany w system,
• NVDA (NonVisual Desktop Access) dla komputerów z systemem Windows – do pobrania za darmo,
• TalkBack w wielu smartfonach z systemem Android.

Zanim jednak je włączysz, to się z podstawowymi gestami i skrótami klawiaturowymi, z jakich te narzędzie korzystają. Dla osoby, która pierwszy raz z nich korzysta, nie będą raczej intuicyjne i zawsze dobrze upewnić się, że wiemy jak je wyłączyć. No i nie zrażaj się zbyt szybko, w końcu praktyka czyni mistrza.

Testując stronę czytnikiem ekrany, zwróć uwagę na następujące elementy:

• kolejność odczytu – czy treść jest odczytywana w logicznej kolejności, zgodnie z układem strony,
• semantyka i oznaczenia – czy elementy strony (etykiety formularzy, checkboxy, ikony) są odpowiednio oznaczone,
• opisy alternatywne – czy grafiki i elementy nietekstowe, które pełnią funkcje informacyjne, mają odpowiednie opisy alternatywne.
• elementy interaktywne – czy przyciski, formularze i inne elementy interaktywne są dostępne.

 

4. Przetestuj obsługiwania strony za pomocą klawiatury

Możesz się zaskoczyć, ale wiele osób korzysta z klawiatury do nawigacji po stronach. Nie tylko osoby z trudnościami motorycznymi czy z problemami z widzeniem.

Dlatego koniecznie sprawdź, czy można poruszać się po stronie, wypełniać formularze i aktywować interaktywne elementy przy użyciu klawiszy Tab, Enter i Strzałek.

Podczas testowania dostępności klawiatury główną zasadą jest: wszystkie funkcjonalności, jakie oferuje strona, mają być dostępne i mają zapewniać wszystkim spójne doświadczenia, bez znaczenia czy osoba korzysta z myszki, czy z klawiatury.

Wiele potencjalnych problemów wyłapiesz już na etapie testowania strony czytnikiem ekranu, jednak test klawiatury też wykonaj.

W ramach testu strony dla klawiatury sprawdź:

• Nawigację po stronie bez użycia myszki – czy można się łatwo przemieszczać pomiędzy różnymi sekcjami strony tylko za pomocą klawiatury. Upewnij się też, że można przeskakiwać między elementami interaktywnymi, takimi jak linki i przyciski.
• Widoczność fokusu – czyli wskazówki wizualne wyróżniające aktywne elementy interaktywne. Zwykle jest to podświetlenie lub zmiana koloru tła/ramki.
• Kolejność tabulacji – czy istnieje logiczna sekwencja elementów na stronie internetowej lub w aplikacji, które zostaną wybrane kolejno, gdy użytkownik naciśnie klawisz Tab na klawiaturze.
  Link do pominięcia nawigacji – czy na stronie jest opcja pominięcia menu strony i przejścia od razu do treści strony lub jej głównego celu (dotyczy to wyżej wspomnianego linka “skip to content”).
• Elementy interaktywne – sprawdź, czy wszystkie przyciski, linki, pola tekstowe i inne interaktywne elementy można aktywować i obsługiwać za pomocą klawiatury – aktywujemy je klawiszem Spacja lub Enter.
• Zamykanie wyskakujących okienek (modali) i rozwijanym menu – osoba korzystająca z klawiatury powinna móc łatwo otwierać, zamykać i nawigować po modalach, oknach dialogowych i rozwijanym menu.
• Formularze i komunikaty błędów – czy można wypełnić formularz, przeskakiwać pomiędzy polami formularza oraz potwierdzić jego wysłanie. Dodatkowo upewnij się, że komunikaty błędów, powiadomienia o sukcesie lub ostrzeżenia są zrozumiałe, widoczne, a jeśli wymagane jest ich samodzielne zamknięcie, to można to zrobić za pomocą klawiatury.

 

5. Wykonaj testy na różnych urządzeniach i przeglądarkach

Ludzie mają różne urządzenia i korzystają z różnych przeglądarek, stąd bardzo ważne jest, aby sprawdzić stronę na tych najbardziej popularnych.

Jest to istotne przede wszystkim dlatego, że:

• różne urządzenia (takie jak komputery stacjonarne, smartfony, tablety) mają różne rozmiary ekranów i możliwości interakcji. Testy na różnych urządzeniach pozwalają upewnić się, że strona jest responsywna i dobrze dostosowuje się do różnych ekranów.
• różne przeglądarki (takie jak Chrome, Firefox, Safari) mają różne silniki renderujące i mogą interpretować kod strony nieco inaczej. Testując stronę na różnych przeglądarkach, wykryjesz ewentualne problemy z wyświetlaniem, czy interakcją z poszczególnymi elementami witryny.

Zwróć uwagę na takie aspekty, jak:

• czy strona jest czytelna i łatwa do nawigacji na różnych urządzeniach, bez konieczności zbliżania lub przewijania,
• czy elementy interaktywne, takie jak przyciski i formularze, są dostępne i działają poprawnie
• czy strona ładuje się szybko i jest responsywna.

Testy powinny obejmować również dostępność dla różnych technologii asystujących, takich jak czytniki ekranu.

 

6. Skonsultuj się z ekspertami ds. dostępności

Samodzielny audyt to pierwszy krok ku dostępności. Można go pominąć i przejść od razu do kroku drugiego, którego raczej nie da się uniknąć. Tym drugim krokiem jest zwrócenie się z prośbą o ocenę ekspercką specjalistów ds. dostępności.

Posiadana przez nich wiedza i doświadczenie w zakresie tworzenia dostępnych stron internetowych zwykle zdobywana jest przez lata i na różnych przykładach. Dzięki temu mają oni głębsze zrozumienie różnych rodzajów niepełnosprawności oraz najlepszych praktyk, które należy zastosować, aby sprostać wymaganiom dostępności cyfrowej. Łatwiej jest im wykryć nawet subtelne problemy z dostępnością, które często bywają pomijane podczas samodzielnego audytu.

Eksperci zewnętrzni nie są też emocjonalnie związani ze stroną, więc ich ocena będzie bardziej obiektywna i dokładniejsza.

Ponadto korzystają oni z różnych narzędzi i technik testowania, co pozwala na kompleksową analizę strony pod kątem dostępności. Posiadają oni dostęp do specjalistycznych oprogramowań i czytników ekranów, które umożliwiają przeprowadzenie bardziej zaawansowanych testów i emulację doświadczeń użytkowników z niepełnosprawnościami.

Nie czekaj do ostatniej chwili, kiedy to prawo zmusi nas do bycia dostępnymi dla wszystkich. Przełoży się to na pozytywne doświadczenia użytkowników, większą lojalność klientów i potencjalnie większe zyski. Jest to okazja do uczynienia swojego biznesu bardziej ludzkim, odpowiedzialnym i inkluzywnym.

 

Grafika tytułowa wykorzystuje zdjęcie: cris renma z Pixabay