Z poprzedniego wpisu znasz już zawartość ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze. W tym czekają na Ciebie praktyczne wskazówki, jak dostosować stronę internetową, aby spełnić obowiązki płynące z ustawy oraz uniknąć zbędnych kar i kontroli. Jednak zanim przerazisz się perspektywą wywrócenia całej strony do góry nogami, pomyśl sobie, że nie jesteś pionierem na tej drodze, ponieważ podobne wymagania od 2019 r. dotyczą podmiotów publicznych (ustawa z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych). Oznacza to, że wiele rozwiązań intuicyjnie już znasz, a jeśli nie, to możesz łatwo je sprawdzić na stronach internetowych takich podmiotów (więcej w sekcji 5. Skąd czerpać informacje?).

1.Dla kogo to robię?

Największymi beneficjentami udogodnień są… wszyscy. Dalsze przykłady udowodnią Ci, że tak naprawdę każdy z nas kiedyś (będzie) potrzebował opisywanych rozwiązań. Przykładowo wszyscy byliśmy kiedyś w pośpiechu i potrzebowaliśmy zamiast komputerowej strony internetowej dostępu do jej mobilnej wersji i oczekiwaliśmy, że ta ostatnia będzie działać tak samo dobrze.

Pamiętaj, że dostosowania przygotowujesz przede wszystkim dla siebie, ponieważ: (1) każdemu może przytrafić się sytuacja losowa, która czasowo (np. złamanie nogi lub karmienie piersią i niechęć obudzenia dziecka dźwiękami z zewnątrz) lub trwale (np. nieodwracalna utrata słuchu) doprowadzi do niedyspozycji fizycznej lub psychicznej, (2) jest to korzystne biznesowo – zwiększasz swoje szanse na uzyskanie funduszy zewnętrznych, np. unijnych, a dodatkowo rozszerzasz swoją grupę odbiorców. Trzeba tu mieć na uwadze, że skoro obowiązki obejmą od czerwca wszystkich, to tym bardziej, aby się wyróżnić, musisz dostosować swój produkt lub usługę najlepiej jak to możliwe. Z tego powodu wymienianie “grup odbiorców” rozwiązań dostępnościowych służy jedynie lepszemu zobrazowaniu wyzwań, z jakimi Twoi klienci mogą się mierzyć, i pokazaniu kluczowych aspektów dostosowań. Warto uwzględnić następujące niepełnosprawności:

  • szeroko rozumiana neuroróżnorodność (np. spektrum autyzmu, ADHD, dysleksja),
  • neurologiczne (np. padaczka),
  • ruchowe (np. ktoś nie może używać myszki),
  • ktoś w ogóle nie może mówić lub ma z tym trudności,
  • ktoś w ogóle nie widzi lub widzi w ograniczonym zakresie (odległości lub kolorów),
  • ktoś w ogóle nie słyszy lub słyszy tylko ograniczone spektrum dźwięków (głośność w takim przypadku nie ma znaczenia, ponieważ chodzi o częstotliwość dźwięku).

Na obrazku od Association
for the Deaf and Hard of Hearing zależność etapów tracenia słuchu

Takie ograniczenia nie znają wieku ani narodowości, choć statystycznie mogą częściej dotykać osoby starsze (co jest nie bez znaczenia w starzejącym się społeczeństwie) i nieznające biegle języka kraju, w którym się znajdują. 

2. Słowa klucze

Pierwsze słowo klucz to “dostępność”. Oznacza ona umożliwienie korzystania z usług i produktów wszystkim typom użytkownika. W dokumentach unijnych rozumie się ją bardzo szeroko – obejmuje transport, infrastrukturę, architekturę, technologie i systemy informacyjno-komunikacyjne oraz produkty i usługi. 

Warto zapamiętać też “tekst alternatywny”, który opisuje elementy nietekstowe (na stronach internetowych, w aplikacjach mobilnych czy plikach np. docx, pdf) tak, aby oprogramowanie użytkowników mogło przetworzyć i dostarczyć niezbędną informację w sposób możliwy do odbioru przez użytkownika. Chodzi o udostępnienie treści wizualnych, m.in. zdjęć, obrazków ozdobnych, ikon, wykresów, animacji, a także sytuacje, kiedy użytkownik wyłącza w przeglądarce pokazywanie grafik i zdjęć. 

