nautil logo czarne

Artykuły

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)

Zasada Wytyczne Kryterium sukcesu Poziom
1 – Postrzegalność 1.1 – Alternatywa w postaci
tekstu
1.1.1 – Treść nietekstowa A
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 relacje A
1.3.2 – Zrozumiała kolejność A
1.3.3 – Właściwości zmysłowe A
1.3.4 – Orientacja – wyświetlanie treści
w układzie poziomym, jak i pionowym
AA
1.3.5 – Określenie prawidłowej wartości AA
1.4 – Możliwość rozróżnienia –
Ułatwienie percepcji treści
1.4.1 – Użycie koloru A
1.4.2 – Kontrola odtwarzania dźwięku A
1.4.3 – Kontrast (minimalny) AA
1.4.4 – Zmiana rozmiaru tekstu AA
1.4.5 – Tekst w postaci grafiki AA
1.4.10 – Zawijanie tekstu AA
1.4.11 – Kontrast dla treści niebędących tekstem AA
1.4.12 – Odstępy w tekście AA
1.4.13 – Treści spod kursora lub fokusa AA
2 – Funkcjonalność 2.1 – Dostępność z klawiatury 2.1.1 – Klawiatura A
2.1.2 – Brak pułapki na klawiaturę A
2.1.4 – Jednoliterowe skróty klawiszowe A
2.2 – Wystarczająca ilość czasu 2.2.1 – Możliwość dostosowania czasu A
2.2.2 – Wstrzymywanie (pauza), zatrzymywa
nie, ukrywanie
A
2.3 – Ataki padaczki – Migotanie 2.3.1 – Trzy błyski lub wartości poniżej progu A
2.4 – Możliwość nawigacji 2.4.1 – Możliwość pominięcia bloków A
2.4.2 – Tytuły stron A
2.4.3 – Kolejność fokusu A
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 etykiety AA
2.4.7 – Widoczny fokus AA
2.5 – Sposoby wprowadzania
danych
2.5.1 – Gesty punktowe A
2.5.2 – Anulowanie kliknięcia A
2.5.3 – Etykieta w nazwie A
2.5.4 – Aktywowanie ruchem A
3 – Zrozumiałość 3.1 – Możliwość odczytania 3.1.1 – Język strony A
3.1.2 – Język części AA
3.2 – Przewidywalność 3.2.1 – Po oznaczeniu fokusem A
3.2.2 – Podczas wprowadzania danych A
3.2.3 – Konsekwentna nawigacja AA
3.2.4 – Konsekwentna identyfikacja AA