Standard WCAG 2.1 - Zasady, Narzędzia, Wdrożenie | Famatech
Opis standardu WCAG 2.1.

Internet daje wiele nowych możliwości. Niestety nie wszyscy mogą z nich korzystać. Wiele osób z niepełnosprawnościami mimo odpowiedniego sprzętu nie zawsze jest w stanie zapoznać się z zasobami dostępnymi online.

Dlatego powstały wytyczne dotyczące dostępności stron internetowych i aplikacji - WCAG. Dodatkowo w Polsce od 4 kwietnia 2019 obowiązuje ustawa o dostępności która mobilizuje podmioty publiczne do wdrożenia usprawnień związanych z tymi wytycznymi.

Co to jest WCAG? Jak sprawdzić, czy nasza strona spełnia wymogi? Jak wdrożyć usprawnienia?

To wszystko znajdziesz w tym tekście.


Spis treści

  1. Standard WCAG 2.1 - podstawowe informacje
    1. Poziomy kryteriów sukcesu
      1. Poziom A
      2. Poziom AA
      3. Poziom AAA
  2. Jak wdrożyć standard WCAG 2.1 dla nowej strony?
  3. Jak wdrożyć standard WCAG 2.1 dla istniejącej strony?
    1. Audyt
    2. Wprowadzanie zmian
    3. Badanie po wdrożeniu
  4. Deklaracja dostępności
  5. Narzędzia
    1. Narzędzia do audytowania
    2. Narzędzia do zwiększania dostępności
  6. Podsumowanie
  7. Źródła i przydatne zasoby

Co to jest WCAG 2.1?

WCAG 2.1 (Web Content Accessibility Guidelines) to zestaw zasad i wytycznych, które powinna spełniać strona internetowa lub aplikacja, aby mogły z niej swobodnie korzystać osoby z niepełnosprawnością. Opisuje dobre praktyki związane z projektowaniem wyglądu i funkcjonalności.

Organizacja Web Accessibility Initiative (WAI) od ponad 20 lat przygotowuje i aktualizuje kolejne wersje standardu WCAG. W ten sposób zachęca programistów i projektantów do tworzenia rozwiązań, z których może skorzystać każdy.

Aktualna wersja to rozszerzenie poprzedniego dokumentu WCAG 2.0 o dodatkowe wytyczne związane głównie z responsywnością witryn internetowych.


Komu ułatwiamy dostęp do informacji?

To wbrew pozorom bardzo ważna kwestia. Niedostępność strony to konkretne problemy konkretnych ludzi, a naszym zadaniem jest znaleźć dla nich rozwiązanie.

Znając potrzeby swoich użytkowników, możemy przygotować treści i funkcjonalności, z których skorzystają wszyscy bez przeszkód. Dlatego teraz odpowiemy sobie na dwa pytania:

  • Dla kogo dostosowujemy strony i aplikacje?

  • Jak te osoby korzystają z Internetu?

Lista grup osób, które korzystaja na dostępności stron internetowych

Grupy użytkowników potrzebujące wsparcia w przeglądaniu Internetu


  • Niewidomi i słabowidzący - to osoby, które przeglądając Internet, korzystają z różnego rodzaju czytników ekranu. Program odczytuje dla nich treści na stronie i w ten sposób zapoznają się z jej zawartością. Osoby słabowidzące (poza czytnikami) wspomagają się powiększaniem treści, zmianą czcionki/kontrastu, czasem wyłączają style CSS.
  • Osoby z zaburzeniami poznawczymi - to szeroka grupa, dla której istotnym ułatwieniem jest, ogólnie rzecz ujmując, prostota. Czyli teksty napisane prostym zrozumiałym językiem i minimalistyczny układ. Możesz też dodać ikony, które ułatwiają zrozumienie treści (ale z umiarem!). Sprawdzą się też wszelkiego rodzaju czaty. Dzięki temu taka osoba może się z Tobą skontaktować w wygodny dla niej sposób.
  • Dyslektycy - to podgrupa osób z zaburzeniami poznawczymi. Potrzebują przede wszystkim przejrzystej struktury strony i tekstu. Autokorekta w polach tekstowych również jest mile widziana. Warto unikać też ruchomych banerów i animacji, które utrudniają utrzymanie uwagi. Dyslektycy czasen korzystają z programów odczytujących i podświetlających tekst.
  • Osoby z zaburzeniami motorycznymi - aby ułatwić im korzystanie z Twojej strony/aplikacji zadbaj o duże przyciski w odpowiednich odstępach. Postaraj się, by kod był poprawny i łatwy w przetwarzaniu przez inne niż standardowy komputer technologie i narzędzia. Osoby z zaburzeniami motorycznymi często przeglądają strony np. tylko za pomocą klawiatury, albo specjalistycznych rozwiązań zastępujących myszy komputerowe.
  • Osoby niedosłyszące i głuche - wbrew pozorom też mogą mieć trudności w przeglądaniu Internetu. Zamieszczasz na stronie pliki audio albo fragmenty wideo? Dla takich osób są one niedostępne. Możesz to zmienić, dodając transkrypcje i napisy do tego typu treści.
  • Osoby starsze - z racji wieku nasze zmysły funkcjonują inaczej, dlatego wiele z wymienionych wyżej usprawnień (np. możliwość powiększenia tekstu, przejrzystość treści i prosty układ) będą też ułatwiały korzystanie z Internetu seniorom.

