Logo firmy Nautil

Dostępność stron internetowych WCAG – co nowego wnosi WCAG 2.1?

Standard WCAG (z ang. „Web Content Accessibility Guidelines to zbiór reguł i zasad, które powinna spełnić strona internetowa aby była dostępna dla jak największego grona użytkowników a zwłaszcza dla osób niepełnosprawnych. Standard ten powstał już w 1999 roku jednak jego pierwsza wersja nie była wystarczająca aby osoba niepełnosprawna mogła swobodnie poruszać się po stronie www.

Dlatego WCAG stale się rozwijało, pojawiały się nowe zasady i reguły czego owocem było powstanie jego nowej wersji – WCAG 2.0. Dokument z wytycznymi powstał w 2008 roku i znacznie rozszerzał jego poprzednia wersję.

Dokument WCAG 2.0 zbudowany jest wokół czterech zasad:

  1. Postrzegalność – informacje oraz komponenty interfejsu użytkownika muszą być przedstawione użytkownikom w sposób dostępny dla ich zmysłów.
  2. Funkcjonalność – komponenty interfejsu użytkownika oraz nawigacja muszą być możliwe do użycia.
  3. Zrozumiałość – informacje oraz obsługa interfejsu użytkownika muszą być zrozumiałe.
  4. Solidność – treść musi być solidnie opublikowana, tak, by mogła być skutecznie interpretowana przez różnego rodzaju oprogramowania użytkownika, w tym technologie wspomagające.

Standard WCAG w drugiej wersji definiuje trzy poziomy zgodności strony internetowej z wytycznymi:

  • A – najbardziej podstawowe wymagania wobec serwisu. Strona zgodna z tym poziomem daje możliwość ograniczonego poruszania się po niej osobom niepełnosprawny.
  • AA – zawiera wszystkie reguły z poziomu A, ale i szereg dodatkowych, których spełnienie daje duże możliwości na odbiór strony przez osoby niepełnosprawne. Większość stron podmiotów i instytucji publicznych według ustawy powinien spełniać ten poziom standardu WCAG.
  • AAA – najwyższy poziom zgodności, które często jest możliwy do wdrożenia tylko przez firmy specjalizujące się w tej dziedzinie. Obejmuje między innymi transkrypcję materiałów multimedialnych osadzonych na stronie www.

Przez ostatnie 11 lat pracowano nad rozszerzeniem i optymalizacją wytycznych standardu WCAG czego efektem było powstanie w 2018 roku WCAG w wersji 2.1.

Lista zmian jakiego wnosi nowa odsłona standardu WCAG 2.1:

  • Orientacja – Zawartość powinna wyświetlać się i działać tak samo w każdej orientacji ekranu (pionowej/poziomej).
  • Określenie przeznaczenia elementów wejściowych.
  • Dopasowanie do szerokości – Zawartość na ekranie powinna być wyświetlana tak, by nie było konieczne przewijanie ekranu w poziomie.
  • Kontrast elementów nietekstowych.
  • Odstępy w tekście – Osoby słabowidzące powinny mieć możliwość zmiany odstępu między wierszami, akapitami, słowami i literami.
  • Zawartość wyświetlana pod wskaźnikiem lub po oznaczeniu fokusem.
  • Znakowe skróty klawiszowe.
  • Limity czasowe – Jeśli brak aktywności może spowodować utratę danych, to należy poinformować o tym użytkownika. Przykładem może tu być zamknięcie częściowo wypełnionego formularza przelewu na stronie banku po kilku minutach bezczynności.
  • Animacja po interakcji.
  • Gesty wskaźnikowe.
  • Anulowanie zdarzeń wskaźnika – Jeśli użytkownik przypadkiem dotknie jakiegoś elementu, to musi mieć możliwość anulowania związanej z nim czynności np. poprzez przesunięcie palca na inny element przed jego podniesieniem.
  • Etykieta w nazwie.
  • Wzbudzanie ruchem.
  • Rozmiar celu – Jeśli jakiś element może być obsługiwany poprzez jego dotknięcie, to musi on mieć odpowiedni rozmiar (min. 44×44 piksele CSS).
  • Współwystępujące mechanizmy wejścia.
  • Komunikaty o stanie.

Poniżej wszystkie zasady standardu WCAG (od wersji 1.0 do wersji 2.1)

ZasadaWytyczneKryterium sukcesuPoziom
1 – Postrzegalność1.1 – Alternatywa w postaci
tekstu
1.1.1 – Treść nietekstowaA
1.2 – Dostępność mediów
zmiennych w czasie
1.2.1 – Tylko audio oraz tylko wideo (nagranie)A
1.2.2 – Napisy rozszerzone (nagranie)A
1.2.3 – Audiodeskrypcja lub alternatywa dla
mediów (nagranie)
A
1.2.5 – Audiodeskrypcja (nagranie)AA
1.3 – Możliwość adaptacji –
Odpowiednia (zrozumiała) pre
zentacja zawartości
1.3.1 – Informacje i relacjeA
1.3.2 – Zrozumiała kolejnośćA
1.3.3 – Właściwości zmysłoweA
1.3.4 – Orientacja – wyświetlanie treści
w układzie poziomym, jak i pionowym
AA
1.3.5 – Określenie prawidłowej wartościAA
1.4 – Możliwość rozróżnienia –
Ułatwienie percepcji treści
1.4.1 – Użycie koloruA
1.4.2 – Kontrola odtwarzania dźwiękuA
1.4.3 – Kontrast (minimalny)AA
1.4.4 – Zmiana rozmiaru tekstuAA
1.4.5 – Tekst w postaci grafikiAA
1.4.10 – Zawijanie tekstuAA
1.4.11 – Kontrast dla treści niebędących tekstemAA
1.4.12 – Odstępy w tekścieAA
1.4.13 – Treści spod kursora lub fokusaAA
2 – Funkcjonalność2.1 – Dostępność z klawiatury2.1.1 – KlawiaturaA
2.1.2 – Brak pułapki na klawiaturęA
2.1.4 – Jednoliterowe skróty klawiszoweA
2.2 – Wystarczająca ilość czasu2.2.1 – Możliwość dostosowania czasuA
2.2.2 – Wstrzymywanie (pauza), zatrzymywa
nie, ukrywanie
A
2.3 – Ataki padaczki – Migotanie2.3.1 – Trzy błyski lub wartości poniżej proguA
2.4 – Możliwość nawigacji2.4.1 – Możliwość pominięcia blokówA
2.4.2 – Tytuły stronA
2.4.3 – Kolejność fokusuA
2.4.4 – Cel linku (w kontekście)A
2.4.5 – Wiele sposobów na zlokalizowanie
strony
AA
2.4.6 – Nagłówki i etykietyAA
2.4.7 – Widoczny fokusAA
2.5 – Sposoby wprowadzania
danych
2.5.1 – Gesty punktoweA
2.5.2 – Anulowanie kliknięciaA
2.5.3 – Etykieta w nazwieA
2.5.4 – Aktywowanie ruchemA
3 – Zrozumiałość3.1 – Możliwość odczytania3.1.1 – Język stronyA
3.1.2 – Język częściAA
3.2 – Przewidywalność3.2.1 – Po oznaczeniu fokusemA
3.2.2 – Podczas wprowadzania danychA
3.2.3 – Konsekwentna nawigacjaAA
3.2.4 – Konsekwentna identyfikacjaAA