Pozornie podobny “tekst łatwy do czytania” oznacza nie tyle alternatywny sposób przekazania treści co jej uproszczenie. Informacja pozostaje przekazywana tym samym kanałem. Tworzy się proste i krótkie komunikaty, a ich zrozumienie ułatwia się za sprawą przykładów czy grafik. Głównymi adresatami są osoby z trudnościami poznawczymi (np. z niepełnosprawnościami intelektualnymi czy urazami neurologicznymi) czy cudzoziemcy, którzy nie opanowali jeszcze języka w stopniu pozwalającym na swobodną komunikację. 

Norma WCAG (na której bazuje większość rozwiązań w sekcji 3. Co muszę dostosować?) definiuje poziomy dobrowolnie wprowadzanej zgodności z kryteriami dostępności. Skala obejmuje poziom A, AA, AAA, gdzie ten pierwszy oznacza spełnienie najbardziej podstawowych wytycznych, a ostatni może być wręcz niemożliwy dla niektórych typów treści. Idealnie byłoby dążyć do zgodności na poziomie AA.

3. Co muszę dostosować? 

Niezależnie od specyfiki Twojej strony czy aplikacji istnieją zalecenia uniwersalne dla wszystkich, tj.:

  • więcej znaczy mniej: nie dodawaj do strony elementów zbędnych, stawiaj na proste rozmieszczenie i duże marginesy;
  • za … poruszeniem ręki: układ strony ma się automatycznie dostosowywać do rozdzielczości ekranu;
  • mówisz “a”, powiedz “b”: stałe elementy (np. menu, koszyk, przyciski) umieść w tych samych miejscach na każdej podstronie.

Bardziej techniczne aspekty, które musisz wziąć pod uwagę podczas przygotowania strony do nowej rzeczywistości prawnej to (w nawiasie podaję numery odpowiadających rozdziałów normy WCAG 2.1. w polskim tłumaczeniu, której pełną treść znajdziesz tu: https://www.w3.org/Translations/WCAG21-pl/):

  • alternatywny tekst dla obrazów (1.1.1) – funkcja “alt text”, co do której wymagania różnią się w zależności od charakteru tekstu, np. testowego lub czysto dekoracyjnego;
  • napisy (które nie mogą nachodzić na tekst obecny w oryginalnym wideo), audiodeskrypcje (które nie mogą nachodzić na oryginalne treści audio) oraz tłumaczenia na język migowy dla nagrań audio i wideo (1.2), a także transkrypcje (o nich mówią wytyczne rządowe);
  • wygląd strony (1.4) – m.in. kontrast (np. unikaj ciemnego tła tam, gdzie używasz ciemnej czcionki), możliwość powiększenia tekstu i samej strony, dostosowanie do trybu pionowego i poziomego, a nawet innych alternatywnych, odstępy, rozmiar i rodzaj czcionki (choć w niektórych źródłach pojawiają się konkretne wartości rozmiaru, to na stronach rządowych zaleca się po prostu zdrowy rozsądek i korzystanie z czcionek powodujących najmniej dwuznaczności, tj. Arial, Times New Roman, Verdana, Helvetica, Calibri, Open Sans), regulacja podświetlenia ekranu;

(wzór na wielkość czcionki)

  • dostępność z klawiatury (2.1) – wszystkie elementy aktywne (np. przyciski, linki, pola formularzy) powinny być dostępne za pomocą interfejsu klawiatury (docelowo: strzałek, tabulatora, dotykowo lub innych standardowych metod wyjścia), a więc za pomocą klawiatury nawet, jeśli dane urządzenie jej nie ma (np. zewnętrzne klawiatury, interpretery pisma ręcznego, systemy do przetwarzania mowy na tekst z wbudowaną symulacją klawiatury); czym innym są symulujące mysze, które wykonują operacje za sprawą interfejsu wskaźnika myszy, nie klawiatury;
  • przystępne nagłówki i etykiety kompatybilne z urządzeniami użytkownika (2.4.6) – w tym respektowanie wtyczek użytkownika;
  • widoczny kursor klawiatury (“fokus”, 2.4.7) – np. ramki, podświetlenia;
  • alternatywne sposoby nawigacji dla osób z trudnościami manualnymi (2.5) – np. aktywacja gestami, wielkość celu dotykowego, wszystkie narzędzia, gdzie trzeba zastosować siłę (np. wcisnąć klawisz), co przekłada się na szybkość znikania komunikatu i możliwość użycia skrótów klawiszowych.

4. Jak sprawdzić, czy moja strona działa zgodnie z planem?

Testowanie można podzielić na kilka, równie potrzebnych, rodzajów:

  • testy manualne: próbujemy obsłużyć każdą funkcjonalności na stronie lub w aplikacji tylko za pomocą klawiatury;
  • testy automatyczne: badamy za pomocą zewnętrznych narzędzi (więcej w sekcji 5. Skąd czerpać informacje?), które sygnalizują najczęstsze, łatwe do wykrycia usterki;
  • testy z użytkownikami: angażujemy osoby z każdej opisanej wcześniej grupy niepełnosprawności i ulepszamy testowane produkty lub usługi na podstawie ich opinii.

W e-commerce ważne jest, aby nie pominąć żadnej podstrony, ani żadnego etapu ścieżki zakupowej:

  • strona główna,
  • kategorie,
  • karty produktów,
  • koszyk,
  • checkout,
  • formularze.

Poniżej spójrz na przykłady wyników takiego testu na stronie internetowej pewnego prawnika z Trójmiasta :). 

