Sygnity

SygnITy Expert

Nie takie WCAG straszne jak je malują – przykłady realizacji wytycznych dostępności stron internetowych

Jako przedstawicielka pokolenia Y, urodzona w latach 80-tych, od najmłodszych lat miałam styczność z nowinkami technologicznymi. Obserwowałam rozwój komputerów, gier wideo, telefonów. Miałam czas przyzwyczaić się do świata, w którym do kolejnych dziedzin życia wkracza informatyzacja, wypierając tradycyjne sposoby komunikacji, nauki, załatwiania spraw urzędowych, zdrowotnych, kupowania biletów, oglądania filmów, słuchania muzyki, utrzymywania relacji (pamiętacie „Naszą klasę”?). Dziś informatyzacja jest wszechobecna i wpływa na każdy aspekt naszego życia. Już nie wyobrażamy sobie świata bez dostępu do Internetu i wszystkich e-usług, które ułatwiają i uatrakcyjniają nam codzienność. Dzisiejsze przedszkolaki otoczone zaawansowaną technologią przyjmują ją jako coś naturalnego i reagują z otwartością na kolejne doświadczenia. Dziadkowie słyszą opowieści o nauce literek i programowania, o rysowaniu i druku 3D, o czytaniu książek i okularach VR. Zderzenie światów tych pokoleń jest fascynujące, bo pokazuje jak wiele, jako ludzkość, osiągnęliśmy przez te kilkadziesiąt lat w dziedzinie technologii, ale prowokuje też pytanie o to, czy wystarczająco zadbaliśmy o inkluzywność cyfrowego świata.

Wg danych GUS z 2023, w Polsce udział seniorów, czyli osób w wieku 60+, wynosi około 26%, czyli 9,8 miliona ludzi. Prognozy wskazują, że w 2060 r. w Polsce będzie mieszkać już prawie 12 mln osób 60+ stanowiąc 38,3 proc. ogółu ludności. W Europie, według danych Eurostatu, w 2023 roku osoby w wieku 65 lat i starsze stanowiły 21,3% populacji Unii Europejskiej. Udział seniorów w społeczeństwie UE rośnie, a w ciągu ostatniej dekady zwiększył się o 3 punkty procentowe. W Polsce udział osób starszych rośnie najszybciej w UE.

Dla osób zaangażowanych w tworzenie systemów informatycznych dane te oznaczają, że coraz więcej Użytkowników stanowić będą osoby starsze, zmagające się z różnego typu ograniczeniami. Ograniczenia dotyczą również osób z niepełnosprawnościami, których w Polsce mamy ok. 4,9 mln do 7,7 mln osób (w zależności od przyjętego kryterium niepełnosprawności). Na wykluczenie cyfrowe narażone są więc nie tylko osoby z brakiem dostępu do Internetu czy niskim poziomem kompetencji cyfrowych, ale również te zmagające się z barierami społecznymi, takimi jak wiek czy niepełnosprawność.

Aby zapewnić dostępność treści internetowych dla wszystkich użytkowników, niezależnie od ich umiejętności czy sprawności, opracowano tzw. Wytyczne WCAG (Web Content Accessibility Guidelines). Ich autorem jest międzynarodowa organizacja W3C (World Wide Web Consortium) zajmująca się tworzeniem standardów dla technologii internetowych. Pierwsza wersja WCAG została opublikowana w 1999 roku, obecnie rekomendowaną jest wersja WCAG 2.2. Wytyczne WCAG nie są aktem prawnym, a jedynie zaleceniami, do których odwołują się państwa w swoich aktach prawnych. W Polsce, obowiązek stosowania standardu WCAG wprowadziła ustawa z 4 kwietnia 2019 roku. Obowiązek ten dotyczy m.in. jednostek sektora finansów publicznych, jednostek finansowanych ze środków publicznych, organizacji działających na rzecz osób z niepełnosprawnościami i starszych. Nie zmienia to faktu, że każda strona internetowa może korzystać z wytycznych WCAG i dążyć do bycia dostępną dla wszystkich Użytkowników.

Standard WCAG opiera się na 4 głównych zasadach:

  1. Postrzegalność – wszystkie informacje na stronie (tekstowe, graficzne, audio, video) powinny być dostępne dla osób z różnymi ograniczeniami, np. sensorycznymi.
  2. Funkcjonalność – korzystanie ze wszystkich możliwości strony, wchodzenie w interakcje powinno być możliwe również dla osób z ograniczeniami, np. motorycznymi.
  3. Zrozumiałość – treści na stronie powinny być zrozumiałe, a działanie strony powinno być przewidywalne dla osób z ograniczeniami, np. poznawczymi.
  4. Kompatybilność – treści na stronie powinny być zgodne z technologiami wspomagającymi, np. czytnikami ekranu.

