Wyobraź sobie, że jesteś osobą niewidomą lub słabowidzącą i chciałbyś/chciałabyś zalogować się do własnego konta bankowego poprzez stronę internetową lub aplikacje mobilną. Wpisujesz hasło, wybierasz kolejne opcję, przechodzisz na następną stronę, ale w pewnym momencie nie możesz zrobić nic więcej… Nie masz dostępu do pełnej funkcjonalności aplikacji. Dlaczego?
Posiadając lub budując stronę lub aplikację internetową powinieneś pamiętać o obowiązkowych zasadach dostępności cyfrowej, czyli WCAG 2.1. Dla części podmiotów niedostosowanie strony www lub aplikacji mobilnej do poniższych standardów wiąże się nawet z karą finansową. Chcesz wiedzieć czym jest WCAG, dlaczego jest ważne oraz jaka jest jego podstawa prawna? Właśnie trafiłeś w dobre miejsce – pełne wyjaśnienie oraz listę zaleceń dla programistów zamieściłem w tym artykule.
1. Co to jest WCAG 2.1
Web Content Accessibility Guidelines – WCAG 2.1 to zbiór dokumentów, które zawierają zalecenia dotyczące tworzenia dostępnych dla wszystkich użytkowników serwisów internetowych. Dostępność do serwisu internetowego oznacza stopień, w jakim może on być postrzegany, rozumiany oraz przeglądany przez wszystkich użytkowników, niezależnie od ich niepełnosprawności oraz niezależnie od tego jakie właściwości posiada używane przez nich oprogramowanie oraz sprzęt. Szacując, że 1/7 całej populacji stanowią osoby z różnymi rodzajami niepełnosprawności i tylko 1/10 z nich korzysta z Internetu, to nie należy pomijać ich w cyfrowej przestrzeni, a wspomniane wyżej rozporządzenie o dostosowaniu stron do wszystkich użytkowników, jest jak najbardziej słuszne.
2. Normy prawne WCAG 2.1 w Polsce
Wraz z wprowadzeniem międzynarodowej normy ISO/IEC 40500:2012 (dla WCAG 2.0), od roku 2012 w Polsce obowiązuje zestaw minimalnych wymagań dla rejestrów publicznych, wymiany informacji w postaci elektronicznej oraz minimalnych wymagań dla systemów teleinformatycznych, który zobowiązuje podmioty realizujące zadania publiczne, takie jak ministerstwa, urzędy wojewódzkie, urzędy miast i gmin, policję, straż, szpitale i wiele innych instytucji publicznych do dostosowania serwisów internetowych do standardu WCAG 2.1. 4 kwietnia 2019 roku Sejm Rzeczpospolitej Polskiej uchwalił Ustawę o dostępności cyfrowych stron internetowych oraz aplikacji mobilnychktóra przewiduje nałożenie kary pieniężnej na podmioty publiczne, które nie spełniają norm WCAG.
3. Standard WCAG 2.1 na świecie
Ponieważ standardy WCAG są popularne i uniwersalne to zdecydowana większość krajów swoje prawodawstwo dotyczące kwestii dostępności i przeciwdziałania wykluczeniu cyfrowemu oparło właśnie na nich. W roku 2016 Parlament Europejski przyjął dyrektywę o numerze 2016/2102, według której zarówno witryny internetowe, jak i aplikacje mobilne, które są powiązane z organami i podmiotami publicznymi, muszą realizować drugi poziom kryteriów dostępności standardu, minimum na poziomie WCAG 2.0 (A i AA).
4. WCAG 2.1 – zalecenia dla programistów
Zalecenia WCAG 2.1 same w sobie są bardzo zwięzłe, zawierają tylko uniwersalne zalecenia. Jednak nie zawsze można je zastosować bezpośrednio, dlatego powstały dwa dokumenty uzupełniające:
- Understanding WCAG 2.1
- Techniques for WCAG 2.1
Wspomniane wyżej dokumenty są bardzo obszerne (zajmują blisko tysiąc stron) – konsekwencją czego jest fakt, że wielu twórców serwisów, albo zna wytyczne WCAG 2.1 pobieżnie, albo, nie zna ich wcale. Co oznacza, że zdecydowana większość serwisów nie spełnia chociażby minimalnych wymagań, które są zawarte w dokumentacji WCAG 2.1. Dlatego, aby ułatwić pracę programistom, dla których przebrnięcie przez górę wytycznych jest prawie niemożliwe, powstają setki streszczeń WCAG 2.1, które zawierają najważniejsze wskazówki dotyczące budowy stron dostępnych dla wszystkich. Poniżej przedstawiamy kilka bardzo istotnych zaleceń, po których wdrożeniu, będziecie mieć gwarancję, że strona internetowa jest w pełni funkcjonalna i dostępna dla każdego użytkownika. Dotyczy to zarówno osób niewidomych, niedowidzących, z niepełnosprawnością ruchową, niesłyszących, z dysleksją lub różnego rodzaju dysfunkcjami intelektualnymi. Dodatkowym bonusem jest fakt, że dzięki wprowadzonym zaleceniom, serwis będzie bardziej przyjazny dla osób starszych oraz tych, które nie mają wprawy w korzystaniu z Internetu.
5. Na co przede wszystkim należy zwrócić uwagę:
- elementy graficzne powinny mieć one zwięzły tekst alternatywny (alt), który ma opisywać, co znajduje się na grafice lub w przypadku gdy grafika jest odnośnikiem, powinna być informacja, dokąd ten odnośnik prowadzi. Gdy grafika ma zadanie czysto dekoracyjne, to atrybut alt powinien zostać pusty,
- unikaj animowanych elementów i poruszających się tekstów, ponieważ rozpraszają one wszystkich użytkowników bez wyjątku. Dodatkowo bardzo agresywne, szybkie animowane grafiki, mogą stanowić zagrożenie dla osób, które cierpią na padaczkę fotogenną,
- odstępy w tekście, możliwość zmiany odstępu między akapitami, wierszami, słowami i literami,
- pliki dźwiękowe, wszystkie, bez wyjątku, na przykład audycje, wywiady, czy wykładypowinny być uzupełnione o transkrypcję tekstową. Odtwarzacze zamieszczone na stronie powinny dać się obsłużyć za pomocą klawiatury i oczywiście powinny być dostępne dla osób niewidomych,
- zawartość powinna być wyświetlana pod wskaźnikiem lub po oznaczeniu fokusem,
- pliki multimedialne oraz Flash powinny być dostępne w postaci alternatywnej, nie jako jedyna możliwość skorzystania z funkcjonalności,
- znakowe skróty klawiszowe,
- powszechnie stosowane pliki dostępne do ściągnięcia takie jak na przykład PDF czy DOC, powinny mieć strukturę, która pomoże osobom niewidomym ich przeglądanie,
- limity czasowe, czyli poinformowanie użytkownika, że brak aktywności może spowodować utratę danych,
- teksty umieszczone na stronie powinny być napisane w jak najprostszy sposób, oczywiście w miarę możliwości, tak aby mogły je zrozumieć również osoby z niepełnosprawnością intelektualną,
- anulowanie zdarzeń wskaźnika w przypadku omyłkowego dotknięcia elementu,
- publikowane teksty powinny być czytelne, podzielone na paragrafy, listy, podpunkty, oraz inne pomocne sekcje, każde odpowiednio zaopatrzone w nagłówki (h1-h6), tak aby osoby niewidome mogły przejść do interesujących informacji. Dodatkowo teksty nie powinny być też justowane do prawej strony. Skróty literowe zaś powinny mieć rozwinięcie w każdym pierwszym wystąpieniu, na każdej stronie,
- nawigacja powinna być spójna, logiczna, oraz jednakowa w obrębie całego serwisu, oczywiście nawigacja powinna być możliwa również z poziomu klawiatury,
- dopasowanie zawartości do szerokości ekranu bez konieczności przewijania ekranu w poziomie,
- wszystkie elementy aktywne (np. banery, odnośniki, pola formularza) powinny być wyraźne, oraz klarowne. Zaleca się wzmocnienie domyślnego focusa tak, aby również osoby niedowidzące nie miały problemu z jego odnalezieniem. Dobrym rozwiązaniem jest ramka widoczna w trakcie nawigacji po stronie klawiszem TAB,
- orientacja, czyli wyświetlanie zawartości ekranu w orientacji pionowej i poziomej,
- kontrast elementów nietekstowych,
- odnośniki, wszystkie, bez wyjątku, powinny być unikalne, oraz zrozumiałe, również poza kontekstem. Nie należy używać linków typu „kliknij tutaj”, czy „więcej”. Dodatkowo odnośniki nie powinny być otwierane w nowym oknie lub zakładce przeglądarki bez ostrzeżenia,
- gesty wskaźnikowe,
- „skip to main content” lub „skip links” to popularny odnośnik prowadzący bezpośrednio do treści pojedynczej strony. Jest to niezwykle istotne na serwisach, które mają bardzo rozbudowaną nawigację, i menu,
- wzbudzanie ruchem,
- kontrast kolorystyczny wszystkich elementów, bez wyjątku, których zadaniem jest przekazywanie treści (linków, tekstów, banerów) musi mieć stosunek jasności tekstu do tła co najmniej 4,5 do 1, a idealnie jest, jeżeli nie jest mniejszy niż 7 do 1,
- rozmiar celu, tzn. wielkość minimum 44×44 pikseli CSS danego elementu, jeśli wymagane jest jego dotknięcie,
- powiększenie strony do co najmniej 200%, przy pomocy narzędzi, które oferuje przeglądarka. Dodatkowo powiększona strona nie może „gubić” treści,
- tytuły muszą być unikalne i powinny informować o treści podstrony, na której znajduje się użytkownik,
- nagłówki (h1-h6) powinny być podstawowym sposobem na uporządkowanie treści, które znajdują się na stronie. Pamiętaj, że nagłówek h1 powinien być tytułem tekstu głównego na każdej podstronie,
- listy uporządkowane oraz nieuporządkowane powinny również służyć do usystematyzowania treści w tekstach czy elementach znajdujących się w nawigacji,
- zarówno język strony jak i język fragmentów obcojęzycznych, powinien być oznaczony atrybutem lang,
- cytaty powinny być wyróżnione, przynajmniej przez użycie cudzysłowów,
- kod serwisu powinien być zgodny ze standardami, nie należy korzystać z tabel jako elementu konstrukcyjnego strony,
- tabele, których celem jest wizualizacja danych, powinny być zbudowane w możliwie jak najprostszy sposób oraz powinny posiadać nagłówki,
- animacje stosujemy zawsze po interakcji z użytkownikiem,
- ramki powinny być zatytułowane,
- skrypty oraz aplety powinny być dostępne zarówno dla osób niewidomych, jak i osób, które korzystają wyłącznie z klawiatury,
- komunikaty o statusie wszelkich akcji na stronie,
- formularze, w tym również formularze wyszukiwarki powinny być zbudowane zgodnie ze standardami. Każde pole formularza oraz przyciski powinny być odpowiednio opisane,
- serwis powinien być dostępny w przeglądarkach i urządzeniach z wyłączoną obsługą CSS.
Stosując się do powyższych wskazówek możemy mieć pewność, że nasza aplikacja bądź strona internetowa będzie dostępna i w pełni funkcjonalna dla znacznie szerszego grona użytkowników bez wykluczania grup osób niepełnosprawnych.