Tak naprawdę wszyscy korzystają z dostępności. Przejrzystość informacji i zrozumiały tekst, możliwość oglądania wideo (np. w tramwaju) bez konieczności włączania dźwięku to wartościowe udogodnienia dla większości użytkowników Internetu!

Na koniec ostatnia grupa: roboty. Dostępna strona jest dużym ułatwieniem nie tylko dla wspomnianych wcześniej algorytmów i programów odczytujących treści, ale też dla robotów indeksujących wyszukiwarek! A to może pozytywnie wpłynąć na widoczność Twojej strony w Google.

Wiesz już, kto może być wykluczony z korzystania z Twojej strony internetowej i w jaki sposób możesz mu to ułatwić. Czas na konkretne rozwiązania!


Standard WCAG 2.1 - podstawowe informacje

Dokument WCAG 2.1 zawiera szereg wytycznych, które uwzględniają potrzeby wszystkich wyżej wymienionych grup użytkowników. Ma logiczny układ, który od ogółu do szczegółu wskazuje przestrzenie, którymi trzeba się zająć.

Schemat obrazujący układ i strukturę dokumentu WCAG 2.1

Struktura dokumentu WCAG2.1


Całość zaleceń WCAG 2.1 dzielimy na cztery główne zasady:

  • postrzegalność

  • funkcjonalność

  • zrozumiałość

  • solidność/kompatybilność.

Zasady grupują bardziej szczegółowe wytyczne, których w całym dokumencie jest 13. Nie są to konkretne zalecenia, czy wprost opisane techniczne rozwiązania. Wytyczne wskazują raczej konkretne problemy wykluczanych użytkowników, które zmuszają do szukania rozwiązań.

Do każdej wytycznej dopasowane są kryteria sukcesu. To one pozwalają sprawdzić, czy wzięliśmy pod uwagę wszystkie potrzeby naszych użytkowników. Z nich korzystamy podczas audytu strony pod kątem dostępności.

Zostały też spisane tzw. techniki wystarczające i dodatkowe, czyli zbiór konkretnych problemów i sposobów na ich rozwiązanie. Znajdziesz tam opis rozwiązania, przykłady, linki do dodatkowych źródeł i powiązanych problemów - pokaż to koniecznie programiście!

Wiesz już gdzie szukać inspiracji i rozwiązań, a jak sprawdzić, czy nasza praca przyniosła oczekiwany efekt?


Poziomy kryteriów sukcesu

Aby ułatwić ocenę witryn pod kątem spełniania zaleceń WCAG 2.1, przygotowano poziomy kryteriów sukcesu. Jak to działa?

Do każdej wytycznej przypisany jest poziom: A, AA, AAA. Dzięki temu sprawdzając, czy Twoja strona spełnia dane kryterium sukcesu, możesz też określić jej ogólny stopień dostępności.

Poziom A

Najniższy poziom kryteriów sukcesu. To minimum, które pozwoli wszystkim użytkownikom zapoznać się z informacjami na stronie.

Poziom AA

Tu pojawia się więcej rekomendacji, które zwiększają komfort korzystania z Twojej witryny.

Według ustawy o dostępności cyfrowej strony internetowe i aplikacje mobilne podmiotów publicznych powinny spełniać standard WCAG 2.1 właśnie na poziomie AA.

Poziom AAA

Spełnienie kryteriów sukcesu przypisanych do tej grupy pomoże usunąć większość przeszkód w korzystaniu z Twojej strony lub aplikacji.


Jak wdrożyć standard WCAG 2.1 dla nowej strony?

