WCAG 2.1 AA

Wprowadzenie do WCAG 2.1 Poziom AAA

WCAG 2.1 Poziom AAA to najwyższy i najbardziej kompleksowy standard dostępności stron internetowych i aplikacji, będący rozszerzeniem wytycznych WCAG (Web Content Accessibility Guidelines) w wersji 2.1. Osiągnięcie poziomu AAA oznacza spełnienie wszystkich kryteriów sukcesu z poziomów A i AA (zarówno z WCAG 2.0, jak i nowych wprowadzonych w WCAG 2.1), a także dodatkowych, bardziej rygorystycznych wymagań specyficznych dla poziomu AAA. Celem AAA jest zapewnienie maksymalnej dostępności dla jak najszerszego grona użytkowników, w tym osób z bardzo poważnymi niepełnosprawnościami, często wykraczając poza standardowe wymogi prawne, aby stworzyć prawdziwie inkluzywne środowisko cyfrowe.

Dlaczego WCAG 2.1 Poziom AAA Jest Tak Ważny?

Dążenie do zgodności z poziomem AAA to wyraz głębokiego zaangażowania w tworzenie inkluzywnych doświadczeń cyfrowych. Choć nie zawsze jest prawnie wymagany (często wystarcza poziom AA), jego wdrożenie przynosi znaczące korzyści:

• Uniwersalna Dostępność: Zapewnia dostępność treści dla osób z najcięższymi formami niepełnosprawności, w tym z poważnymi wadami wzroku, głęboką głuchotą, niepełnosprawnościami poznawczymi, neurologicznymi czy motorycznymi.
• Rozszerzone Grupy Użytkowników: Korzystają na nim osoby starsze, osoby z tymczasowymi ograniczeniami (np. kontuzja ręki) oraz osoby w specyficznych warunkach (np. korzystające z urządzenia w jasnym świetle słonecznym lub w hałaśliwym otoczeniu).
• Lepsza Użyteczność dla Wszystkich: Wiele usprawnień dla osób z niepełnosprawnościami przekłada się na lepszą użyteczność dla wszystkich użytkowników, np. wyższy kontrast, jaśniejsza struktura treści czy bardziej przewidywalne interakcje.
• Wizerunek i Zaufanie: Podkreśla etyczne podejście organizacji do designu i buduje zaufanie wśród użytkowników, prezentując markę jako otwartą, odpowiedzialną społecznie i dbającą o każdego klienta.
• Innowacyjność: Wymaga innowacyjnych rozwiązań, które mogą stać się standardem w przyszłości, promując kreatywne podejścia do projektowania interfejsów i treści.

Kryteria Sukcesu WCAG 2.1 Poziomu AAA

Poziom AAA obejmuje wszystkie kryteria z poziomów A i AA (w tym te dodane w WCAG 2.1, takie jak 2.5.1 Pointer Gestures, 2.5.2 Pointer Cancellation, 2.5.3 Label in Name, 2.5.4 Motion Actuation, 2.5.5 Target Size dla gestów i interakcji), a także dodatkowe, bardziej rygorystyczne wymagania. Poniżej przedstawiono kryteria sukcesu specyficzne dla poziomu AAA (pochodzące z WCAG 2.0 oraz nowe z WCAG 2.1), które stanowią uzupełnienie dla niższych poziomów:

• 1.2.3 Audio Description or Media Alternative (Prerecorded) (AAA):

  Dla prerejestrowanych treści wideo, które są zsynchronizowane (tzn. posiadają ścieżkę audio i wideo), dostępna jest audiodeskrypcja lub alternatywa dla mediów (np. pełny transkrypt tekstowy, który zawiera opis wizualny i dialogi).

• 1.2.6 Sign Language (Prerecorded) (AAA):

  Dla wszystkich prerejestrowanych treści audio (w tym wideo ze ścieżką audio), które zawierają dialogi, dostępna jest interpretacja w języku migowym.

• 1.2.7 Extended Audio Description (Prerecorded) (AAA):

  Dla wszystkich prerejestrowanych treści wideo, które są zsynchronizowane, dostępna jest rozszerzona audiodeskrypcja, gdy pauza w treści audio nie jest wystarczająca do zawarcia audiodeskrypcji (np. wymaga zatrzymania filmu).

