Katalog wytycznych WCAG 2.0
Percepcja
1.1. Tekst alternatywny
1.1.1 Informacja nietekstowa
- wszystkie obrazki/animacje powinny zawierać poprawnie wypełniony atrybut alt
- wszystkie pola występujących w serwisie formularzy muszą być odpowiednio opisane
- w przypadku zabezpieczenia Captcha oprócz obrazka musi być dołączona wersja audio kodu zabezpieczającego
1.2. Media zależne od czasu
1.2.1 Tylko dźwięk lub tylko wideo (nagranie)
- dla wszystkich nagranych (nietransmitowanych na żywo) materiałów dźwiękowych i wideo, publikowanych na stronie, takich jak np. podcasty dźwiękowe, pliki mp3, itd. powinna zostać zapewniona transkrypcja opisowa nagranego dźwięku
- dla materiałów wideo (nietransmitowanych na żywo), które nie zawierają ścieżki dźwiękowej, został zapewniony opis tekstowy lub dźwiękowy, aby użytkownicy niewidomi także mieli dostęp do prezentowanej informacji
1.2.2 Napisy (nagranie)
- wszystkie opublikowane na stronie materiały wideo (nietransmitowane na żywo) udostępnione na stronie posiadają napisy (nie tylko dialogi, ale prezentują również ważne informacje dźwiękowe)
1.2.3 Audiodeskrypcje lub treści alternatywne multimediów (nagranie)
- dla każdego materiału multimedialnego musi zostać przygotowany jego odpowiednik, który opowiada tę samą historię i przedstawia te same informacje, co opublikowany materiał
1.2.4 Napisy (na żywo)
- dla każdej treści multimedialnej, udostępnianej na żywo (materiały tylko dźwiękowe, webcasty, wideokonferencje, itd.) muszą zostać zapewnione napisy zsynchronizowane z dźwiękiem
1.2.5 Audiodeskrypcja (nagranie)
- dla materiałów wideo musi zostać zapewniona alternatywna ścieżka dźwiękowa, która zawiera rozszerzone informacje (np. o postaciach, wydarzeniach, scenach itp.) umożliwiająca zrozumienie treści osobom niedowidzącym/niewidomym
1.2.6 Język migowy (nagranie)
- dla każdej treści multimedialnej, która posiada dźwięk musi zostać zapewniony tłumacz, przedstawiający informacje w języku migowym
1.2.7 Audiodeskrypcja poszerzona (nagranie)
- w przypadku gdy brak jest możliwości dodania ścieżki z audiodeskrypcją do prezentowanego materiału wideo z powodu synchronizacji ścieżki dźwiękowej (np. nie ma pauz w ścieżce audio), musi zostać zapewniona wersja alternatywną wideo z pauzami, które pozwolą na wstawienie audiodeskrypcji
1.2.8 Alternatywy multimediów (nagranie)
- wszystkie udostępnione na stronie treści multimedialne, które posiadają ścieżkę wideo muszą posiadać transkrypcję opisową
1.2.9 Tylko dźwięk (na żywo)
- dla każdej treści dźwiękowej prezentowanej na żywo, musi zostać zapewniona transkrypcja opisowa
1.3. Możliwość adaptacji
1.3.1 Informacje i jej związki
- layout serwisu musi być oparty o <div>
- nagłówki muszą być stosowane w odpowiedniej hierarchii
- dla informacji prezentowanych w tabelach należy stosować tytuły i nagłówki
- dla pól formularza należy stosować etykiety
- menu serwisu powinno być prezentowane w postaci listy
1.3.2 Zrozumiała kolejność
- struktura i układ elementów na stronie musi mieć sens i być logicznie poprawny po wyłączeniu styli CSS
1.3.3 Charakterystyki zmysłowe
- wszystkie elementy nawigacyjne muszą być obiektywnie rozpoznawalne niezależnie od stopnia dysfunkcji i używanego programu
1.4. Treść rozróżnialna
1.4.1 Użycie koloru
- do przekazywania informacji należy używać mechanizmów obiektywnie ‘dostępnych’ dla wszystkich użytkowników (np. obowiązkowe pola formularza nie może być oznaczone tylko kolorem, ale np. również słowem ‘wymagane’
- linki muszą odróżniać się od otaczającej je treści nie tylko kolorem, ale np. pogrubieniem
1.4.2 Kontrola dźwięku
- odtwarzanie (szczególnie automatyczne) dźwięku na stronie nie może nakładać się z głosem lektora czytającego tekst dla osób niewidomych.
- użytkownik powinien móc decydować o włączeniu/wyłączeniu dźwięku, zmianie głośności, zatrzymaniu
1.4.3 Kontrast (minimalny)
- kontrast pomiędzy tekstem lub grafikami tekstowymi a tłem powinien być w stosunku 4,5:1, za 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 kontrastu.
teksty lub grafiki tekstowe, które są częścią komponentu nieaktywnego interfejsu użytkownika, są czysto dekoracyjne lub są częścią grafiki lub zdjęcia.
- jeśli nie możemy zapewnić odpowiedniego kontrastu to powinna istnieć możliwość przełączenia się w tryb wysokiego kontrastu, który pod względem merytorycznym i funkcjonalnym jest tożsamy z trybem ‘normalnym’
1.4.4 Zmiana rozmiaru tekstu
- po zmianie rozmiaru strony (powiększenie) strona nie może tracić przejrzystości i funkcjonalności
- serwis powinien umożliwiać stopniową zmianę wielkości tekstu
1.4.5 Grafiki tekstowe
- serwis nie powinien zawierać informacji tekstowe udostępnione za pomocą grafiki. Nie dotyczy np. logo firmy
1.4.6 Kontrast zwiększony
- kontrast pomiędzy tekstem lub grafikami tekstowymi a tłem powinien być w stosunku 7:1. Nie dotyczy przypadków jak w pkt 1. poziomu AA
1.4.7 Niska głośność lub brak treści audio w tle
Dla udostępnionych na stronie internetowej następujących rodzajów nagrań audio, które
- zawierają głównie mowę,
- nie są CAPTCHA w postaci audio,
- nie są utworami muzycznymi
musimy zostać spełnione przynajmniej jedno z poniższych założeń
1. Nagranie audio nie będzie zawierało w tle utrudniających w odbiorze dźwięków.
2. Dźwięki w tle mogą zostać wyłączone przez użytkownika.
3. Głośność dźwięków w tle jest przynajmniej o 20 decybeli mniejsza (4 razy cichsze), niż głośność mowy, która stanowi główną treść nagrania. Wyjątkiem mogą być sporadyczne, jedno- lub dwusekundowe wstawki dźwiękowe
1.4.8 Prezentacja wizualna
- kolory na pierwszym planie oraz kolory tła powinny być wybierane przez użytkownika
- szerokość tekstu nie może przekraczać 80 znaków lub 40 w przypadku języków: chińskiego, japońskiego i koreańskiego
- tekst nie powinien być wyjustowany
- interlinia powinna wynosić przynajmniej 150% a odstęp pomiędzy paragrafami 1,5 razy wartości interlinii
- rozmiar tekstu powinien móc zostać zmieniony do 200% bez użycia technologii asystujących, nie wymagając od użytkownika, który chce odczytać cały wiersz, przesuwania tekstu horyzontalnie przy widoku w pełnym oknie
1.4.9 Grafiki tekstowe (bez wyjątków)
- grafiki tekstowe powinny być użyte jedynie jako dekoracje (nie zawierają informacji lub informacji nie można przekazać w inny sposób)
Funkcjonalność
2.5. Dostępność przy pomocy klawiatury
2.1.1 Klawiatura
- każda funkcjonalność serwisu musi być dostępna z poziomu klawiatury (za wyjątkiem tych, które konwencjonalnie nie mogą być wykonane klawiaturą, np. rysunek odręczny)|
- skróty klawiaturowe nie mogą pokrywać się z istniejącymi skrótami systemowymi lub skrótami przeglądarki
- nie mogą zostać użyte aktywne zdarzenia dla obiektów nieaktywnych (np. onclick na elemencie <div> nie zostanie wykonany z poziomu klawiatury)
2.1.2 Klawiatura niezablokowana
- użytkownik powinien móc swobodnie poruszać się po wszystkich elementach strony
2.1.3 Klawiatura (bez wyjątków)
- dokładnie cała funkcjonalność serwisu musi być dostępna z poziomu klawiatury
2.6. Wystarczająca ilość czasu
2.2.1 Ilość czasu możliwa do ustawienia
- wszystkie automatycznie zmieniające się treści zależne od czasu mogą zostać zmienione (np. wydłużenie czasu, czy przełączenie zmiany automatycznej na ręczną)
2.2.2 Pauza, zatrzymanie, ukrycie
- dla wszystkich informacji, które są automatycznie przesuwane, przewijane lub mrugające, są widoczne dłużej niż 5 sekund oraz są przedstawione równolegle z inną treścią lub automatycznie się aktualizują oraz są przedstawione równolegle z inną treścią powinien zostać zapewniony mechanizm, który pozwoli na ich zatrzymanie, wstrzymanie lub ukrycie
2.2.3 Bez limitu czasu
- użytkownicy powinni mieć tyle czasu, ile potrzebują na wykonanie określonego zadania na stronie internetowej
- żadna funkcjonalność nie powinna posiadać limitu czasu
2.2.4 Zakłócenia
- wszelkie komunikaty, informacje, aktualizacje, itp. czyli mechanizmy, które mogą rozpraszać użytkownika i przeszkadzać podczas wykonywania czynności w serwisie muszą mieć możliwość odłożenia w czasie lub wyłączenia
2.2.5 Ponowne potwierdzenie autentyczności
- po automatycznej (limit czasu) zakończeniu sesji autoryzowanej przez użytkownika i ponownej autoryzacji, powinien on móc kontynuować czynności bez utraty danych z aktualnej strony
- dane powinny być automatycznie zapamiętane
2.7. Ataki padaczki
2.3.1 Trzy błyski lub przekaz podprogowy
-w serwisie nie powinny znajdować się treści, które migają więcej niż 3 razy na sekundę (nie dotyczy gdy: miganie jest wystarczająco niewielkie, błyski mają mały kontrast i nie zawierają dużo czerwieni)
2.3.2 Trzy błyski
- w serwisie nie powinny znajdować się jakiekolwiek treści, które migają więcej niż 3 razy na sekundę
2.8. Nawigacja
2.4.1 Bezpośredni dostęp
- serwis powinien umożliwiać bezpośrednie przejście do wybranych elementów podstrony (np. do tekstu, do głównego menu itp.) pomijając standardowe elementy, jak nagłówek
2.4.2 Tytuł strony
- każda podstrona serwisu powinna mieć unikalny i jednoznaczny tytuł
2.4.3 Kolejność zaznaczenia
- kolejność poruszania się po menu serwisu lub polach formularza musi być logiczna i intuicyjna (nieprzypadkowa)
2.4.4 Cel linku (z kontekstem)
- wszystkie elementy aktywne, jak przyciski, linki muszą być jednoznaczne, a w razie potrzeby dodatkowo opisane
2.4.5 Wiele dróg
- budowa serwisu musi umożliwiać znalezienie innych stron w serwisie na przynajmniej dwa sposoby z następujących:
- spis treści
- mapa serwisu
- wyszukiwarka
- lista powiązanych podstron
- lista wszystkich podstron (przydatna tylko w przypadku małych stron)
2.4.6 Nagłówki i etykiety
- nagłówki i etykiety muszą być sensowe i jednoznaczne
- nagłówki i etykiety nie mogą się dublować
2.4.7 Widoczność zaznaczenia
- poruszając się klawiaturą po elementach serwisu użytkownik musi łatwo zorientować się, na którym elemencie się znajduje
2.4.8 Lokalizacja
- serwis musi jednoznacznie wskazywać użytkownikowi na jakiej podstronie się znajduje
- dla elementów serwisu, które są podzielone na kroki użytkownik musi łatwo się zorientować w którym kroku się znajduje i ile pozostało do końca
2.4.9 Cel linku (poza kontekstem)
- wszystkie elementy aktywne muszą zawierać opis celu bezpośrednio z linkowanego tekstu (nie powinny istnieć linki z tym samym tekstem (np. Czytaj więcej) prowadzące do różnych treści)
2.4.10 Nagłówki sekcji
- jeśli dana treść (nie cała strona, a właściwa informacja) jest podzielona na sekcje, to muszą być one odpowiednio opisane nagłówkami
Zrozumiałość
3.1. Czytelność
3.1.1 Język strony
- główny język strony musi być określony za pomocą atrybutu lang i/lub xml:lang w znaczniku HTML
3.1.2 Język elementów
- jeśli w treści dokumentu zachodzi zmiana języka to musi być ona określona za pomocą znacznika lang i/lub xml:lang dla danego elementu
3.1.3 Nietypowe słowa
- słowa nieznane, dwuznaczne lub specyficzne dla poruszanej tematyki muszą być wyjaśnione
3.1.4 Skróty
- dla użytych skrótów musi być zamieszczone ich wyjaśnienie
3.1.5 Poziom umiejętności czytania
- skomplikowane treści opisujące pewne procesy, instrukcje, informacje, zawierające nazwy własne, które wymagają szerszej wiedzy i wykształcenia wyższego niż poziom gimnazjalny muszą zostać uzupełnione o streszczenie lub wzbogacone o ilustracje, wykresy, filmy, animacje, itp. Pomogą one zrozumieć trudny tekst nie tylko osobom o niższym wykształceniu ale również osobom, które mają trudności z koncentracją, czy osobom głuchym, dla których nie wszystkie zwroty i terminy są zrozumiałe
3.1.6 Wymowa
- jeśli do zrozumienia znaczenia użytych słów niezbędna jest znajomość ich wymowy, to musi ona zostać zapewniona zaraz po wystąpieniu słowa
3.2. Przewidywalność
3.2.1 Zaznaczenie (focus)
-zmiana elementu aktywnego nie może powodować zmiany kontekstu na stronie (np. doczytania jakiejś treści, przejście do innej podstrony)
3.2.2 Wprowadzanie danych
- zmiana jakiegoś komponentu na stronie nie może powodować zmiany kontekstu (np. w formularzu podzielonym na kroki po wypełnieniu wszystkich pól z kroku 1 formularz nie powinien automatycznie przenosić nas do kolejnego)
3.2.3 Spójna nawigacja
- nawigacja serwisu musi być spójna i zachowywać ten sam układ i porządek na wszystkich podstronach serwisu
3.2.4 Spójna identyfikacja
- elementy pełniące te same funkcje na różnych podstronach muszą być jednakowo oznaczone i opisane
3.2.5 Zmiana na żądanie
- wszystkie zmiany kontekstu powinny być wywoływane przez użytkownika lub przynajmniej musi mieć on możliwość wyłączenia automatycznych zmian
3.3. Pomoc przy wprowadzaniu danych
3.3.1 Identyfikacja błędów
- każdy formularz zamieszczony na stronie musi zawierać sprawdzenie poprawności wprowadzonych danych
- komunikaty o błędzie powinny jednoznacznie opisywać przyczynę błędu
- użytkownik powinien zostać powiadomiony którego pola błąd dotyczy – komunikat znajduje się PRZED polem
3.3.2 Etykiety lub instrukcje
- każde miejsce, gdzie trzeba wprowadzić dane musi zawierać dokładną informację/instrukcję odnośnie zawartości (np. data urodzenia w formacie YYYY-MM-DD)
3.3.3 Sugestie rozwiązań błędów
- w przypadku błędu przy wprowadzaniu danych system powinien sugerować użytkownikowi poprawne rozwiązanie
3.3.4 Zapobieganie błędom (formularze prawne, finansowe, z podawaniem danych)
gdy na stronie internetowej użytkownik może wykonać jedną z poniższych czynności:
- wypełniać zobowiązania prawne lub przeprowadzać transakcje finansowe
- modyfikować i usuwać przechowywane dane
- wypełniać testy
muszą zostać zapewnione mechanizmy pozwalające na przywrócenie poprzednich danych, weryfikacje lub potwierdzenie
3.4.5 Pomoc
- wszędzie gdzie użytkownik może dodać, modyfikować lub usuwać dane musi otrzymać pełną informację o tym, w jaki sposób to wykonać. Jeśli pole ma wiele ograniczeń muszą być opisane przed wystąpieniem pola. Jeśli wymaga szerszego wyjaśnienia może to być link do podstrony z rozszerzoną pomocą dotyczącą tego pola
3.3.6 Zapobieganie błędom (wszystkie rodzaje formularzy)
- wszystkie formularz wysyłające dane muszą mieć zapewnione mechanizmy pozwalające na weryfikację, przywrócenie lub potwierdzenie tych danych
Rzetelność
4.12. Kompatybilność
4.1.1 Parsowanie
- kod HTML/CSS strony musi być poprawny
- standardowe elementy HTML muszą być używane zgodnie ze specyfikacją
4.1.2 Nazwa, przeznaczenie, wartość
- własne/niestandardowe mechanizmy interfejsu użytkownika muszą być jednoznacznie identyfikowane i opisane dla pełnego zrozumienia ich funkcji
Procedura badania zgodności serwisu z wytycznymi WCAG2.0
Przedstawione wyżej wytyczne stanowią bardzo szczegółowy wykaz wymogów i wskazówek, które muszą zostać spełnione, aby serwis internetowy można było uznać za spełniający wymogi standardu WCAG. Wytyczne te zostaną udostępnione w formie swego rodzaju instrukcji, która będzie zawierać podpowiedzi dotyczącymi sposobów weryfikacji poszczególnych punktów i umożliwi prawidłową ocenę i interpretację zarówno mechanizmów, jak i treści znajdujących się na wybranej stronie internetowej.
Końcowym dokumentem, który zostanie przedstawiony instytucji, której serwis internetowy podlega badaniu będzie raport zawierający szczegółowe podsumowanie badanych elementów serwisu. W raporcie znajdą się wszystkie przedstawione wytyczne z uwzględnieniem podziału na stopień dostosowania serwisu (wspominane we wprowadzeniu poziomu A, AA, AAA). Na każde z pytań dotyczące spełnienia określonego wymogu osoba tworząca raport może udzielić jednej z poniższych odpowiedzi:
- TAK – jeśli serwis spełnia określony wymóg
- NIE – jeśli serwis nie spełnia określonego wymogu
- NIE DOTYCZY – jeśli w serwisie nie istnieją treści/mechanizmy związane z określoną wytyczną (np. brak filmu uniemożliwia odpowiedź na pytanie o uzupełnienie go o język migowy).
Przy każdym z pytań został podany poziom dostępności danego wymogu, co w łatwy sposób umożliwi ocenę serwisu z podziałem na stopień dostosowania do potrzeb osób niepełnosprawnych.
Test sprawdzający
Dodatkowym narzędziem umożliwiającym samodzielne sprawdzenie zgodności serwisu z wytycznymi WCAG 2.0 jest specjalnie przygotowany test online. Test ten zawiera wszystkie pytania omówione wyżej wskazówki i pytania dotyczące poziomu dostosowania serwisu do potrzeb osób z różnego rodzaju dysfunkcjami. Każde z pytań zawiera podpowiedź, które wskazuje w jaki sposób sprawdzić i ocenić stopień spełnienia określonego wymogu oraz analogicznie jak w raporcie możliwość wybrania jednej z trzech odpowiedzi:
- TAK
- NIE
- NIE DOTYCZY
Dodatkowo każde z pytań może zostać opatrzone komentarzem osoby sprawdzającej dany serwis.
Po wypełnieniu testu zostaje wygenerowany raport w postaci pliku PDF, zawierający udzielone przez użytkownika odpowiedzi oraz komentarze. Przy każdym pytaniu jest zawarta informacja jakiego stopnia dostosowania serwisu dany wymóg dotyczy.
Test jest jedynie wsparciem dla użytkownika – zawiera zestaw pytań i wskazówek oraz umożliwia wygenerowanie w pełni funkcjonalnego raportu z badania serwisu. Jednak na wszystkie pytania odpowiada użytkownik, sam test nie sprawdza ‘automatycznie’, nie podpowiada i nie generuje odpowiedzi na żadne z pytań.
Jeśli zapoznałeś się ze zgromadzonymi w serwisie zasobami materiałami rozwiąż WCAG2.0 - quiz sprawdzający
aby sprawdzić swoją wiedzę.