WCAG to zbiór wytycznych opracowanych przez World Wide Web Consortium w celu poprawy dostępności treści internetowych dla osób z różnymi niepełnosprawnościami. Jego wdrożenie jest wymagane przez instytucje publiczne i finansowe, a także inne podmioty. Jak wygląda testowanie dostępności WCAG w instytucjach i co należy wiedzieć?
WCAG (Web Content Accessibility Guidelines) to zbiór wytycznych opracowanych przez World Wide Web Consortium (W3C) w celu poprawy dostępności treści cyfrowych dla osób z różnymi niepełnosprawnościami.
Aby przeczytać oddzielny artykuł, który w pełni omawia WCAG i opisuje jego historię, kliknij w tym miejscu.
Wytyczne WCAG opierają się na czterech zasadach dostępności:
Wytyczne WCAG składają się z trzech poziomów zgodności:
Zgodnie z obowiązującymi w Polsce przepisami prawa instytucje publiczne (w tym agencje rządowe i instytucje finansowe sektora publicznego) są zobowiązane do przestrzegania wymogów dostępności cyfrowej, w tym WCAG, zgodnie z Akt Europejski Dostępność z 2019.
Zapewnienie dostępności internetowej to proces tworzenia produktów cyfrowych w sposób umożliwiający jak najszerszemu gronu użytkowników, w tym osobom z różnymi niepełnosprawnościami, swobodne korzystanie z aplikacji. Oznacza to, że aplikacje powinny być projektowane tak, aby spełniać potrzeby osób z różnymi niepełnosprawnościami, takimi jak wady wzroku lub słuchu, ograniczenia poznawcze, niepełnosprawność ruchowa i rozwojowa oraz trudności w poruszaniu się po interfejsie.
Czytniki ekranu są absolutnie niezbędne w testach dostępności. Czytnik ekranu to oprogramowanie przeznaczone dla użytkowników niewidomych lub niedowidzących, które umożliwia im odczytywanie tekstu wyświetlanego na ekranie komputera lub urządzenia mobilnego.
W przypadku aplikacji desktopowych najpopularniejszym wyborem jest NVDA (dostępny w systemie Windows). W przypadku aplikacji mobilnych, nowoczesne smartfony mają wbudowaną tę funkcję. Na Androidzie nazywa się ona TalkBack, a na iOS – VoiceOver.
Przed rozpoczęciem testowania dostępności aplikacji desktopowych należy upewnić się, że oprogramowanie jest prawidłowo skonfigurowane, aby ułatwić nawigację po elementach na stronie.
Pierwszym ważnym ustawieniem jest właściwy syntezator mowy. Zalecanym wyborem jest Microsoft Speech API w wersji 5, wbudowany w system Windows. Wybór syntezatora mowy można znaleźć w menu: Opcje -> Ustawienia -> Mowa -> Syntezator.
Kolejnym ustawieniem, które warto rozważyć, jest podświetlenie elementu na ekranie, na którym aktualnie znajduje się fokus. Ta opcja jest bardzo przydatna podczas nawigacji po stronie za pomocą klawiatury. Opcję tę znajdziesz w Opcje -> Ustawienia -> Widoczność -> Podświetlanie wizualne -> Włącz podświetlanie.
W systemie Android funkcję TalkBack można włączyć w ustawieniach smartfona: Ustawienia → System → Ułatwienia dostępu → TalkBack (nazwy w ustawieniach mogą się różnić w zależności od marki i modelu smartfona). W menu TalkBack możesz dostosować ustawienia czytnika do swoich potrzeb, od rozmiaru czcionki po odwrócenie kolorów.
W systemie iOS wygląda to podobnie: Ustawienia → Dostępność → VoiceOver.
W systemie Android warto również skonfigurować szybką nawigację między nagłówkami. Jest to przydatne, gdy użytkownik chce szybko przejść na dół strony. W takim przypadku nawigacja po nagłówkach pozwala użytkownikowi pominąć elementy, które nie są nagłówkami. Do tego typu nawigacji służą gesty przesuwania w górę/w dół.
Warto zauważyć, że gest ten można przypisać nie tylko do nawigacji po nagłówkach, ale także do różnych innych opcji, w tym tempa mowy, nawigacji po: słowach, wierszach, akapitach itd.
Aby przypisać ustawienie do tego gestu, z włączoną funkcją TalkBack, wykonaj gest zaznaczenia → ✅ (góra – dół – góra). TalkBack będzie następnie cyklicznie przeglądał dostępne opcje po każdym wykonanym geście. Najczęściej wybieranym ustawieniem są nagłówki. Po przypisaniu tego ustawienia gestu możesz używać gestu przesunięcia w górę/w dół, aby poruszać się tylko po nagłówkach na stronie.
Przede wszystkim ważne jest zrozumienie „teorii” testowania dostępności. Zanim przejdziemy do praktyki, musimy zrozumieć, co stanowi nieprawidłowe zachowanie, na przykład: który element powinien być fokusowany podczas wchodzenia na stronę internetową, jaka powinna być prawidłowa kolejność elementów fokusowanych oraz czy dany element faktycznie odzwierciedla swoją zamierzoną rolę.
Początkowy fokus odnosi się do pierwszego elementu interaktywnego (np. formularza, przycisku, linku), który otrzymuje fokus po załadowaniu strony internetowej. Zapewnia on użytkownikom poruszającym się za pomocą klawiatury lub technologii wspomagających (np. czytników ekranu) łatwy dostęp do pierwszego elementu interaktywnego na stronie.
Jak pokazano w poniższych przykładach, gdy użytkownik wchodzi na stronę, fokus jest ustawiany na pierwszym dostępnym elemencie interaktywnym. W przykładzie nr 1 jest to link do strony głównej, w przykładzie nr 2 jest to menu nawigacyjne, a w przykładzie nr 3 jest to pole wyszukiwania.
Przykłady początkowego skupienia
Pułapka fokusu uniemożliwia nawigację poza określony obszar strony internetowej. Na przykład, gdy użytkownik wykonuje czynność, która uruchamia okno dialogowe, nie powinien mieć możliwości przejścia do elementów na „warstwie” poniżej okna dialogowego. Gesty nawigacyjne i ruch fokusu powinny odbywać się wyłącznie w obrębie pola dialogowego. Jeśli użytkownik spróbuje wyjść poza ten obszar, fokus zostanie przeniesiony z powrotem na pierwszy element w kontenerze.
Po wejściu na stronę z włączonym czytnikiem ekranu powinien pojawić się widoczny kontur informujący o bieżącym obszarze strony.
W smartfonach z systemem Android podświetlenie wygląda następująco:
Wygląd wyróżnienia ostrości
Na smartfonach z systemem iOS podświetlenie punktu ostrości wygląda inaczej – jego kontur jest czarny.
Na urządzeniach mobilnych nawigacja po elementach strony odbywa się za pomocą gestów. Podstawowe gesty używane do nawigacji to przesunięcia. Aby przejść do następnego elementu na stronie, wykonaj gest przesunięcia w prawo na ekranie smartfona – fokus (kontur) powinien wówczas przenieść się do następnego elementu w DOM. Podobnie, aby przejść do poprzedniego elementu na stronie, wykonaj gest przesunięcia w lewo.
Po ustawieniu fokusu na wybranym elemencie interaktywnym, np. przycisku, dwukrotne dotknięcie ekranu potwierdza wybór, a wybrana akcja zostaje wykonana.
Ważne:
Nie ma znaczenia, gdzie na ekranie urządzenia mobilnego zostanie wykonany gest dwukrotnego stuknięcia (nie musi on być wykonany bezpośrednio na elemencie). Dopóki fokus jest ustawiony na elemencie, na którym chcemy wykonać akcję, wykonanie gestu spowoduje jej wykonanie.
NVDA oferuje kilka trybów, w tym tryb interaktywny i tryb formularza. Najczęściej używanym trybem jest tryb interaktywny, ponieważ zawiera wszystkie funkcjonalności pozostałych trybów – można go uznać za opcję typu „wszystko w jednym”.
Podczas korzystania z trybu interaktywnego (nazywanego również trybem czytania), po rozpoczęciu nawigacji po elementach interaktywnych za pomocą klawisza „Tab”, NVDA automatycznie przełączy się do trybu formularza.
Istnieją pewne różnice między NVDA a TalkBack/VoiceOver. Na urządzeniach mobilnych czytniki ekranu ustawiają fokus na wszystkie elementy (np. przyciski, linki), natomiast podczas nawigacji za pomocą klawiatury w NVDA na komputerze stacjonarnym użytkownik sam decyduje, po której treści chce się poruszać.
Do nawigacji po elementach interaktywnych służy klawisz „Tab”. Naciśnięcie tego klawisza spowoduje przeniesienie fokusu do następnego elementu interaktywnego. Aby przejść do poprzedniego elementu interaktywnego, należy użyć kombinacji klawiszy „Shift + Tab”.
Można również skupić się na treści tekstowej (od góry do dołu strony) za pomocą klawiszy strzałek na klawiaturze.
Klawisze strzałek w górę/w dół: fokus zostanie ustawiony na każdym kolejnym elemencie na stronie.
Przykłady klawiszy strzałek w górę/w dół
Jak pokazano w powyższym przykładzie, fokus został przeniesiony z jednego elementu na inny, znajdujący się poniżej. Po ustawieniu fokusa na konkretnym elemencie, NVDA odczyta całą zawartość i wszystko, co znajduje się w czerwonym obramowaniu.
Klawisze strzałek w lewo/prawo: w przypadku treści tekstowej fokus będzie przesuwany litera po literze.
Przykłady klawiszy strzałek w lewo/prawo
Za każdym razem, gdy naciśniesz klawisz strzałki w prawo na klawiaturze, fokus (żółty kontur) przesunie się na następną literę w tekście. NVDA będzie ogłaszać każdą literę z osobna.
Przydatnym skrótem do nawigacji jest nawigacja po nagłówkach. Aby poruszać się po nagłówkach na stronie, użyj litery „h” na klawiaturze. Po naciśnięciu litery „h” fokus zostanie przeniesiony do następnego dostępnego nagłówka. Podobnie jak w poprzednim skrócie, skrót „Shift + h” służy do przejścia do poprzedniego nagłówka.
Elementy interaktywne w wersjach przeglądarek na komputery stacjonarne są zazwyczaj potwierdzane klawiszami „Enter” i „Spacja” na klawiaturze. Istnieje jednak zasada, że linki należy potwierdzać wyłącznie klawiszem „Enter”, natomiast przyciski można potwierdzać zarówno klawiszami „Spacja”, jak i „Enter”.
Chociaż przedmiotem testów dostępności jest ta sama strona internetowa, czasami czytniki ekranu na urządzeniach mobilnych (Android i iOS) zachowują się inaczej. Dlatego należy zachować czujność w związku z tymi różnicami. Rozważmy na przykład stronę internetową w3schools:
Różnice w funkcjonalności czytników ekranu
W systemie Android element z tekstem „Wprowadzenie do ułatwień dostępu” jest wyostrzony jako całość (jako jeden element) – co jest widoczne po ramce wyostrzenia. Dodatkowo TalkBack ogłasza ten element jako „Wstęp do dostępności, Nagłówek 1, co sprawia, że takie zachowanie jest prawidłowe.
W systemie iOS sytuacja wygląda jednak nieco inaczej. Ten sam element jest skupiony w inny sposób (VoiceOver traktuje go jako dwa oddzielne elementy). W tym przypadku VoiceOver ogłasza ten sam nagłówek inaczej, najpierw czytając „Dostępność, Poziom nagłówka 1 i dopiero po przejściu do następnego elementu ogłasza „Wprowadzenie, Poziom nagłówka 1.
Testowanie dostępności na urządzeniach mobilnych i stacjonarnych jest kluczowym elementem zapewniającym dostępność aplikacji i stron internetowych dla użytkowników z różnymi niepełnosprawnościami oraz umożliwiającym identyfikację potencjalnych barier w dostępności. Aby przeprowadzić skuteczne testy, ważne jest uwzględnienie różnych aspektów, takich jak kolejność wyświetlania elementów oraz poprawność komunikatów czytników ekranu.
Należy również pamiętać, że dostępność powinna być częścią procesu rozwoju oprogramowania – im wcześniej problemy z dostępnością zostaną rozwiązane, tym łatwiej będzie uniknąć kosztownych poprawek na późniejszym etapie. Wdrożenie standardów WCAG na etapie projektowania UX/UI jest zdecydowanie zalecane, aby zminimalizować wszelkie ryzyka prawne związane z zapewnieniem zgodności z wymogami dostępności.
Narzędzia wspomagające, takie jak czytniki ekranu, są pomocne w weryfikacji dostępności cyfrowej, jednak najlepszą metodą oceny dostępności jest testowanie jej z udziałem rzeczywistych użytkowników, którzy na co dzień korzystają z technologii wspomagających.