• 1.2.8 Media Alternative (Prerecorded) (AAA):

  Alternatywa dla mediów (np. pełny transkrypt tekstowy) jest dostępna dla wszystkich prerejestrowanych treści wideo, które są zsynchronizowane. Taka alternatywa powinna zawierać wszystkie informacje wizualne i audialne, w tym opisy wizualne.

• 1.2.9 Live Audio Only (AAA):

  Dla wszystkich treści audio na żywo (bez wideo), dostępna jest alternatywa, która zawiera wszystkie informacje przekazywane przez treść audio, np. transkrypcja na żywo.

• 1.3.6 Identify Purpose (AAA) (WCAG 2.1):

  Cel komponentów interfejsu użytkownika, ikon i regionów jest programowo określany, aby pomóc agentom użytkownika (np. przeglądarkom, technologiom wspomagającym) w prezentowaniu treści użytkownikom w sposób dostosowany do ich potrzeb. Oznacza to używanie semantyki HTML (np. <input type="search">, <nav>) oraz atrybutów takich jak ARIA, aby technologie wspomagające mogły lepiej interpretować i prezentować elementy interfejsu, np. sugerując autouzupełnianie pól formularza lub zmieniając ich wygląd.

• 1.4.6 Contrast (Enhanced) (AAA):

  Wizualna prezentacja tekstu i obrazów tekstu ma współczynnik kontrastu co najmniej 7:1, z wyjątkiem dużego tekstu (co najmniej 18 punktów lub 14 punktów pogrubionego), który wymaga 4.5:1. Jest to znacznie bardziej rygorystyczne niż wymagane 4.5:1 dla poziomu AA dla zwykłego tekstu.

• 1.4.7 Low or No Background Audio (AAA):

  W przypadku treści dźwiękowych zawierających mowę (np. podcasty, filmy), tło dźwiękowe jest wyciszone o co najmniej 20 decybeli w stosunku do mowy (z wyłączeniem okazjonalnych dźwięków tła trwających nie dłużej niż dwie sekundy).

• 1.4.8 Visual Presentation (AAA):

  Dla bloków tekstu zapewnione są mechanizmy kontroli wizualnej prezentacji, takie jak możliwość zmiany koloru pierwszego planu i tła, szerokości wierszy do 80 znaków, wyrównania tekstu bez justowania (justowania obustronnego), odstępów między wierszami (co najmniej 1.5), akapitami (co najmniej 2) i literami/słowami (co najmniej 0.12 i 0.16 szerokości znaku odpowiednio).

• 1.4.9 Images of Text (No Exception) (AAA):

  Obrazy tekstu są używane tylko wtedy, gdy jest to absolutnie niezbędne dla kontekstu (np. logo marki, unikatowa typografia jako część identyfikacji wizualnej). W przeciwnym razie tekst powinien być zawsze reprezentowany jako prawdziwy tekst HTML/CSS.

• 2.1.3 Keyboard (No Exception) (AAA):

  Cała funkcjonalność treści jest dostępna za pomocą klawiatury bez żadnych wyjątków. Oznacza to, że żadna interakcja nie może być wykonywana wyłącznie za pomocą myszy lub urządzenia wskazującego, np. przeciągania.

• 2.2.4 Interruptions (AAA):

  Przerwania (takie jak wyskakujące okienka, automatyczne aktualizacje treści, powiadomienia) mogą być odkładane lub wyłączane przez użytkownika, z wyjątkiem pilnych przerw w działaniu (np. alerty bezpieczeństwa).

• 2.2.5 Re-authenticating (AAA):

  Jeśli sesja uwierzytelniająca wygaśnie, użytkownik może kontynuować aktywność bez utraty danych po ponownym uwierzytelnieniu, np. po zalogowaniu się ponownie system powinien przywrócić stan aplikacji.