Każda z zasad dzieli się na wytyczne, które zawierają konkretne kryteria sukcesu, klasyfikowane na poziomach A, AA i AAA. Poziom A to najbardziej podstawowe funkcje, które zapewniają minimalny poziom dostępności. Poziom AA dotyczy wytycznych związanych z najczęstszymi barierami osób z ograniczeniami, zapewnia średni poziom dostępności. Poziom AAA zawiera najbardziej restrykcyjne wymagania dostępności. Na wszystkich poziomach standard WCAG zawiera łącznie 78 zaleceń (kryteriów sukcesu).

Wdrożenie kilkudziesięciu zasad, zwłaszcza na istniejącej już stronie, jest trudnym i pracochłonnym zadaniem. Wymaga zaangażowania analityków, programistów, testerów oraz UX designerów. W dodatku zmiany wprowadzone w ramach WCAG nie są spektakularne, dla zwykłego Użytkownika mogą być niezauważalne. Wszystko to sprawia, że temat realizacji WCAG nie spotyka się z entuzjazmem zespołów projektowych. Z drugiej strony, dostępność bywa postrzegana bardzo minimalistycznie. Zdarzają się strony, na których realizacja wytycznych WCAG sprowadza się jedynie do funkcji powiększania czcionki i zmiany kontrastu.

Wdrożenie kilkudziesięciu zasad, zwłaszcza na istniejącej już stronie, jest trudnym
i pracochłonnym zadaniem. Wymaga zaangażowania analityków, programistów, testerów oraz UX designerów. W dodatku zmiany wprowadzone w ramach WCAG nie są spektakularne, dla zwykłego Użytkownika mogą być niezauważalne. Wszystko to sprawia, że temat realizacji WCAG nie spotyka się
z entuzjazmem zespołów projektowych. Z drugiej strony, dostępność bywa postrzegana bardzo minimalistycznie. Zdarzają się strony, na których realizacja wytycznych WCAG sprowadza się jedynie do funkcji powiększania czcionki i zmiany kontrastu.

Każdy przykład zawiera:

  • tabelkę z nazwą realizowanej wytycznej oraz nazwą i opisem kryterium sukcesu, czyli mówiąc prościej: opis tego jak strona powinna działać, aby spełniać daną wytyczną WCAG
  • pod tabelką opis na czym polega wytyczna oraz przykład jej realizacji
  • ilustrację opisywanego przykładu

Przykład 1:

Ta wytyczna WCAG oznacza, że każdy element wizualny lub multimedialny powinien mieć tekstowy odpowiednik, który przekazuje tę samą informację lub pełni tę samą funkcję. Przykładem elementu wizualnego na stronie może być przycisk nawigacyjny. Naciskając go użytkownik przenosi fokus na początek strony. Dzięki opisowi tekstowemu, który wyświetla się po najechaniu myszką i podczas nawigacji klawiaturą, użytkownik np. z ograniczeniami poznawczymi nie ma wątpliwości, co oznacza ten przycisk i co spowoduje jego naciśnięcie. Drugim przykładem realizacji tej wytycznej jest opis ‘Wpisz tekst aby wyszukać’ znajdujący się nad polem z lupką. Znaczenie symbolu lupki może nie być niezrozumiałe, więc opis tekstowy stanowi w tym przypadku wyjaśnienie funkcji.

Przykłady alternatywy tekstowej dla treści nietekstowej

Przykład 2:

Ta wytyczna zapewnia, że informacje na stronie nie są przekazywane wyłącznie poprzez kolor. Przykładem realizacji tej wytycznej może być wyróżnienie pól wymaganych – oprócz czerwonej ramki i czerwonej etykiety – również tekstem: ‘To pole jest wymagane!’. Dzięki temu opisowi, użytkownik np. z ograniczeniami wzroku dowie się, co powinien zrobić, aby poprawnie wypełnić formularz, bez konieczności widzenia kolorów.

Przykład możliwości odczytywania znaczenia za pomocą koloru i tekstu

Przykład 3:

Przykład możliwości odczytywania znaczenia za pomocą koloru i tekstu

Ta wytyczna zapewnia, że osoby z niepełnosprawnościami mogą szybciej i łatwiej nawigować po stronie internetowej, pomijając powtarzające się elementy, np. menu, bannery, nagłówki. Przykładem realizacji tej wytycznej są tzw. skip linki. Aby z nich skorzystać należy ustawić fokus w pasku adresu i nacisnąć klawisz TAB. Pojawi się dodatkowy pasek z przyciskami wyświetlanymi naprzemiennie: np. Przejdź do zawartości, Przejdź do menu, Przejdź do stopki. Naciśnięcie klawisza ENTER spowoduje przeniesienie fokusa we wskazane miejsce. Umożliwia to użytkownikowi skupienie się na wybranej treści, bez konieczności przechodzenia przez powtarzalne elementy.