Tu sprawa jest dość prosta. Dlaczego? Cały proces dostosowania strony możemy zacząć już na poziomie projektowania, a to ułatwia pracę programiście. To najlepsza opcja. Realizator nie jest ograniczony już istniejącymi elementami i może łatwiej wdrożyć wszystkie usprawnienia.

Na co zwrócić uwagę przy tworzeniu nowej dostępnej strony WWW?

Zapoznaj się z kryteriami sukcesu WCAG. Mając w głowie listę elementów, o które należy zadbać, usiądź do projektowania. Przygotuj wstępną architekturę strony (podział na podstrony) i układ poszczególnych typów podstron. Pracując nad wdrożeniem, możesz poszukać dobrych rozwiązań i odpowiedzi na liście technik.

Zadbaj też o odpowiednio przygotowane treści. Napisz teksty, które będą czytelne i proste w zrozumieniu. Przygotuj napisy do filmów i transkrypcje dla plików audio. Jeśli będziesz udostępniać na stronie pliki PDF lub w innych formatach tekstowych, zapoznaj się z zasadami tworzenia dostępnych dokumentów.

Na końcu przygotuj i udostępnij Deklarację dostępności - o tym dokumencie opowiem Ci szerzej w dalszej części artykułu.


Jak wdrożyć standard WCAG 2.1 dla istniejącej strony?

W przypadku istniejących stron sprawa jest nieco bardziej skomplikowana. Proces wdrażania WCAG może być dłuższy i trudniejszy. Witryna korzysta już konkretnych rozwiązań, które nie zawsze da się łatwo dostosować do wymogów.


Audyt

Zanim przystąpisz do wprowadzania zmian, konieczny jest audyt, czyli badanie strony pod kątem dostępności.

Co badamy w ramach audytu dostępności strony internetowej?

Na liście wytycznych WCAG 2.1. są zalecenia, które stosujemy do różnych "warstw" strony internetowej:

  • kod strony - od jego poprawności zależy możliwość czytania i przeglądania treści przez różne przeglądarki i narzędzia wspomagające dla osób z niepełnosprawnościami
  • wygląd - czyli kolory, kontrasty, animacje itp. Wszystko to nie powinno utrudniać dostępu do treści
  • funkcjonalności - formularze, narzędzia, przyciski itp Wszyscy powinni mieć możliwość wygodnego wprowadzania danych.

Jak audytować stronę?

Audyt możesz wykonać samodzielnie. Na stronie rządowej znajdziesz gotowy plik, który możesz wykorzystać do badania. W ten sposób możesz sprawdzić, czy strona spełnia podstawowe kryteria sukcesu.

Możesz też zlecić płatny audyt firmie zewnętrznej, która zrobi to za Ciebie. Plusem takiego rozwiązania jest oszczędność czasu i większa dokładność badania. Minusem oczywiście koszt.

Masz już uzupełnioną listę kontrolną lub dokument z podsumowaniem audytu? Czas przystąpić do pracy nad stroną.


Wprowadzanie zmian

Dokument podsumowujący badanie powinien trafić w ręce programisty. Dzięki temu będzie wiedział, co uwzględnić przy wycenie i w planie działania. Po sprawdzeniu, czy da się wprowadzić zmiany na stronie, może przystąpić do pracy.

Czy możesz sam dostosować stronę do wytycznych?

Strona zwykle wymaga poprawy w dwóch aspektach:

  • poprawa kodu i funkcjonalności
  • poprawa treści (czytelność, zrozumiałość).

Część zmian prawdopodobnie będziesz w stanie wdrożyć sam. Powinieneś sobie poradzić np. z wprowadzeniem zmian w tekstach, czy z dodawaniem transkrypcji do plików audio. Jednak niektóre z nich mogą wymagać bardziej zaawansowanej wiedzy z zakresu programowania.

Unikaj gotowych rozwiązań w postaci wgrywania wtyczek, modułów, czy motywów do WCAG. Po pierwsze raczej nie naprawią wszystkich błędów. Po drugie często mogą popsuć to, co działało do tej pory. Zanim zastosujesz cokolwiek, zapoznaj się z tym rozwiązaniem i sprawdź, czy na pewno spełnia wszystkie Twoje wymagania.


Badanie po wdrożeniu

Po zakończeniu prac warto raz jeszcze sprawdzić, czy wszystko działa tak, jak powinno. Weź do ręki Listę kontrolną lub podsumowanie audytu i przejdź proces badania raz jeszcze.

Jeśli wszystko działa, możesz stworzyć deklarację dostępności.