• 2.3.2 Three Flashes (AAA):

  Strony internetowe nie zawierają niczego, co miga więcej niż trzy razy w ciągu jednej sekundy lub miga poniżej progów ogólnych i czerwonych błysków (dla większych obszarów ekranu). Ma to na celu zapobieganie atakom epileptycznym.

• 2.4.8 Location (AAA):

  Informacje o bieżącej lokalizacji użytkownika w zestawie stron internetowych są dostępne, np. poprzez widoczną ścieżkę nawigacyjną (breadcrumbs) lub jasny tytuł strony.

• 2.4.9 Link Purpose (Link Only) (AAA):

  Dla każdego linku przeznaczenie linku jest opisane w tekście linku, tak aby można było je określić bez dodatkowego kontekstu (np. „Przeczytaj więcej o naszych usługach” zamiast „Więcej”).

• 2.4.10 Section Headings (AAA):

  Nagłówki (<h1>–<h6>) są używane do organizowania treści i reprezentują logiczną, hierarchiczną strukturę sekcji na stronie.

• 2.5.6 Concurrent Input Mechanisms (AAA) (WCAG 2.1):

  Treść nie ogranicza użycia mechanizmów wprowadzania danych dostępnych na platformie (np. myszy, klawiatury, dotyku, głosu). Oznacza to, że użytkownik może swobodnie przełączać się między różnymi metodami interakcji bez utraty funkcjonalności lub konieczności ponownego uruchamiania zadania. Na przykład, jeśli strona obsługuje interakcje dotykowe, nie powinna blokować również obsługi klawiaturą lub myszą.

• 3.1.5 Reading Level (AAA):

  Gdy tekst wymaga wyższego poziomu wykształcenia niż niższy poziom gimnazjum (ok. 9 klas szkoły podstawowej), dostępna jest wersja alternatywna lub podsumowanie, które nie wymaga wyższego poziomu czytania. Jest to szczególnie ważne dla osób z niepełnosprawnościami poznawczymi.

• 3.1.6 Pronunciation (AAA):

  Dla treści, w których specyficzna wymowa słowa jest niezbędna do zrozumienia znaczenia, dostępny jest mechanizm wskazujący wymowę (np. poprzez nagranie audio, transkrypcję fonetyczną, lub użycie elementu <ruby> z <rp>/<rt>).

• 3.2.5 Change on Request (AAA):

  Zmiany w kontekście (takie jak otwarcie nowego okna, przejście do innej strony, zmiana kolejności elementów, automatyczne odświeżenie) inicjowane są tylko na żądanie użytkownika, lub użytkownik ma możliwość ich wyłączenia. Zapewnia to przewidywalność interfejsu.

• 3.3.5 Help (AAA):

  Dostępna jest kontekstowa pomoc, która pomaga użytkownikowi wypełniać zadania. Oznacza to, że pomoc jest łatwo dostępna i odnosi się bezpośrednio do aktualnego miejsca lub zadania, które użytkownik wykonuje.

• 3.3.6 Error Prevention (All) (AAA):

  W przypadku formularzy, które powodują zobowiązania prawne lub transakcje finansowe, modyfikują lub usuwają dane użytkownika, lub przesyłają odpowiedzi testowe, użytkownik ma możliwość cofnięcia, sprawdzenia lub potwierdzenia danych przed ich przesłaniem. Jest to rozszerzenie kryterium AA, obejmujące wszystkie potencjalne ryzykowne interakcje.

Praktyczne Wskazówki dla Zgodności z WCAG 2.1 Poziom AAA

• Projektowanie Wizualne i Kontrast:
  • Zawsze dąż do najwyższego możliwego kontrastu tekstu i tła. Używaj narzędzi do sprawdzania kontrastu (np. Contrast Checker), aby upewnić się, że spełniasz współczynnik 7:1 dla normalnego tekstu i 4.5:1 dla dużego tekstu.
  • Zapewnij opcje dostosowywania wizualnego: umożliwienie użytkownikom zmiany kolorów, rozmiarów czcionek, odstępów między wierszami i literami za pomocą ustawień przeglądarki, arkuszy stylów użytkownika lub wbudowanych narzędzi strony.
  • Unikaj obrazów tekstu na rzecz prawdziwego tekstu HTML/CSS, chyba że jest to element dekoracyjny, który nie niesie kluczowych informacji (np. logo marki).
