Tworzenie stron internetowych zgodnie z WCAG – 16 zasad dla web developerów

Inwestowanie w dostępność służy nie tylko wyrównywaniu szans i przeciwdziałaniu wykluczaniu osób z ograniczeniami. Bardziej przejrzyste strony czy łatwiejsze do zrozumienia interfejsy graficzne polepszają wrażenia wszystkich użytkowników. Gdy w sieci panuje ogromna konkurencja, dostępność może być tym, co wyróżnia dany produkt czy usługę na tle innych dostępnych ofert.

Dziś każdy programista, tworzący witryny internetowe i aplikacje mobilne, powinien znać wytyczne WCAG, przystępne praktyki kodowania i testowania dostępności. Już na etapie projektowania można podejmować dobre decyzje i unikać niezgodności z rekomendacjami WCAG. Proponowane przez UX (osoby projektujące doświadczenie użytkownika) lub projektanta (designera) rozwiązania mogą być atrakcyjne wizualnie i nowoczesne, ale z perspektywy osób niepełnosprawnych, często bywają przeszkodą.

Przykłady trudności dla osób z niepełnosprawnościami:

• kolory o zbyt niskim kontraście – mogą sprawić, że nie wszystkie informacje będą czytelne; 
• zbyt dynamicznie zmieniające się treści na stronie;
• brak informacji o nowych elementach na stronie – ważne dla osób niedowidzących (korzystających z lupy elektronicznej czy opcji zwiększonego kontrastu) lub niewidomych (używających czytników ekranu).

Rozwiązania oparte na WCAG wymagają czasem więcej pracy, ale wysiłek włożony w projektowanie, implementację i testowanie zwróci się w postaci dojrzałego produktu, który dotrze do szerszego grona odbiorców.

Skrót zaleceń dla programistów wynikający z rekomendacji WCAG:

1. Witryna przyjazna dla klawiatury

Nawigowanie po stronie internetowej powinno być możliwe  bez użycia myszy. Chcąc zapewnić użytkownikowi dostęp do wszystkich treści na stronie, używa się zazwyczaj kilku klawiszy: TAB, SHIFT + TAB, ENTER, SPACJA i strzałki. Możliwość korzystania ze wszystkich funkcji witryny za pomocą klawiatury jest szczególnie ważna dla użytkowników niewidomych, korzystających tylko z klawiatury oraz użytkowników z zaburzeniami koordynacji ruchowej czy niewydolności mięśniowej górnych partii ciała.

2. Wszystkie treści łatwo dostępne

Oprócz dostosowania witryny do obsługi za pomocą klawiatury, należy upewnić się, że cała zawartość strony jest rzeczywiście dostępna. Zwykle jest to proste, ale może być problem, gdy strona ma zawartość dynamiczną. Strona powinna zawsze „informować” narzędzia wspomagające o zmianie, w przeciwnym razie użytkownik przegapi nową zawartość.

3. Ważne w przypadku tekstu i języka:

• język strony oraz język fragmentów obcojęzycznych oznaczać atrybutem ‘lang’;
• cytaty odpowiednio wyróżniać – co najmniej cudzysłowami;
• zachowywać odpowiedni kontrast kolorystyczny wszystkich elementów treściowych (tekstów, linków, banerów) oraz funkcjonalnych – za poprawny kontrast uznawany jest taki, którego współczynnik (ratio) wynosi 4.5:1 dla małych tekstów oraz 3:1 dla dużych;
• tekst musi być napisany możliwie najprostszym językiem, by dostęp do niego miały osoby mniej wykształcone czy z niepełnosprawnością intelektualną;
• opublikowany w sposób czytelny – podzielony na paragrafy, listy i inne sekcje; 
• skróty literowe rozwinięte przy pierwszym wystąpieniu na każdej stronie; 
• uzupełniony o nagłówki (h1–h6), aby osoby niewidome mogły sprawnie przejść do interesującej ich sekcji.

4. Tekst o zmiennym rozmiarz