(brak tekstu alternatywnego przy zdjęciu do artykułu: „Miłość na wokandzie – jak uwieść prawnika w walentynki?”)

(nagłówek niewystarczająco jasny w odbiorze)

Ja na przykład poprawiłem ten wpis 🙂 Jakby co – sprawdź też swoją stronę narzędziem WAVE. A nie zaszkodzi rzut okiem na colorblindess simulator albo contrast checker.

5. Skąd czerpać informacje?

Jako że w jednym artykule tematu “dostępności” nie da się wyczerpać, zostawiam Cię z listą narzędzi i źródeł informacji, gdzie znajdziesz odpowiedź na większość swoich pytań oraz przykłady poprawnie przygotowanych aplikacji i stron:

Jeśli nawet po wykonaniu wszystkich dostosowań zgodnie z instrukcjami nie masz pewności, czy Twoja strona jest dostępna, skorzystaj z narzędzi sprawdzających, tj.:

  • https://wave.webaim.org/
  • wtyczki axe DevTools lub Lighthouse
  • aplikacji Reader Mode.

Narzędzia nakierowane na poszczególne grupy niepełnosprawności to m.in.

  • czytniki ekranowe w przypadku osób niewidomych (np. NVDA, JAWS)
  • klawiatury alternatywne i wirtualne w przypadku osób z ograniczeniami ruchowymi.

6. Podsumowanie

Masz wrażenie, że wszystkie opisane dostosowania to za dużo? Na początek zastosuj się przynajmniej do następujących wskazówek:

1) współpracuj z osobami z niepełnosprawnościami – nie bój pytać się o ich rady, sprawdzaj nowe rozwiązania z głównymi zainteresowanymi;

2) dbaj o dostępność od samego początku – zmiany mogą być trudniejsze i bardziej kosztochłonne niż wbudowanie odpowiednich rozwiązań już na etapie projektowania produktu czy usługi. Dlatego też stosowanie prowizorycznych udogodnień (“accommodations”) powinno być ostatecznością, a podstawą – inkluzywne projekty (“accessible design”) graficzne i programistyczne.

Za pomoc w tworzeniu wpisu dziękuję Zuzie Skurzak!

💛 Jeśli podoba Ci się ten wpis i chcesz wspierać moją twórczość, zajrzyj na mój profil na Suppi TUTAJ 👇

☕ Dodaj mi energii!

Sprawdź więcej wpisów związanych z Dostępność