• Media i Treści Czasowe:
  • Dla wszystkich prerejestrowanych wideo z audio, zawsze zapewniaj pełną audiodeskrypcję lub alternatywę tekstową (transkrypt) zawierającą opis wizualny.
  • Dla treści na żywo (audio lub wideo), oferuj transkrypcje w czasie rzeczywistym lub tłumaczenia na język migowy.
  • Zapewnij tłumaczenia na język migowy dla wszystkich prerejestrowanych treści audio z dialogami, umieszczając je w wideo lub oferując osobną wersję z interpretem.
  • Upewnij się, że wszelkie dźwięki tła są znacznie wyciszone w stosunku do mowy (co najmniej 20 dB), aby ułatwić zrozumienie dialogów.
• Interakcja i Nawigacja:
  • Cała funkcjonalność musi być dostępna za pomocą klawiatury, bez żadnych wyjątków (np. funkcje wymagające przeciągnięcia myszą).
  • Linkom nadawaj jednoznaczne nazwy, które jasno określają ich przeznaczenie bez konieczności odczytywania otaczającego kontekstu.
  • Zapewnij spójną i łatwą do zrozumienia strukturę nagłówków sekcji (h1-h6), które logicznie odzwierciedlają hierarchię treści.
  • Upewnij się, że użytkownicy mają pełną kontrolę nad wszelkimi zmianami kontekstu, takimi jak wyskakujące okienka czy automatyczne przekierowania – powinny być one inicjowane tylko na żądanie użytkownika.
  • Unikaj migających treści, które mogą wywołać ataki epileptyczne lub powodować rozproszenie uwagi.
  • Umożliw użytkownikom korzystanie z różnych mechanizmów wprowadzania danych jednocześnie, bez kolizji lub ograniczeń.
• Treści Tekstowe i Czytelność:
  • Pisz w jasny i zrozumiały sposób. Jeśli tekst jest złożony, oferuj uproszczoną wersję lub streszczenie. Wykorzystuj narzędzia do oceny czytelności tekstu.
  • Wskazuj wymowę trudnych słów lub nazwisk, jeśli jest to kluczowe dla zrozumienia, np. poprzez użycie tagów ruby lub tooltipów.
  • Używaj semantycznych elementów HTML, aby jasno określić cel komponentów i regionów strony (np. <nav>, <main>, <footer>).
• Formularze i Zapobieganie Błędom:
  • Zapewnij obszerną pomoc kontekstową dla formularzy, np. poprzez instrukcje w etykietach, tooltipach lub linkach do sekcji pomocy.
  • Dla ważnych operacji (np. transakcje finansowe, usuwanie danych), zawsze oferuj mechanizmy potwierdzenia, weryfikacji lub cofnięcia przed finalizacją działania.

Przykłady Implementacji

Przykład 1: Kontrast (1.4.6 Contrast Enhanced)

Wymóg AAA 1.4.6 podnosi minimalny współczynnik kontrastu do 7:1 dla zwykłego tekstu i 4.5:1 dla dużego tekstu (18pt lub 14pt bold).

p {
    color: #000000; /* Czarny tekst */
    background-color: #F2F2F2; /* Bardzo jasnoszare tło */
    font-size: 16px;
}
    

p {
    color: #757575; /* Szary tekst */
    background-color: #FFFFFF; /* Białe tło */
    font-size: 16px;
}
    

Przykład 2: Język Migowy (1.2.6 Sign Language)

Dla prerejestrowanych treści audio (w tym wideo ze ścieżką audio) zawierających dialogi, dostępna jest interpretacja w języku migowym.

<video controls width="640" height="360">
    <source src="film-z-pjm.mp4" type="video/mp4">
    <track kind="captions" srclang="pl" src="napisy.vtt" label="Napisy PL">
    <!-- W idealnym przypadku film jest już nagrany z wbudowanym oknem z interpretem PJM -->
    <p>Twoja przeglądarka nie obsługuje elementu wideo. Możesz <a href="film-z-pjm.mp4">pobrać film</a> lub zapoznać się z <a href="transkrypcja.html">pełną transkrypcją (PL)</a>.</p>
