Informacje o WCAG
WCAG – „Wytyczne dotyczące dostępności stron internetowych” (ang. Web Content Accessibility Guidelines).
Jest to zbiór zasad dotyczących tworzenia i prezentowania treści internetowych w sposób zapewniających ich dostępność dla jak najszerszej grupy odbiorców, w szczególności dla osób z niepełnosprawnościami. Wytyczne przygotowuje Konsorcjum W3C w ramach Web Accessibility Initiative (WAI). Wszystkie wytyczne i rekomendacje pogrupowane zostały w cztery podstawowe zasady:
- Postrzegalność – wszystkie elementy na stronie muszą być pokazane użytkownikom w sposób zrozumiały dla ich zmysłów.
- Funkcjonalność – przygotowanie funkcjonalności muszą być możliwe do użycia i wykorzystania.
- Zrozumiałość – interfejs, nawigacja, przyciski i inne elementy informujące lub wymagające akcji użytkownika muszą być zrozumiałe.
- Kompatybilność – treści i materiały mają być opublikowane we właściwy, rzetelny sposób, czyli taki, który zapewnia ich prawidłową interpretację przez oprogramowanie do tego służące, w tym także przez technologie wspomagające służące osobom z niepełnosprawnościami. Zasada ta odnosi się w szczególności do właściwego stosowania technicznych standardów.
Każda z Zasad zawiera wytyczne, dla których przygotowane zostały kryteria sukcesu, określające spełnienie danej wytycznej na danym poziomie. Zdefiniowane są trzy poziomy spełnienia danej wytycznej:
- Poziom A – najbardziej podstawowy. Spełnienie wytycznej na tym poziomie oznacza zapewnienie dostępności cyfrowej jedynie w sposób podstawowy. Zapewnienie dostępności na poziomie A jest bezwzględnym obowiązkiem.
- Poziom AA – poziom rekomendowany, zapewnia dostępność cyfrową w możliwie szerokim zakresie dla większości użytkowników w tym osób z niepełnosprawnościami. Zapewnienie dostępności na poziomie AA jest obowiązkowe dla wszystkich podmiotów publicznych.
- Poziom AAA – najwyższy poziom dostępności, gwarantujący pełną dostępność wszystkich elementów serwisu dla wszystkich użytkowników serwisu. Zalecamy, aby twórcy stron zawsze dążyli do publikowania treści internetowych w sposób zapewniający pełną ich dostępność dla wszystkich.
Uwaga. Spełnienie wytycznych WCAG 2.1 poziom AA jest obowiązkowe i wymagane ustawowo dla wszystkich dokumentów, stron i aplikacji Uniwersytetu Warszawskiego.
Polskie tłumaczenie wytycznych WCAG dostępne jest na stronie internetowej W3.ORG
Więcej informacji i wyjaśnień wytycznych WCAG na stronie fundacji Widzialni
Poniżej zamieszczamy wykaz wytycznych z kryteriami sukcesu WCAG2.1, których spełnienie jest obowiązkowe dla podmiotów publicznych (poziom AA). Wykaz uzupełniony został krótkimi komentarzami. Odnośniki do oryginalnych wytycznych pozwolą Państwu zapoznać się z ich pełną wersją wraz z wyjaśnieniami i technikami implementacji.
Zasada 1 – Postrzegalność
Wytyczna 1.1 – Alternatywa w postaci tekstu
Zapewnij tekstowe zamienniki wszystkich treści nietekstowych, aby można je było zamienić na inne formy (np. powiększony druk, brajl, mowa syntetyczna, symbole lub prostszy język).
Kryterium sukcesu 1.1.1 – Treść nietekstowa (A)
Każdy element nietekstowy (graficzny) musi posiadać tekstową treść alternatywną (krótki opis szczegółów, jakie są przedstawione, w zależności od kontekstu). Jeśli dany element pełni jedynie funkcję ozdobną, należy do niego dodać pusty tekst alternatywny.
Wytyczna 1.2 – Multimedia – Dostępność mediów zmiennych w czasie
Zapewnij rozwiązania alternatywne dla mediów opartych na czasie.
Kryterium sukcesu 1.2.1 – Tylko audio oraz tylko wideo (nagranie) (A)
Dla wszystkich nagranych (nietransmitowanych na żywo) materiałów dźwiękowych i wideo, publikowanych na stronie, należy zapewnić transkrypcję opisową nagranego dźwięku, dla zapewnienia dostępności informacji dla osób głuchych.
Materiały wideo (nietransmitowane na żywo), które nie zawierają ścieżki dźwiękowej, powinny posiadać opis tekstowy lub dźwiękowy, dla zapewnienia dostępu do prezentowanych informacji użytkownikom niewidomym.
Kryterium sukcesu 1.2.2 – Napisy rozszerzone (nagranie) (A)
Wszystkie opublikowane na stronie materiały wideo (nietransmitowane na żywo) powinny posiadać napisy, które przedstawiają nie tylko dialogi, ale prezentują również ważne informacje dźwiękowe.
Kryterium sukcesu 1.2.3 – Audiodeskrypcja lub alternatywa dla mediów (nagranie) (A)
Dla nagrań wideo należy zapewnić audiodeskrypcję. Treść alternatywna może być odrębną podstroną.
Kryterium sukcesu 1.2.4 Napisy rozszerzone (na żywo)
Do wszystkich treści audio w multimediach zsynchronizowanych (dźwięk i obraz) przekazywanych na żywo zapewnione są napisy rozszerzone .
Kryterium sukcesu 1.2.5 – Audiodeskrypcja (nagranie) (AA)
Narracja dodana do ścieżki dźwiękowej, opisująca ważne szczegóły wizualne (np. napisy), których nie można zrozumieć z samej ścieżki dźwiękowej, zsynchronizowane z zapisem video (najczęściej narracja dodana jest podczas przerw w dialogach)
Wytyczna 1.3 – Możliwość adaptacji – Odpowiednia (zrozumiała) prezentacja zawartości
Twórz treści, które mogą być prezentowane na różne sposoby bez utraty informacji czy struktury.
Kryterium sukcesu 1.3.1 – Informacje i relacje (A)
Należy w prawidłowy sposób stosować znaczniki semantyczne dla wszystkich treści strony. Dzięki nim programy odczytujące (screen readers), używane przez osoby niewidome i niedowidzące, mogą w prawidłowy sposób zinterpretować i odczytać treść strony oraz efektywnie się po niej przemieszczać.
Kryterium sukcesu 1.3.2 – Zrozumiała kolejność (A)
Sekwencja nawigacji oraz czytania, określona za pomocą kolejności w kodzie HTML musi być logiczna i intuicyjna. Zmiana kolejności poprzez style CSS może utrudnić odczytanie i zrozumienie treści użytkownikom, posługującym się programami odczytu ekranu, które ignorują definicje styli.
Kryterium sukcesu 1.3.3 – Właściwości zmysłowe (A)
Elementy nawigacyjne oraz komunikaty na stronie nie mogą polegać tylko na charakterystykach zmysłowych komponentów, tzn. nazwie kształtu (np. “kliknij w trójkątny przycisk”); wizualnym położeniu (np. “menu znajduje się w prawej kolumnie”); dźwięku (np. “sygnał dźwiękowy oznacza błąd”). Wymóg ten dotyczy także mechanizmów zabezpieczających jak kody CAPTCHA.
Kryterium sukcesu 1.3.4 – Orientacja – wyświetlanie treści w układzie poziomym, jak i pionowym (AA)
Układ treści nie może wymuszać orientacji wyświetlania (pionowo/poziomo) chyba, że takie ograniczenie jest niezbędne (np. do pokazania układu czeku bankowego)
Kryterium sukcesu 1.3.5 – Określenie prawidłowej wartości (AA)
Pola wprowadzania danych powinny posiadać mechanizm weryfikacji poprawności danych oraz ich znaczenia określonym w specyfikacji HTML 5, par. 4.10.18.7.1. dla atrybutu “autocomplete”.
Wytyczna 1.4 – Możliwość rozróżnienia – Ułatwienie percepcji treści
Ułatwiaj oglądanie i słuchanie treści oraz oddzielanie informacji od tła.
Kryterium sukcesu 1.4.1 – Użycie koloru (A)
Nie należy używać koloru jako jedynej metody do przekazywania treści i rozróżniania elementów wizualnych, bo informacje tak wyrażone będą niewidoczne dla osób niewidomych oraz części osób słabowidzących. Obok wyróżnienia kolorem należy dodać inną cechę wyróżnienia (np. podkreślenie) lub dodatkowe oznaczenia np. *, lub słowo “wymagane” itp.
Kryterium sukcesu 1.4.2 – Kontrola odtwarzania dźwięku (A)
Strona nie powinna automatycznie uruchamiać odtwarzania dźwięków. Dla użytkowników niewidomych dźwięki odtwarzane na stronie będą nakładać się z głosem syntezatora mowy. Wszelkie odtwarzacze multimediów na stronie muszą posiadać interfejs sterujący dostępny z klawiatury, z etykietami funkcji poszczególnych przycisków.
Kryterium sukcesu 1.4.3 – Kontrast (minimalny) (AA)
“Minimalny kontrast pomiędzy tekstem lub grafikami tekstowymi a tłem powinien wynosić 4,5:1, z wyjątkiem następujących przypadków:
- Duża czcionka (ponad 18 punktów lub 14 punktów czarnym kolorem) oraz duże grafiki tekstowe powinny posiadać kontrast przynajmniej 3:1.
- Teksty, które są częścią logotypu lub znaku handlowego nie posiadają wymagań minimalnych odnośnie do kontrastu.
- Teksty lub grafiki tekstowe, które:
- są częścią komponentu nieaktywnego interfejsu użytkownika,
- są czysto dekoracyjne,
- są częścią grafiki lub zdjęcia,
nie posiadają wymagań minimalnych odnośnie do kontrastu.
Do sprawdzenia kontrastu można użyć prostego programu np. Contrast Analyser.
Kryterium sukcesu 1.4.4 – Zmiana rozmiaru tekstu (AA)
Strona internetowa powinna być czytelna i funkcjonalna po podwojeniu rozmiaru tekstu. Treści powinny dopasowywać się do obszaru okna, zachowując swoją czytelność. Zalecane jest dodanie na stronie mechanizmu umożliwiającego zmianę wielkości czcionek.
Kryterium sukcesu 1.4.5 – Tekst w postaci grafiki (AA)
Nie należy używać grafiki, aby przedstawić tekst, jeśli ta sama prezentacja wizualna może być zaprezentowana jedynie przy użyciu tekstu. Wyjątek stanowią logotypy i inne materiały mające charakter wizualnej identyfikacji. W tych sytuacjach należy zastosować tekst alternatywny lub tekst ukryty.
Kryterium sukcesu 1.4.10 – Dopasowanie do ekranu (AA)
Prezentacja tekstu bez konieczności przewijania w dwóch wymiarach dla: minimalna szerokość przewijania tekstu – 320 pikseli CSS, minimalna wysokość przewijania tekstu – 256 px CSS. Dopuszczalne wyjątki: obrazy, mapy, diagramy, prezentacje, duże tabele danych.
Kryterium sukcesu 1.4.11 – Kontrast dla treści nietekstowych (AA)
Elementy nietekstowe dla elementów interfejsu użytkownika oraz obiekty graficzne wymagane do zrozumienia treści lub istotne do przekazania informacji, muszą zapewniać kontrast co najmniej 3:1 względem sąsiednich elementów.
Kryterium sukcesu 1.4.12 – Odstępy w tekście (AA)
Należy zapewnić prawidłowe wyświetlanie tekstu, dla wymuszonych parametrów (np. poprzez ustawienia dostępności dla osób słabowidzących):
- Wysokość linii (odstęp między wierszami) do co najmniej 1,5-krotności rozmiaru czcionki;
- Rozstaw następujących akapitów co najmniej 2 razy większy od rozmiaru czcionki;
- Odstępy między literami (śledzenie) do co najmniej 0,12-krotności rozmiaru czcionki;
- Odstępy między wyrazami do co najmniej 0,16 wielkości czcionki.
NIE oznacza to, że w podstawowym widoku dokument (strona) ma mieć takie odstępy, tylko że po ustawieniu takich odstępów cała treść jest nadal widoczna i zrozumiała.
Kryterium sukcesu 1.4.13 – Treści spod kursora lub fokusa (AA)
Zapewnienie prawidłowej obsługi elementów aktywnych, wyzwalanych wskazaniem kursorem lub fokusem: możliwość odrzucenia; przejścia do nowej zawartości; trwałość (widoczność) do momentu usunięcia wyzwalacza. Przykład: atrybut <title>; rozwijane podpowiedzi, menu dynamiczne itp.
Zasada 2 – Funkcjonalność
Wytyczna 2.1 – Dostępność z klawiatury
Zapewnij dostępność wszystkich funkcjonalności za pomocą klawiatury
Kryterium sukcesu 2.1.1 – Klawiatura (A)
Cała funkcjonalność strony (wszystkie obszary) muszą być dostępne za pomocą klawiatury.
Kryterium sukcesu 2.1.2 – Brak pułapki na klawiaturę (A)
Użytkownik powinien móc poruszać się po wszystkich elementach nawigacyjnych strony, używając jedynie klawiatury. Strona nie może posiadać pułapek fokusa tzn. obszarów, z których nie jest możliwe wyjście jedynie za pomocą klawiatury (niezbędna jest akcja np. myszą).
Kryterium sukcesu 2.1.4 – Jednoliterowe skróty klawiszowe (A)
Jeśli zastosowane są jednoliterowe skróty klawiszowe, musi istnieć możliwość ich wyłączenia albo zmapowania z dodatkowymi klawiszami funkcji np. Alt, Ctrl, lub aktywacja tylko dla komponentu, który obecnie jest aktywny (posiada ustawiony fokus).
Wytyczna 2.2 – Wystarczająca ilość czasu
Zapewnij użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści.
Kryterium sukcesu 2.2.1 – Możliwość dostosowania czasu (A)
Należy zapewnić użytkownikowi wystarczająco dużo czasu na wykonanie czynności, bez niespodziewanych zmian treści, które mogą być wynikiem nałożonego limitu czasowego. Jeśli strona lub aplikacja ma limit czasowy na wykonanie danego zadania, należy zapewnić opcję jego wyłączenia, ustawienia lub zwiększenia. Wyjątek stanowią zdarzenia czasu rzeczywistego (np. aukcje).
Kryterium sukcesu 2.2.2 – Wstrzymywanie (pauza), zatrzymywanie, ukrywanie (A)
Dla wszystkich informacji zmieniających się automatycznie musi być zapewniony mechanizm, który pozwoli na ich zatrzymanie, wstrzymanie lub ukrycie.
Wytyczna 2.3 – Ataki padaczki – Migotanie
Prezentuj treść tak, aby nie wywoływała napadów padaczkowych.
Kryterium sukcesu 2.3.1 – Trzy błyski lub przekaz podprogowy (A)
Nie należy umieszczać treści, które migają więcej niż 3 razy na sekundę.
Wytyczna 2.4 – Możliwość nawigacji
Zapewnij użytkownikowi narzędzia pomagające w nawigacji i znalezieniu treści. Ułatw określenie, gdzie użytkownik aktualnie się znajduje w strukturze aplikacji czy strony.
Kryterium sukcesu 2.4.1 – Możliwość pominięcia bloków (A)
Należy zapewnić możliwość przechodzenia, bez ponownego załadowania strony, do istotnych treści serwisu, np. przy użyciu kotwic i specjalnego odnośnika na początku strony umożliwiającego pominięcie powtarzających się na podstronach stałych elementów. Taki odnośnik może być ukryty wizualnie.
Kryterium sukcesu 2.4.2 – Tytuły stron (A)
Każda podstrona serwisu internetowego powinna mieć unikalny i sensowny tytuł. Tytuły stron pełnią ważną funkcję informującą dla użytkowników niewidomych.
Kryterium sukcesu 2.4.3 – Kolejność fokusu (A)
Kolejność nawigacji po linkach, elementach formularzy, itp. (np. przy pomocy klawisza Tab) powinna być logiczna i intuicyjna.
Kryterium sukcesu 2.4.4 – Cel linku (w kontekście) (A)
Wszystkie elementy aktywne, takie jak linki, przyciski formularza, czy obszary aktywne map odnośników muszą być jednoznacznie nazwane lub opisane. Jeśli cel linku zostanie otwarty w nowym oknie, informacja o tym powinna być zawarta w treści tego odnośnika.
Kryterium sukcesu 2.4.5 – Wiele sposobów na zlokalizowanie strony (AA)
Serwis powinien umożliwiać różne sposoby odnajdywania informacji w nim zawartych, w tym powinien zawierać wyszukiwarkę oraz mapę serwisu.
Kryterium sukcesu 2.4.6 – Nagłówki i etykiety (AA)
Nagłówki są ważnym narzędziem organizacji treści na stronach oraz wzrokowej i bezwzrokowej nawigacji. Powinny w sposób logiczny i jasny porcjować informacje na stronie. Każda strona powinna posiadać jeden nagłówek poziomu 1, i dowolną ilość nagłówków niższych poziomów zorganizowanych hierarchicznie w sposób ciągły.
Kryterium sukcesu 2.4.7 – Widoczny fokus (AA)
Obsługując serwis z klawiatury, użytkownik musi widzieć, na którym aktywnym elemencie się znajduje. Niezbędne jest także widoczne oznaczanie zdarzeń wskazania, kliknięcia, odwiedzenia.
Wytyczna 2.5 – Metody obsługi
Ułatwiaj użytkownikom obsługę funkcji za pomocą różnych sposobów poza klawiaturą.
Kryterium sukcesu 2.5.1 – Gesty punktowe (A)
Treści internetowe, które interpretują działania wskaźnika, muszą umożliwiać obsługę gestami jednopunktowymi, chyba, że użycie gestów wielopunktowych lub opartych na ścieżce jest niezbędne.
Kryterium sukcesu 2.5.2 – Anulowanie kliknięcia (A)
Dla funkcji obsługiwanych gestami jednopunktowymi niezbędne jest zapewnienie co najmniej jednego z poniższych: brak działania podczas naciśnięcia (“Down-Event”) – wywołanie akcji odbywa się podczas zakończenia naciśnięcia ( “Up-Event”) i możliwy jest mechanizm przerwania lub cofnięcia funkcji;
Kryterium sukcesu 2.5.3 – Etykieta w nazwie (A)
Komponenty interfejsu użytkownika zawierające etykiety z tekstem lub obrazem tekstu muszą mieć nazwę zawierającą ten widoczny tekst.
Kryterium sukcesu 2.5.4 – Aktywowanie ruchem (A)
Funkcjonalność, którą można obsługiwać za pomocą ruchu urządzenia lub ruchu użytkownika, można również obsługiwać za pomocą elementów interfejsu użytkownika, a reagowanie na ruch można wyłączyć, aby zapobiec przypadkowemu uruchomieniu.
Zasada 3 – Zrozumiałość
Wytyczna 3.1 – Możliwość odczytania
Twórz treści możliwe do odczytania i zrozumienia.
Kryterium sukcesu 3.1.1 – Język strony (A)
Główny język strony powinien być określony za pomocą atrybutu lang i/lub xml:lang w znaczniku HTML. Znacznik ten jest niezbędny dla prawidłowego działania syntezatorów mowy.
Kryterium sukcesu 3.1.2 – Język części (AA)
Należy oznaczyć każdorazową zmianę języka w treści strony (słowa lub teksty w języku innym niż główny język strony).
Wytyczna 3.2 – Przewidywalność
Twórz strony internetowe tak, aby otwierały się, wyglądały i działały w sposób przewidywalny.
Kryterium sukcesu 3.2.1 – Po oznaczeniu fokusem (A)
Przeniesienie fokusa na dowolny element strony nie powinien wywoływać żadnej zmiany kontekstu na stronie, która może wprowadzić w błąd lub dezorientować użytkownika. Dotyczy to zwłaszcza użytkowników korzystających z klawiatury.
Kryterium sukcesu 3.2.2 – Podczas wprowadzania danych (A)
Wprowadzanie danych (np. w pole formularza) nie powinno wywoływać żadnej zmiany kontekstu na stronie, która może wprowadzić w błąd lub dezorientować użytkownika.
Kryterium sukcesu 3.2.3 – Konsekwentna nawigacja (AA)
Wszystkie mechanizmy nawigacji dostępne na stronie muszą być umieszczane w sposób intuicyjny i konsekwentny, co zapewni ich przewidywalne położenie np. dla użytkowników niewidomych.
Kryterium sukcesu 3.2.4 – Konsekwentna identyfikacja (AA)
Elementy, posiadające tę samą funkcjonalność powinny być w spójny sposób identyfikowane. Użytkownik, natrafiając na taki element, będzie mógł przewidzieć efekt jego zadziałania.
Wytyczna 3.3 – Pomoc przy wprowadzaniu informacji
Pomagaj użytkownikom unikać błędów i je korygować.
Kryterium sukcesu 3.3.1 – Identyfikacja błędu (A)
Błędne wypełnienie formularza musi być zakomunikowane w sposób umożliwiający użytkownikowi na jednoznacznie zidentyfikowanie błędu oraz na łatwe rozwiązanie problemu i powtórne przesłanie danych z formularza.
Kryterium sukcesu 3.3.2 – Etykiety lub instrukcje (A)
W każdym miejscu, w którym wymagane jest wprowadzenie przez użytkownika informacji, należy zapewnić czytelne etykiety lub instrukcje.
Kryterium sukcesu 3.3.3 – Sugestie korekty błędów (AA)
W przypadku wykrycia błędu przy wprowadzaniu danych do formularza należy przedstawić użytkownikowi sugestie, które mogą rozwiązać problem pod warunkiem, że nie zmieni to celu treści oraz nie będzie stanowiło zagrożenia (np. nie należy podpowiadać loginu w polu logowania)
Kryterium sukcesu 3.3.4 – Zapobieganie błędom (kontekst prawny, finansowy, związany z podawaniem danych) (AA)
Gdy na stronie internetowej użytkownik może wypełniać zobowiązania prawne lub przeprowadzać transakcje finansowe / modyfikować i usuwać przechowywane dane / wypełniać testy, należy zapewnić mechanizmy pozwalające na przywrócenie poprzednich danych, weryfikację lub potwierdzenie.
Zasada 4 – Solidność
Wytyczna 4.1 – Kompatybilność
Zapewnij jak największą zgodność z aktualnymi i przyszłymi programami użytkownika, w tym z technologiami asystującymi.
Kryterium sukcesu 4.1.1 – Poprawność kodu(A)
Kod HTML i CSS musi być wolny od błędów i poprawny semantycznie. Jest to ważne także z punktu widzenia technologii asystujących. Do weryfikacji można użyć automatycznego walidatora html oraz walidatora css.
Kryterium sukcesu 4.1.2 – Nazwa, rola, wartość (A)
Wszystkie komponenty interfejsu użytkownika, również muszą być jednoznacznie identyfikowane poprzez nadanie im nazw, etykiet, przeznaczenia. Szczególnie ważne jest to dla technologii asystujących, które dzięki temu będą mogły zrozumieć nazwę czy przeznaczenie napotkanego elementu i przekazać odpowiednią informację do użytkownika lub wykonać określone działanie.
Kryterium sukcesu 4.1.3 – Komunikaty o stanie (AA)
Do przekazywania wiadomości dla użytkownika, należy stosować rozwiązania, które będą uwzględniać ich prezentację poprzez technologie wspomagające, np. ikonka kosza zakupowego z liczbą “5”, powinna posiadać tekst dla screen-readera: “Koszyk zakupowy, pięć elementów”.