Deklaracja dostępności

Deklaracja dostępności to dokument, który opisuje, w jakim stopniu strona jest dostępna. Osoby z niepełnosprawnością mogą dowiedzieć się z niego:

  • z jakich udogodnień mogą skorzystać,
  • jakie mogą napotkać problemy podczas przeglądania strony.

Według zapisu w ustawie o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych każda strona internetowa należąca do podmiotu publicznego powinna mieć na taki dokument.

Jeśli strona nie spełnia żadnych wymogów, również musi mieć opublikowaną deklarację dostępności.


Narzędzia

Niestety nie ma na rynku narzędzia, które jednym kliknięciem sprawdzi dostępność Twojej strony. Nie istnieją też gotowe rozwiązania, które zapewnią całkowitą zgodność z wymogami WCAG. Oba procesy są dość skomplikowane i wymagają zaangażowania. To jednak nie znaczy, że wszystko musisz prawdzać/robić sam!

Poniżej zebraliśmy listę przydatnych narzędzi, które mogą ułatwić i przyspieszyć proces audytowania. Znajdziesz też kilka propozycji, które pomogą Ci stworzyć bardziej dostępne treści i funkcjonalności.


Narzędzia do oceny dostępności

W tej sekcji znajdziesz kilka narzędzi, które pomogą Ci sprawdzić najważniejsze aspekty związane z WCAG - od poprawności kodu przez kontrast aż po dedykowane walidatory, które ocenią większość istotnych elementów na stronie.


W3C - Narzędzie do raportowania

Poza wspomnianą wcześniej listą kontrolną, przygotowaną przez ministerstwo, możesz też wykorzystać narzędzie od organizacji W3C. To zautomatyzowany formularz, w którym możesz zaznaczać spełnione kryteria i opisać elementy do poprawy. Po przejściu wszystkich kroków generowany jest raport. Niestety formularz dostępny jest tylko w języku angielskim.


W3C - Narzędzia do testowania poprawności kodu

Organizacja W3C udostępnia też dwa darmowe narzędzia do badania poprawności kodu. Pierwsze z nich Walidator W3C sprawdza zgodność kodu HTML z obowiązującym standardem HTML5. Natomiast narzędzie Unicorn wyłapuje dodatkowo błędy w plikach z kodem CSS.

Zrzut ekranu z aplikacji do badania poprwaności kodu HTML

Walidator W3C pokazuje błędy w kodzie w formie listy z krótkim opisem problemu.



Browser Stack - Responsywność strony

Jednym z kryteriów sukcesu na poziomie AA jest Orientacja - strona powinna wyświetlać się poprawnie na urządzeniach niezależnie od tego, czy np. smartfon jest w pozycji pionowej, czy poziomie. To możecie sprawdzić w Browser Stack na różnych urządzeniach i przeglądarkach.


Walidatory do badania dostępności

Istnieją rozwiązania, które pomogą Ci w bardziej automatyczny sposób sprawdzić stan strony.

WAVE - Web Accesibility Evaluation Tool

Bada kod i renderowanie (to, co widać po jego przetworzeniu przez przeglądarkę). W prosty sposób oznacza błędy związane z kontrastem elementów, brakujące atrybuty alt, czy źle wdrożone oznaczenia pól formularza.

Z Wave możesz skorzystać na stronie narzędzia lub dodać wtyczkę do przeglądarki (Chrome lub Firefox).

Zrzut ekranu z efektem działania wtyczki WAVE

Wtyczka WAVE zaznacza wszystkie istotne elementy i błędy związane z dostępnością na wyświetlanej stronie


Utilitia - polski walidator

Narzędzie w języku polskim. Po rejestracji możesz przetestować stronę pod kątem 30 czynników podzielonych według trzech poziomów dostępności. Na koniec analizy widoczna jest ogólna ocena serwisu i raport. Możesz też pobrać wersję szczegółową i przekazać ją programiście.

axe - Web Web Accessibility Testing

To wtyczka do przeglądarki Chrome i bardzo ciekawe rozwiązanie dla programistów. Po zainstalowaniu wystarczy otworzyć narzędzie deweloperskie przeglądarki i tam w dodatkowej zakładce jednym kliknięciem można przeprowadzić test dla danej strony.


Testery kontrastu

Kontrast możesz sprawdzić w walidatorze lub skorzystać z dodatkowego narzędzia. Tego typu rozwiązań znajdziesz w Internecie sporo, więc przedstawię tylko dwa. Jeśli nie będą Ci odpowiadać, możesz śmiało wyszukać czegoś innego.