</video>
<p>Dostępna jest również <a href="transkrypcja-z-pjm.html">pełna transkrypcja z opisami języka migowego</a> (jeśli interpreter PJM nie jest wbudowany w wideo).</p>
    

<video controls width="640" height="360">
    <source src="film-bez-pjm.mp4" type="video/mp4">
    <track kind="captions" srclang="pl" src="napisy.vtt" label="Napisy PL">
    <p>Twoja przeglądarka nie obsługuje elementu wideo. Możesz <a href="film-bez-pjm.mp4">pobrać film</a> lub zapoznać się z <a href="transkrypcja.html">transkrypcją</a>.</p>
</video>
    

Przykład 3: Cel Linku (2.4.9 Link Purpose (Link Only))

Cel linku musi być zrozumiały wyłącznie z tekstu linku, bez dodatkowego kontekstu.

<p>Przeczytaj więcej o <a href="/nasze-uslugi">naszych usługach dostępności</a>.</p>
<p>Możesz <a href="/pobierz-raport-roczny.pdf">pobrać raport roczny w formacie PDF (3MB)</a>.</p>
    

<p>Oferujemy szeroki zakres usług dostępności. <a href="/nasze-uslugi">Więcej</a>.</p>
<p>Raport roczny jest dostępny tutaj. <a href="/pobierz-raport-roczny.pdf">Pobierz</a>.</p>
    

Najlepsze Praktyki i Typowe Pułapki

• Zbyt Ogólne Teksty Linków: Unikaj linków typu "Kliknij tutaj", "Więcej", "Pobierz". Zawsze precyzuj cel linku w jego tekście, aby był zrozumiały poza kontekstem.
• Niski Kontrast: Regularnie testuj kontrast kolorów. Nie polegaj na własnym osądzie – używaj narzędzi. Pamiętaj o zwiększonych wymaganiach AAA (7:1 dla zwykłego tekstu).
• Brak Alternatyw dla Mediów: Nie zapominaj o pełnych transkrypcjach tekstowych dla audio i wideo, oraz o tłumaczeniach na język migowy dla treści zawierających mowę. Rozszerzona audiodeskrypcja jest kluczowa dla złożonych wizualnie treści.
• Brak Kontroli nad Zmianami Kontekstu: Nigdy nie zmieniaj automatycznie zawartości, nie przekierowuj ani nie otwieraj nowych okien bez wyraźnej zgody użytkownika.
• Obrazy Zamiast Tekstu: Minimalizuj użycie obrazów zawierających tekst. Jeśli musisz ich użyć (np. logo), upewnij się, że tekst alternatywny jest dokładny i że informacje są dostępne w formie tekstowej gdzie indziej.
• Niewystarczająca Obsługa Klawiatury: Wszystkie elementy interaktywne muszą być dostępne i obsługiwane wyłącznie za pomocą klawiatury. Żadna funkcjonalność nie może wymagać gestów myszy (np. przeciągania) bez alternatywy klawiaturowej.
• Złożoność Językowa: Tam, gdzie to możliwe, upraszczaj język. Jeśli treść wymaga wysokiego poziomu czytania, zawsze oferuj uproszczoną alternatywę lub podsumowanie.

Podsumowanie

Wdrożenie WCAG 2.1 Poziomu AAA to ambitne, ale niezwykle wartościowe przedsięwzięcie. Wymaga dogłębnego zrozumienia potrzeb użytkowników z różnymi niepełnosprawnościami oraz systematycznego podejścia do projektowania i rozwoju. Choć jest to najwyższy standard, wysiłek włożony w jego osiągnięcie przekłada się na stworzenie naprawdę uniwersalnych i inkluzywnych doświadczeń cyfrowych, które są dostępne dla każdego, niezależnie od jego możliwości. Inwestując w AAA, budujesz platformę, która służy wszystkim użytkownikom i promuje równość w dostępie do informacji i usług.