Różnice między WCAG 2.1, a dostępnością cyfrową. Czym jest deklaracja dostępności?
Przede wszystkim WCAG to określenie międzynarodowe dla zestawu reguł, które mają ułatwić korzystanie z internetu osobom z różnymi dysfunkcjami (przede wszystkim wzroku). Zbiór tych reguł w oficjalnym tłumaczeniu na język polski dostępny jest na stronie World Wide Web Consortium. Natomiast o samej dostępności cyfrowej w Polsce mówi ustawa, której ostatnia nowelizacja miała miejsce 17 kwietnia 2023 roku. W załączniku do ustawy zawierają się wytyczne, które należy spełnić, aby strona lub aplikacja były dostępne cyfrowo. W największym skrócie polska dostępnośc cyfrowa określa, które punkty WCAG są brane pod uwagę i na jakim poziomie – A czy AA (o poziomach za chwilę). Zatem spełniając standardy WCAG na poziomie AA – mozna być pewnym, że spełnia się standardy dostępności cyfrowej, natomiast spełniając standardy dostępności cyfrowej – nie można być pewnym, że spełnia się standardy WCAG. WCAG jest dużo szerszym pojęciem. Ustawa mówi też o karach za nieprzestrzeganie dostępności cyfrowej oraz daje też jeden obowiązkowy dokument: Deklarację dostępności. Wzór deklaracji dostępności znajdziesz w dalszej części artykułu.
Idealne rozwiąniem jest, aby zastosować wszelkie wytyczne WCAG 2.1, aby stworzyć najbardziej przyjazną użytkownikowi stronę. W moim przekonaniu, każdy UX designer stron, powinien stosować WCAG w swoich projektach, bo takie strony są nie tylko dobre dla osób z niepełnosprawnościami, ale także łatwe w odbiorze dla wszystkich odbiorców. Mitem jest też, że strona dostępna cyfrowo musi być brzydka.
Kogo obowiązuje ustawa o dostępności cyfrowej?
Jak się dłużej przyjrzymy całej dostępności cyfrowej, to z nią jest podobnie jak z SEO. Stosując określone reguły, nie tylko osiągamy cel w postaci lepszej strony dla osób z niepełnosprawnościami (w przypadku SEO celem jest wyższe miejsce w Google), ale przede wszystkim witryna stanie się bardziej przejrzysta, usystematyzowana i przez to podnosząca słynne UX. No ale nie każdy chce wydawać kilka tysięcy na wdrożenie dostępności cyfrowej, by strona lepiej wyglądała. Kto zatem nie ma wyboru i musi to zrobić? Przytaczam tylko część instytucji, bo lista jest dosyć obszerna:
-
- jednostki samorządu terytorialnego, np. Urzędy Gmin,
- uczelnie publiczne,
- państwowe i samorzadowe instytucje kultury,
- organizacje pozarządowe, które działają w jednej ze sfer: ochrony i promocji zdrowia, działalność na rzecz osób niepełnosprawnych, działalność na rzecz osób w wieku emerytalnym
Kryterium oceny
Wszystkim dostępnym w WCAG 2.1 zasadom dostępności przypisano jedną z 3 ocen: A, AA, AAA, gdzie poszczególne oceny oznaczają:
- A – najniższy poziom zgodności
- AA – wysoki poziom zgodności
- AAA – najwyższy poziom zgodności
4 zasady dostępności cyfrowej
Postrzegalność, czyli pierwsza zasada dostępności cyfrowej
W ramach tej zasady – osoby z dysfunkcjami zmysłowymi, takimi jak ograniczenia słuchu lub wzroku, powinny mieć możliwość korzystania ze stron internetowych i aplikacji. W ustawie w ramach postrzegalności odnajdziemy 4 mniejsze działy (alternatywa tekstowa, multimedia, możliwość adaptacji, rozróżnialność), które rozdzielone są na mniejsze szczegółowe podpunkty. Postrzegalność zawiera w sobie najszerszy zakres działań widocznych gołym okiem. Oto główne wytyczne do zaliczenia audytu postrzegalności strony:
- treści nietekstowe, np. zdjęcia mają swoją alternatywę tekstową – atrybut „alt” jest uzupełniony w każdym zdjęciu/grafice
- jeżeli na stronie występują filmy lub nagrania audio – muszą mieć tekstowy podpis – audiodeskrypcję
- wszelkie prezentacje mogą być odczytane przez program komputerowy
- zrozumiała kolejność treści – prawidłowe użycie znaczników H1, H2, H3, itd.
- instrukcje obrazkowe, np. ikony muszą mieć swoją alternatywę tekstową, jeżeli pełnią funkcję na stronie: dla przykładu na stronie może być strzałka, która symbolizuje przejście do następnego artykułu – ta strzałka musi mieć albo napis obok: „następny artykuł” albo atrybut alt „następny artykuł”
- możliwość zmiany orientacji strony – możliwe przeglądanie strony w pionie i w poziomie na urządzeniach mobilnych
- pola w formularzu (jeżeli taki występuje) są prawidłowo i precyzyjnie określone
- kolor nie może być wykorzystywany jako jedyny wizualny sposób przekazywania informacji
- na stronie musi być zastosowany odpowiedni kontrast treści w stosunku do tła – dalej w artykule opisane są narzędzia do sprawdzania kontrastów kolorystycznych
- jeżeli na stronie są filmy lub pliki audio, które włączają się automatycznie – muszą mieć możliwość ich zatrzymania i zmiany głośności
- możliwość powiększenia tekstu o 200% bez żadnych narzędzi wspomagających (najczęściej stosuje się przełącznik)
- na grafikach nie powinno przedstawiać się tekstu – chyba, że jest to niezbędne do procesu zrozumienia danego fragmentu treści
- scrollowanie treści tylko w jednym wymiarze: góra-dół lub lewo-prawo – w praktyce oznacza to responsywność strony
- kontrast elementów nietekstowych jest w stosunku przynajmniej 3:1
- precyzyjne odstępy w tekście: linia tekstu wysokości minimum 1,5, a odstępy między akapitami na przynajmniej 2-krotność rozmiaru czcionki
Funkcjonalność, czyli o obsłudze strony z klawiatury
Większość z nas nie wyobraża sobie, aby przeglądać internet lub pracować na laptopie bez myszki. Tymczasem komputery stacjonarne i przenośne mogą być obsługiwane bez myszki – z poziomu klawiatury. Do przeglądania stron internetowych najważniejszy przyciski to: „Tab”, który przenosi nas do kolejnych części strony, „Shift+Tab”, który cofa nas o jeden element w trakcie nawigowania po stronie i strzałki kierunkowe. Jeżeli klikamy na przyciesk „Tab” na klawiaturze i nic się nie podświetla na stronie, to właściwie z miejsca można powiedzieć, że strona nie zaliczy audytu funkcjonalności. Teraz nieco bardziej szczegółowo o kryteriach sukcesu postrzegalności strony www:
- przede wszystkim możliwa nawigacja za pomocą przycisków „Tab”, „Shift” i strzałkami kierunkowymi
- jeżeli przyciski klawiatury pozwalają ustawić fokus na wybranym elemencie strony, to te same przyciski powinny pozwolić usunąc fokus z tego elementu; jeżeli nie pozwalają – użytkownik powinien otrzymać stosowną podpowiedź, jak to zrobić.
- istnieje mechanizm mapowania skrótów klawiaturowych, jeżeli skróty są inne niż standardowe, czyli w przypadku ustawienia klawiszu „Alt” działającego jako „Shift” – jest możliwość przypisania funkcjonalności innemu klawiszowi
- jeżeli przeglądanie danej części strony ma ogranicznie czasowe (np. pop-up z reklamą na 10 sekund) to istnieje możliwość wydłużenia czasu lub wyłączenia tego limitu
- jeżeli występują na stronie animacje włączające się automatycznie, migoczące, to użytkownik ma możliwość ich wyłączenia
- w treści strony nie może być niczego, co zawiera więcej niż 3 błyski w ciągu sekundy – ograniczenie możliwości ataków padaczki
- tytuły stron i nagłówki odnoszą się do realnych treści w nich zawartych
- Link w tekście musi być prawidłowo opisany – wskazując, jaką treść użytkownik zobaczy po kliknięciu w ten link; nie powinno się zatem używać adresów URL w treści strony
- fokus z klawiatury, który jest w użyciu jest stale widoczny – podświetlony (zaznaczony element) jest widoczny
- w wersjach mobilnych użytkownik korzysta z dotyku jednopunktowego – do nawigacji nie jest konieczna żadna sekwencja ruchów, tylko jeden nacisk
- jeżeli aktywowanie danej funkcji wymaga ruchu (chodzi głównie o smartfony) – możliwe jest przełączenie aktywowania tej funkcji na klasyczne nawigowanie
Zrozumiałość – jasny i spójny przekaz
Treść na stronie powinna być zrozumiała i przede wszystkim ułożona w logiczny sposób. Można do tego dodać prosty zwrot – nie oszukuj! Takie małe oszustwa zwykle występują przy pozycjonowaniu, dla przykładu upychanie w atrybutach alt słów kluczowych bez związku z treścią strony. Inny przykład: zbytnio rozbudowana treść, która nie wnosi niczego nowego, poza tym że Google rozpozna kolejne słowa kluczowe, a całkowitą liczbę słów na stronie oceni na więcej niż 1000. Oto podstawowe kryteria wymagane do spełnienia zrozumiałości strony:
- ustawiony został język strony internetowej i jest on faktycznie stosowany na stronie (wyjątek stanowią nazwy własne)
- zmiana fokusu na stronie nie powoduje zmiany kontekstu strony
- przy formularzach (wprowadzanie danych) – przy wystąpieniu błędu system poinformuje, jaki błąd został wprowadzony i jak go naprawić, np. „w tym miejscu należy wprowadzić adres e-mail”
- przy wprowadzaniu danych w formularzu – nie może nastąpić zmiana kontekstu, np. pola formularza nie mogą się pojawiać i znikać, po wypełnieniu przez użytkownika określonych pól (chyba, że użytkownik został o tym wcześniej poinformowany)
Kompatybilność
Ta część w swojej treści jest bardzo krótka i właściwie w całości opiera się na prawidłowości kodu, odpowiednich oznaczeniach atrybutów, unikalnych ID, prawidłowo przypisanych rolach znaczników.
Deklaracja dostępności, czyli najważniejszy dokument
Jak wspomniałem wcześniej, nie wszystkie punkty WCAG podlegają pod ustawę o dostępności cyfrowej obowiązującej w Polsce. Oczywiście idealnie byłoby, gdyby każdy podmiot sam z siebie przestrzegał rozszeronej wersji WCAG, by ułatwić sprawę użytkownikom. Powiem nawet, że jest to możliwe i nie aż takie trudne, ale tylko w przypadku mniejszych stron www, które posiadają niewiele treści. Takie strony, jak strony urzędów miast mają setki, jak nie tysiące podstron z przeróżnymi materiałami i tam spełnienie wszystkich kryteriów sukcesu kosztuje bardzo dużo pracy.
Każdy z podmiotów wymienionych w ustawie ma obowiązek dodatkowo umieszczać na swojej stronie deklarację dostępności. Jest to jedna podstrona, która w sposób skrótowy przedstawia dostępność tej konkretnej instytucji. Deklarację dostępności należy przynajmniej raz w roku – do 31 marca – aktualizować. Co za tym idzie – po prostu raz do roku trzeba sprawdzać, czy dostępność cyfrowa strony jest wciąż na odpowiednim poziomie.
Co powinna zawierać deklaracja dostępności?
To, co powinna zawierać deklaracja dostępności jest opisane w 2 dokumentach: Decyzji Wykonawczej Komisji (UE) 2018/1523 i w ustawie, do której odwołuję się w całej treści niniejszego artykułu. Zatem deklaracja dostępności powinna zawierać:
- status dostępności: zgodna/częściowo zgodna/niezgodna
- treści niedostępne: wymienienie niedostśpenych treści i powodów, z jakich tak jest
- datę przygotowania oświadczenia o dostępności
- datę ostatniej aktualizacji strony internetowej lub aplikacji
- informację zwrotną, do kogo można się zgłaszać, w przypadku uchybień w zakresie dostępności
- informację lub link, w jaki sposób dokonano oceny dostępności
- dane teleadresowe siedziby podmiotu
- informację na temat niestandardowych skrótów klawiszowych
- informację na temat dostępności architektonicznej siedziby podmiotu
- informację o dostępności tłumacza języka migowego
- link do strony internetowej Rzecznika Praw Obywatelskich
Deklaracja dostępnpości – wzór do pobrania
Z pozoru dokument może wydawać się skomplikowany, ale w praktyce jest to zbiór dosyć precyzyjnie określonych zdań, w których wybieramy odpowiedź pasującą do aktualnego stanu. Zaznaczam, że każdy powinien samodzielnie i rzetelnie dostować swoją stronę do wymogów WCAG lub zlecić to profesjonaliście. Dla ułatwienia umieszczam szablon deklaracji dostępności, który stworzyłem na podstawie wyżej wymienionych dokumentów prawnych i który używam na stronach, które dostosowuję pod dostępność cyfrową. Pierwsze 4 punkty z szablonu: oświadczenie w sprawie dostępności, status pod względem zgodności, przygotowanie oświadczenia w sprawie dostępności, informacje zwrotne oraz dane kontaktowe zostały stworzona na podstawie wzoru udostępnionego przez Komisję Europejską, pozostałe na podstawie Ustawy. W części: dostępność architektoniczna siedziby należy wprowadzić własny opis. Poniżej można pobrać wzór dostępności cyfrowej.
WCAG – narzędzia diagnostyczne i własny audyt
Całą dostępność cyfrową strony można przeprowadzić samodzielnie lub zlecić zewnętrznej firmie. Istnieje kilka głównych narzędzi, które w szybki sposób sprawdzą, co należy wdrożyć na stronie, aby spełniać kryteria. Należy pamiętać, że wskazane niżej programy do sprawdzenia WCAG 2.1 nie mogą być jedyną formą testu. Niezbędne jest jeszcze sprawdzenie „ręczne” dostępności zgodnie z Ustawą. Niemniej jednak sama deklaracja dostępności wymaga wskazania narzędzi diagnostycznych, które zostały użyte. Poniżej przedstawiam te najważniejsze. W mojej opinii korzystając z poniższych programów – jesteśmy w stanie w pełni przeprowadzić audyt strony www (pamiętaj o Ustawie!)
WCAG Color Contrast Checker
Listę automatycznych, a może bardziej półautomatycznych narzędzi otwiera WCAG Color Contrast Checker. Jak już sama nazwa wskazuje, jest to narzędzie do sprawdzenia, czy poszczególne elementy strony mają odpowiedni kontrast. Wysoki kontrast zapewnia osobom słabowidzącym i osobom z daltonizmem na swobodne przeglądanie stron www. Program jest dodatkiem do Chrome, który możesz pobrać z biblioteki dodatków. W obsłudze to narzędzie jest bardzo proste. Należy na stronie internetowej kliknąć u góry właśnie w to rozszerzenie, po czym z prawej strony otworzy się lista połączeń kolorystycznych na wybranej podstronie. U góry należy wybrać, dla jakiej oceny przeprowadzamy przegląd: A, AA czy AAA. Dla potrzeb dostępności cyfrowej w Polsce spokojnie wystarczy poziom AA. A co jeżeli wyniki są nieprawidłowe i trzeba zmienić kolory? Wtedy z pomocą przyjdzie Accessible Color Palette Generator. Wystarczy wybrać jeden kolor, a wygenerują się gotowe przykłady nowych kolorów do użycia.
Web Accessibility Evaluation Tool (WAVE)
Podobnie, jak pierwszy z programow otwierających listę – jest to program wskazywany na stronach Ministerstwa Cyfryzacji jako ten, którym można przeprowadzać audyt dostępności. Zawsze do audytów używam narzędzi zalecanych przez Ministerstwo, bo jeżeli strona przechodzi audyt w takim narzędziu i wpisuję to także w deklaracji dostępności, to ktoś musiałby się bardzo nagimnastykować, aby zarzucić mi złą wolę albo niedopełnienie ustawowych obowiązków dostępności.
Przyznam też szczerze, że jest to moje ulubione narzędzie, które bada stronę na wielu poziomach, w tym także sprawdza kontrast. Aby zbadać stronę najlepiej pobrać rozszerzenie WAVE do Chrome i uruchomić je na badanej stronie. Z boku pojawia się, m. in. lista błędów i problemów z kontrastem i to są fragmenty, nad którymi trzeba się skupić. Warto też sprawdzić listę alertów.
Accessibility Insights
Kolejny program polecany przez Ministerstwo Cyfryzacji i kolejny działający na zasadzie rozszerzania do Chrome. W programie mamy 2 rodzaje skanowania, które można zrealizować: FastPass i Assessment. Należy zacząć od pierwszego z nich i po naprawieniu występujących błędów – przejść do kolejnej części. Ja osobiście rzadziej używam Accessibility Insights, więc tylko sygnalizuję, że takie narzędzie istnieje.
PageSpeed Insights
Nie jest to typowe narzędzie, ale lubię go używać, aby mieć ogólny pogląd na stronę. Z pewnością nie jest też narzedziem, na podstawie którego moglibyśmy całkowicie oprzeć audyt. Jest to rozwiązanie od Google, które pozwala na zbadanie szybkości strony, ale nie tylko. Po przejściu na stronę PageSpeed Insigts i wpisaniu adresu wybranej strony internetowej – otrzymujemy wyniki w 4 kategoriach (w skali do 100): wydajność, ułatwienia dostępu, sprawdzone metody, seo. W kontekście dostępności cyfrowej istotne będą ułatwienia dostępu. Każdy parametr można sprawdzić zarówno w odniesieniu do urządzeń stacjonarnych, jak i smartfonów.
Accessibility Checker
Jak zapewne każdy zwrócił uwagę – większość narzędzi jest angielskojęzycznych i pochodzi przede wszystkim ze Stanów Zjednoczonych. Część z nich może diagnozować strony także pod kątem ADA (Americans with Disabilieties Act), które nas nie obowiązuje. Accessibility Chcecker pozwala zaznaczyć opcję skanowania na Europę – nie jest to idealne rozwiązanie, ale na dzisiaj nie znam żadnego polecanego – dobrego typowo polskiego narzędzia (jeżeli ktoś ma coś do polecenia – bardzo proszę o kontakt mailowy).
WCAG 2.1 WordPress – jaka wtyczka?
Z racji tego, że zdecydowaną większość stron buduję na WordPressie, pojawiają się pytania, jakiej wtyczki użyć do wprowadzenia dostępności cyfrowej.
Zacznę może trochę z innej strony i powiem chwilę o WordPressie. Czasem spotykam się z opiniami: „WordPress? A, to proste! Sam sobie zrobię taką stronę!”. I nawet się nie kłócę z takim stwierdzeniem, tylko uśmiecham. Jeżeli ktoś chce zrobić stronę na szablonie, a później narzeka, że któregoś elementu nie umie przesunąć, że wtyczki mu się nie aktualizują i że coś przestało nagle działać, to w sumie ok. Uważam, że po 10 godzinach nauki – osoba, która dobrze obsługuje komputer postawi taką stronę. Nie wierzę, że ktoś, kto nie budował żadnej strony potfari sbudować porządną stronę na WordPressie od podstaw – a to będzie potrzebne jeżeli mamy połączenie – WCAG WordPress.
No to do meritum: osoby, dla których WordPress lub inne rozwiązania są właśnie takie proste, korzystają z gotowych rozwiązań. Na dostępność cyfrową także są gotowe wtyczki. Ceny za niektóre z nich kształtują się w okolicy nawet 1000$ za rok. ŻADNA wtyczka nie zapewni dostepności cyfrowej sama w sobie. Każdą z nich trzeba odpowiednio skonfigurować i ZAWSZE trzeba wprowadzać modyfikacje na stronie – poza wtyczką. Jest jedna wtyczka polecana przez WordPress i tej właśnie używam: WP-Accessibility. Sama w sobie ma niewiele funkcji, bo większość zmian wprowadzam w budowie strony i w motywie. Osoby zainteresowane porównaniem różnych wtyczek z zakresu dostępności cyfrowej, odsyłam do świetnego artykułu. Sam zespół WordPressa udostępnia bardzo fajny handbook wskazujący elementy dostępności, and którymi trzema pracować.
Komu zlecić audyt WCAG 2.1?
Kiedy kilka lat temu uczyłem się na temat tworzenia stron internetowych, byłem bardzo zdziwiony, że amerykańscy wykładowcy wciąż skupiali się na kontrastach i osobach z daltonizmem. Ciagle poprawiali się, gdy kolory były zbyt podobne do siebie. Później zwróciłem uwagę, że w nowych grach – wszędzie jest możliwość dostosowania kolorów dla osób ze ślepotą barw. Na świecie jest 300 milionów daltonistów i nie wiem czy amerykańscy marketingowcy odkryli duży rynek, czy po prostu tamtejsze prawo jest tak restrykcyjne. Pewnym jest, że to co w Ameryce, po kilku latach dotrze do nas. Uważam, że samo dostosowanie kolorów stron pod daltonistów już niedługo stanie się standardem w dużych firmach nawet tam, gdzie dostępność cyfrowa nie jest wymagana prawnie.
Oczywiście dostępność cyfrowa to nie tylko ślepota barw. Jeżeli nie czujesz się na siłach, aby samodzielnie wykonać audyt dostępności cyfrowej, dostoswać swoją stronę internetową i stworzyć odpowiednią deklarację dostępności – skontaktuj się ze mną. Zajmę się dostępnością cyfrową w sposób profesjonalny, a Twoja strona przejdzie audyty dostępności cyfowej.
Potrzebujesz strony z WCAg 2.1? Napisz!
Zadzwoń
wypełnij formularz