Większość urządzeń i przeglądarek umożliwia użytkownikom zmianę rozmiaru tekstu, co jest pomocne dla osób z wadami wzroku. Jeśli jednak witryna nie jest utworzona pod kątem obsługi tej funkcji, zmiana rozmiaru tekstu może zepsuć projekt lub utrudnić interakcję z witryną. Najlepiej, gdy stronę można powiększyć do 200% narzędziami przeglądarki; taka strona nie może „gubić” treści. Dobrze, gdy mieści się poziomo w oknie i nie ukazuje się poziomy pasek przewijania ekranu.

Warto używać rozmiarów względnych, które umożliwiają skalowanie tekstu w zależności od innych treści i rozmiaru ekranu. Nigdy nie należy wyłączać skalowalności użytkownika, bo utrudni to użytkownikom zmianę rozmiaru tekstu. Aby upewnić się, że witryna spełnia te kryteria, warto przetestować rozmiary czcionek, zwiększając poziom powiększenia w przeglądarce. 

5. Ostrożne dobieranie kolorów

Często mówi się o ślepocie kolorów (nie mylić z daltonizmem), jakby to była kwestia widzenia tylko czarno-biało, a to szerszy problem. Krótko mówiąc: są ludzie, którzy postrzegają kolory w wyjątkowy sposób. W związku z tym warto upewnić się, że kolory wybrane w witrynie dobrze kontrastują, aby każdy mógł rozróżnić różne elementy na stronie. Najważniejsze jest wyróżnienie tekstu na tle. Najlepiej byłoby zestawić ciemny kolor z jasnym, upewniając się, że nie przenikają nawzajem. Istnieje wiele narzędzi online, dzięki którym można przetestować kombinacje kolorów. Dobrze, gdy dają ocenę w czasie rzeczywistym. Narzędzie kontrolera kontrastów umożliwia przełączenie się na tryb monochromatyczny, by zweryfikować, jak skuteczna jest dana kombinacja.

6. Elementy graficzne a tekst alternatywny

Tam, gdzie istnieje taka potrzeba, należy zapewnić alternatywne formaty treści (np. alternatywy tekstowe dla obrazów, grafik, wykresów oraz nagrań audio i wideo). Tekst zastępuje obraz, jeśli się nie załaduje. Czytniki ekranu mają dostęp do tekstu alternatywnego (czasami nazywanego atrybutami alt, opisami alt lub tagami alt) w celu „odczytania” obrazu. W polu do opisania obrazu podaje się użytkownikowi kontekst (próbuj uwzględnić słowa kluczowe, gdy ma to sens), który w innym przypadku mógłby go przegapić. Tekst alternatywny pomaga również ulepszyć SEO witryny, dając wyszukiwarkom więcej informacji do zaindeksowania. Ponadto:

• gdy grafika jest linkiem, należy wprowadzić opis do grafiki, dokąd prowadzi dany odnośnik;
• mieć „pusty atrybut alt”, gdy grafiki są czysto dekoracyjne;
• unikać animowanych elementów, poruszających się tekstów, ponieważ rozpraszają użytkowników, nie tylko tych z niepełnosprawnością; 
• niektóre, szczególnie agresywnie i szybko animowane grafiki, mogą stanowić zagrożenie dla osób cierpiących na padaczkę fotogenną.

7. Pliki dźwiękowe (audycje, wywiady, wykłady)

• w zależności od materiału, powinny być uzupełnione o audiodeskrypcję lub transkrypcję tekstową;
• ich odtwarzacze muszą dać się obsłużyć za pomocą klawiatury i być dostępne dla osób niewidomych.

8. Pliki wideo i multimedialne 

Jeśli jakikolwiek dźwięk na stronie internetowej jest odtwarzany automatycznie przez ponad 3 sekundy, dostępny jest mechanizm wstrzymywania lub zatrzymywania dźwięku lub mechanizm sterowania głośnością niezależnie od ogólnego poziomu głośności systemu. W przypadku korzystania z czytnika ekranu ustalenie, jak wyłączyć multimedia, może być trudne (użytkownik jest zaskoczony nagłym hałasem). Dlatego należy unikać dołączania elementów, które zaczynają się bez uprzedniego monitorowania użytkownika. Ponadto pliki powinny:

• być uzupełnione o napisy dla osób niesłyszących;
• mieć dostępne odtwarzacze dla osób niewidomych i osób korzystających wyłącznie z klawiatury.

9. Nawigacja na stronie 