Contrast ratio

Bardzo proste narzędzie. Podajesz kolor tła i kolor tekstu (w dowolnym formacie: RGB, HEX itp.), a narzędzie wyświetla ocenę. Możesz zmieniać kolory i szukać odpowiedniego zestawu.

Zrzut ekranu z aplikacji badającej kontrast

Przykładowy test kontrastu w Contrast ratio


Checkmycolors

To narzędzie różni się od poprzedniego sposobem badania. Wystarczy, że wkleisz link do strony, którą chcesz sprawdzić, a reszta dzieje się sama. Po zakończeniu analizy wyświetli się tabela z listą elementów na stronie wraz z oceną poprawności kontrastu. Tu też masz możliwość testowania różnych zestawów kolorów po kliknięciu wybranego wiersza tabeli.


Czytniki ekranu

Testowanie strony z włączonym czytnikiem ekranu pomoże Ci zweryfikować działanie w bardziej realistycznych warunkach. Uruchom czytnik, odłącz mysz komputerową i przekonaj się, czy wszystkie informacje są dostępne, a opcje działają tak, jak powinny.

NVDA

Darmowy czytnik ekranu dla osób niewidomych. Jeśli chcesz mieć pewność, że strona jest odczytywana w tego typu narzędziach bez błędów, możesz to przetestować właśnie z pomocą NVDA.

Narrator (Windows 10)

Jeśli korzystasz z Windows 10, w funkcjach systemu znajdziesz Narratora, czyli... czytnik ekranu. Bez instalacji dodatkowego oprogramowania możesz przekonać się, jak Twoja strona jest odczytywana przez tego typu narzędzia.

  • Skrót klawiszowy uruchamiający Narratora: Ctrl +Windows + Enter


Więcej propozycji narzędzi znajdziesz na stronie organizacji W3C


Narzędzia do zwiększania dostępności

Nie zapewnimy dostępności jednym narzędziem, ale jest kilka, które możesz wykorzystać (Ty lub programista), aby ułatwić sobie ten proces.

WAI-ARIA

Pod tym skrótem kryje się dokumentacja przygotowana przez WAI. Co zawiera? Między innymi zestaw atrybutów w języku HTML, które pomagają w "zrozumieniu" zawartości technologiom asystującym. Pełna dokumentację z instrukcją implementacji znajdziesz na stronie organizacji W3C.

Jasnopis

To narzędzie pomoże Ci sprawdzić poziom trudności Twojego tekstu. Wklejasz tam odpowiedni fragment, a aplikacja ocenia, kto jest w stanie ze zrozumieniem przeczytać treść. Jasnopis to edytor, więc możesz na bieżąco wprowadzać zmiany i obserwować, czy trudność jest na odpowiednim poziomie.

Zrzut ekranu z wynikiem testu w aplikacji Jasnopis

W Jasnopisie możesz sprawdzić trudność tekstu i edytować go


Adobe Color - Narzędzia dostępności

Z tego rozwiązania możesz skorzystać na początku tworzenia strony, gdy zastanawiasz się nad kolorystyką. W pierwszej zakładce "Koło kolorów" wybierz zestaw, który chciałbyś wykorzystać w projekcie, a następnie kliknij zakładkę "Narzędzia dostępności". Znajdziesz tam informacje, czy występuje potencjalny konflikt kolorów, czyli czy osoby cierpiące na zaburzenia widzenia barw, będą w stanie je rozróżnić.


Podsumowanie

Sam dokument i wdrożenie WCAG 2.1 może wydawać się bardzo skomplikowany. Niestety nie da się "załatwić" dostępności jednym kliknięciem, ale efekt końcowy jest wart wysiłku.

Przeczytanie treści wytycznych i odpowiednie narzędzia ułatwią nieco cały proces lub pomogą Ci ocenić pracę wykonaną przez programistę.

Przejdź do treści dokumentu WCAG 2.1, znajdź odpowiednie narzędzia i spraw, żeby kolejny kawałek Internetu w postaci Twojej strony stał się przyjazny dla wszystkich użytkowników!


Źródła i przydatne zasoby

Dodaj komentarz

CAPTCHA
To pytanie sprawdza czy jesteś człowiekiem i zapobiega wysyłaniu spamu.
×

Zostaw numer, omówimy Twój projekt

CAPTCHA
To pytanie sprawdza czy jesteś człowiekiem i zapobiega wysyłaniu spamu.