Przykład możliwości pominięcia bloków treści za pomocą skip linków

Przykład 4:

Ta wytyczna mówi o tym, że użytkownik wie dokąd prowadzi dany link, zanim go kliknie lub aktywuje w inny sposób. Poniższe przykłady pokazują linki, których cel można jednoznacznie określić na podstawie ich opisu lub kontekstu. Dzięki temu użytkownicy wiedzą, które linki są dla nich istotne oraz czego spodziewać się po otwarciu linku. Dodatkowym ułatwieniem dla osób z ograniczeniami jest informowanie, że link zostanie otwarty w nowej karcie – jak na poniższym przykładzie. Pomaga w zorientowaniu się, co się wydarzyło po kliknięciu linku i w odszukaniu otwartej strony.

Przykłady linków, których cele wynikają z opisu
Przykład linku, którego cel wynika z kontekstu
Przykład sposobu informowania o otwarciu linku w nowej karcie

Przykład 5:

Ta wytyczna zapewnia, że użytkownicy, którzy korzystają z klawiatury do nawigacji po stronie zawsze wiedzą, gdzie znajduje się fokus (czyli aktualnie wybrany element). W poniższym przykładzie, dla użytkownika poruszającego się po stronie klawiaturą, fokus jest stale widoczny poprzez obramowanie aktualnie wybranego elementu. Takie rozwiązanie ułatwia nawigację po stronie, bez konieczności domyślania się, gdzie znajduje się kursor. Oprócz tego, dzięki tej funkcji, czytniki ekranu (dla osób słabowidzących i niewidomych) mogą rozpoznać i poinformować użytkownika o aktywnym elemencie.

Przykład zmiany widoku elementu, na którym znajduje się fokus

Przykład 6:

Ta wytyczna ma na celu zapewnienie, że zmiana położenia fokusu (np. przejście z jednego elementu do drugiego na stronie) nie wywołuje niespodziewanych działań, np. wybrania jakiegoś elementu czy otwarcia nowego okna. Na poniższym przykładzie, użytkownik wypełniający formularz za pomocą klawiatury, może przenosić fokus pomiędzy checkboxami przyciskiem TAB, ale aby zaznaczyć wybraną pozycję musi nacisnąć przycisk SPACJA. Funkcja ta zapewnia, że zaznaczenie elementu jest świadomą decyzją użytkownika i zmniejsza ryzyko wykonania działań nieprzewidywalnych czy niepożądanych.

Przykład przenoszenia fokusu bez nieoczekiwanej zmiany kontekstu

Przykład 7:

Ta wytyczna ma na celu zapewnienie, że działania na stronie, które mogą prowadzić do zmian prawnych, finansowych czy edytowania danych, są odwracalne, umożliwiają ich sprawdzenie i potwierdzenie. Przykładem realizacji tej wytycznej jest udostępnienie Użytkownikowi formularza do przejrzenia wprowadzonych danych. Jeśli uzna, że chce je poprawić, naciska przycisk [Popraw]. Po ostateczniej weryfikacji użytkownik naciska przycisk [Zapisz]. Taki mechanizm umożliwia osobom z ograniczeniami sprawdzenie dokonanych wyborów, cofnięcie błędnych działań i zapewnia kontrolę nad swoimi decyzjami.

Przykład możliwości weryfikacji i poprawy danych przed zapisaniem formularza

Tych kilka przykładów pokazuje, że zwiększenie dostępności strony można osiągnąć już niewielkimi modyfikacjami. I nawet jeśli nie jesteśmy zobligowani do wdrożenia wytycznych WCAG, to podczas projektowania strony, wprowadzania zmian warto zastanowić się czy rozwiązania, które proponujemy sprawdzą się również dla osób z ograniczeniami. Dla nas to mogą być nic nieznaczące niuanse, a dla kogoś innego bardzo ułatwić poruszanie się w cyfrowym świecie.

Źródła:

 
https://www.money.pl/emerytury/oskar-sobolewski/najstarszy-region-w-polsce-tam-zyje-najwiecej-seniorow-6988910293208000a.html
https://forsal.pl/gospodarka/demografia/artykuly/9567105,alarmujace-dane-demograficzne-polska-starzeje-sie-najszybciej-w-europ.html
https://niepelnosprawni.gov.pl/p,78,dane-demograficzne
https://www.w3.org/WAI/standards-guidelines/wcag/pl
https://udigroup.pl/blog/co-to-jest-wcag-2-1-wytyczne/
https://pl.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines
https://secure.e-konsulat.gov.pl/
https://www.gov.pl/
https://interesant.reja24.gov.pl/
https://widzialni.pl/