Najlepiej unikać automatycznej nawigacji, bo użytkownik może potrzebować więcej czasu na przyswojenie wszystkich informacji przed przejściem do kolejnego slajdu lub sekcji. Ogólnie nawigacja (menu) musi być spójna, logiczna, niezmienna i dostępna w obrębie całego serwisu z poziomu klawiatury.

10. Elementy interaktywne

Wszelkie elementy interaktywne (formularze, linki, bannery) powinny być:

• wyraźne wizualnie z fokusem (zwykle w postaci ramki widocznej w trakcie nawigacji po stronie klawiszem TAB);
• odnośniki unikalne i zrozumiałe, także poza kontekstem;
• pozbawione opisów typu: „>>” czy „więcej” albo „kliknij tutaj”;
• nie otwierać się w nowym oknie lub zakładce przeglądarki bez ostrzeżenia.

11. Skip links

Zaleca się stosowanie usprawnienia w postaci „skip links”, zwanych także mechanizmem pomijania. Służą do pominięcia pewnych bloków w serwisie dzięki zastosowaniu odpowiednich kotwic na stronie i przejścia bezpośrednio do wybranej treści strony. Jest to szczególnie ważne w serwisach, które mają wiele linków w nawigacji/menu głównym. Ten rodzaj pomocy nie służy jedynie osobom niewidomym, ale też słabowidzącym czy z dysfunkcjami motorycznymi – wydaje się, że każdy użytkownik w pewnych sytuacjach może potrzebować takiego wsparcia.

12. Tytuły (title) stron i podstrony

Muszą być unikatowe i informować o treści podstrony, na jakiej znajduje się użytkownik, a układ treści w tytule zbudowany wg schematu: [Tytuł podstrony] – [Nazwa Instytucji].

13. Stosowanie nagłówków do poprawnej struktury treści 

Kluczowym zadaniem w dostępności witryny jest uporządkowanie treści przy użyciu nagłówków. Podstrony też mają być oparte na nagłówkach, przy czym (h1-h6) uważa się za podstawę porządkowania treści na stronie. Dzięki temu treści będą łatwiejsze do zrozumienia i poprawią ich przepływ. Wyraźne nagłówki pomagają czytnikom ekranu w interpretowaniu stron, co znacznie ułatwia nawigację.

Należy się upewnić, że używa się odpowiednich poziomów nagłówków w treści, np. tylko jednego h1 na stronę. Po tym następują podpozycje zaczynające się od h2, które można zagnieżdżać dalej (h3, itd.). Powinny być zawsze używane w ścisłej kolejności.

14. Tabele, ramki itp.

Tabele same w sobie są przydatne, o ile unika się używania ich do innych celów niż dane tabelaryczne. Zatem: nie korzysta się z nich jako elementu konstrukcyjnego strony. Ułatwiają użytkownikom, w tym korzystającym z technologii wspomagających, analizowanie dużej ilości danych. Do uzyskania maksymalnych korzyści tabele powinny być tak proste, jak to możliwe, i być zaopatrzone w nagłówki. Istnieją poradniki, jak zakodować tabelę, zachowując standardy dostępności. Natomiast ramki powinny być odpowiednio zatytułowane. 

15. Formularze dobrze zaprojektowan

Formularze, w tym formularz wyszukiwarki, są przydatnym dodatkiem do większości witryn, o ile są starannie zaprojektowane, zaś pola formularzy i przyciski odpowiednio opisane. Należy również dążyć do umieszczenia etykiet obok odpowiednich pól. Choć widzący użytkownik może łatwo dopasować etykietę do odpowiedniego pola lub opcji, może to nie być oczywiste dla osoby używającej czytnika ekranu. 

16. Wygodne ściąganie plików

Możliwe do ściągnięcia ze strony pliki typu PDF, Word itp. powinny być przygotowane jako dostępne, czyli muszą mieć strukturę pomocną osobom niewidomym przeglądanie takich dokumentów.

W podsumowaniu warto dodać, że serwis uwzględniający powyższe procedury powinien być dostępny w przeglądarkach i urządzeniach z wyłączoną obsługą CSS.

Jeśli interesuje Cię tematyka dostępności stron internetowych i innych produktów cyfrowych, możesz przeczytać więcej w tym artykule, gdzie piszemy o historii WCAG i wytycznych Web Accessibility.