Lista
kontr olna
do samodzielnego badania
dostępności cyfrowej strony internetowej
i jej zgodności z ustawą z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron
internetowych i aplikacji mobilnych podmiotów publicznych
Opracowanie: Departament Społeczeństwa Informacyjnego, Kancelaria Prezesa Rady Ministrów
Warszawa, 2021
Czym jest i do czego służy lista kontrolna?
Kiedy
korzystać z listy kontrolnej?
Pytania
i możliwe odpowiedzi w liście kontrolnej
Jak
wykonać badanie oparte na liście kontrolnej?
Ocena dostępności cyfrowej - poziom podstawowy
Ocena dostępności cyfrowej - poziom średni
Ocena dostępności cyfrowej – poziom zaawansowany
Tabela podsumowująca badanie dostępności cyfrowej
Lista
kontrola jest narzędziem do samodzielnego badania strony internetowej pod kątem
jej dostępności cyfrowej dla osób z niepełnosprawnościami.
Przy jej pomocy możesz ocenić czy strona internetowa jest zgodna ze standardami WCAG 2.1 (Web Content Accessibility Guidelines 2.1) i z ustawą z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych.
Nie zawsze możesz zlecić badania dostępności cyfrowej ekspertowi (audytorowi dostępności), a informacji z takiego badania potrzebujesz np. do opracowania deklaracji dostępności. W takiej sytuacji dobrym rozwiązaniem jest samodzielne badanie w oparciu o tę listę kontrolną.
Pamiętaj jednak, że w ewentualnych sytuacjach spornych tylko
opinia eksperta ds. dostępności będzie uznana za wiążącą.
Listę kontrolną przygotowaliśmy jako pomoc dla podmiotów publicznych, które mają prawny obowiązek zapewnienia dostępności cyfrowej stron internetowych, wynikający ze wspomnianej ustawy. Możesz z niej jednak skorzystać także przy badaniu strony niebędącej własnością podmiotu publicznego.
Lista kontrolna jest zbiorem pytań, które pozwalają wykryć zdecydowaną większość problemów dostępnościowych na stronie internetowej. Przy każdym z pytań opisaliśmy co musisz zrobić, żeby udzielić na dane pytanie odpowiedzi.
Pytania z listy kontrolnej podzieliliśmy na 3 poziomy. Dostosowaliśmy je do wiedzy i umiejętności osoby wykonującej badanie:
1. poziom podstawowy – do jego wykonania wystarczy Ci podstawowa umiejętność korzystania ze stron internetowych,
2. poziom średni – do jego wykonania potrzebujesz wiedzy o tworzeniu stron internetowych i podstawowej umiejętności korzystania z programów do testowania dostępności, w tym czytników ekranu,
3. poziom zaawansowany – do jego wykonania potrzebujesz dogłębnej wiedzy technicznej, w tym znajomości języków skryptowych oraz umiejętności posługiwania się różnymi technologiami asystującymi.
Nie zawsze musisz odpowiadać na wszystkie pytania z listy kontrolnej. Przykładowo, do oceny, że strona nie jest zgodna z WCAG 2.1 i ustawą wystarczy, że znajdziesz błąd na poziomie podstawowym. Jednak dopiero odpowiedzenie na pytania z wszystkich poziomów pozwala w pełni ocenić dostępność cyfrową badanej strony internetowej.
Serwis internetowy może składać się z różnej liczby stron internetowych. Jeżeli serwis, których chcesz zbadać ma ok. 15-20 stron, możesz zbadać każdą z nich. Jeśli jednak jest ich więcej, czasem nawet kilka tysięcy, musisz mądrze wybrać, którymi z nich zajmiesz się w badaniu.
Podmioty publiczne muszą mieć w pełni dostępne cyfrowo całe serwisy internetowe. Część z ich treści i funkcji musi być jednak bezwzględnie dostępna (jej brak może wiązać się z karą finansową) – nawet jeśli reszta serwisu taka nie jest. Treści te i funkcje są precyzyjnie wskazane w ustawie i muszą zawsze znaleźć się w wyborze stron do zbadania w serwisie podmiotu publicznego. Są to:
· Biuletyn Informacji Publicznej podmiotu publicznego,
· dane teleadresowe,
· narzędzia służące do kontaktu z podmiotem publicznym (np. formularz kontaktowy),
· nawigacja,
· deklaracja dostępności,
· informacje dotyczące sytuacji kryzysowej,
· informacje związane z bezpieczeństwem publicznym,
· dokumenty urzędowe i wzory umów lub wzory innych dokumentów przeznaczonych do zaciągania zobowiązań cywilnoprawnych.
Wybierając konkretne strony do zbadania pamiętaj, żeby wśród nich znalazły się, o ile to możliwe:
· strona startowa,
· strona logowania,
· mapa strony,
· strona z informacjami kontaktowymi,
· strona zawierająca formularz kontaktowy, szczególnie taki, który ma zabezpieczenie typu CAPTCHA,
· strona pomocy,
· strona zawierająca informacje prawne,
· co najmniej jedna strona istotna dla każdego rodzaju usługi prezentowanej w serwisie ,
· co najmniej jeden dokument do pobrania - istotny, dla każdego rodzaju usługi prezentowanej w serwisie,
· strona z formularzem zaawansowanego wyszukiwania,
· strona z wynikami wyszukiwania,
· strona z deklaracją dostępności,
· strona o wyraźnie innym wyglądzie lub zawierająca innego rodzaju treści niż większość stron serwisu,
· co najmniej jeden materiał multimedialny, np. film, animację,
· losowo wybrane strony – ich liczba jest uzależniona od wielkości badanego serwisu i powinna ją oszacować osoba organizująca badanie.
Jeśli badasz serwis składający się z wielu, różnych stron, to w badaniu uwzględnij co najmniej 15 z nich.
Każdy element listy kontrolnej składa się z:
· pytania,
· instrukcji co zrobić, żeby odpowiedzieć na to pytanie,
· listy możliwych odpowiedzi - z dokładnym opisem kiedy, której z nich udzielić,
o negatywna – oznacza niezgodność z WCAG 2.1 i ustawą,
o pozytywna – oznacza zgodność z WCAG 2.1 i ustawą,
o nie dotyczy – oznacza brak elementu to oceny,
· kryteriów WCAG 2.1, z których wynika pytanie,
Na każdej z badanych stron musisz wykonać wszystkie opisane zadania i wybrać jedną z możliwych odpowiedzi.
Brak odpowiedzi negatywnych w całym badaniu oznacza, że badane strony są, w dużym stopniu pewności, zgodne z wymaganiami WCAG 2.1 i ustawy.
Zgodnie z ustawą część
elementów stron internetowych podmiotów publicznych nie musi być dostępna
cyfrowo. Są to:
· multimedia nadawane na żywo,
· multimedia opublikowane przed 23 września
2020r.,
· dokumenty tekstowe i tekstowo-graficzne,
prezentacje multimedialne i arkusze kalkulacyjne opublikowane przed 23 września
2018 r. - chyba że są niezbędne do realizowania bieżących zadań Twojej
instytucji czy korzystania z jej usług,
· mapy – ale musisz zapewnić alternatywny dostęp
do prezentowanych na nich danych,
· część dzieł sztuki, muzealiów, zbiorów archiwów
narodowych i bibliotecznych,
· materiały z intranetu i ekstranetu opublikowane
przed 23 wrześnie 2019 r. i od tego czasu nieaktualizowane,
· treści od innych podmiotów, które nie
zostały przez Twój podmiot lub dla niego wykonane lub nabyte, albo do których
modyfikacji Twój podmiot nie jest uprawniony,
· treści niewykorzystywanych do realizacji
bieżących zadań.
Jeśli trafisz na takie
elementy możesz udzielić przy nich odpowiedzi „nie dotyczy”.
Wyniki badania możesz zbierać w dowolny, wygodny dla Ciebie sposób. My proponujemy Ci dwie tabele, które znajdziesz na końcu listy kontrolnej:
1. tabelę podsumowującą badanie – odnosi się do wszystkich kryteriów wymienionych w ustawie o dostępności cyfrowej; łatwo zbierzesz w niej odpowiedzi w podziale na kryteria WCAG 2.1.
2. tabelę zasięgu i wagi błędów – do zbierania pojedynczych błędów, adresów stron, na których się znajdują i oceny ich skali oraz uciążliwości dla użytkowników z niepełnosprawnościami. Dane z tej tabeli szczególnie przydadzą się do planowania kolejności prac.
Czasem pytanie wiąże się z kilkoma, różnymi kryteriami WCAG 2.1. Nie oznacza to jednak, że przy każdej odpowiedzi negatywnej automatycznie łamane są wymagania wszystkich, wymienionych kryteriów WCAG 2.1. To, które z kryteriów jest złamane, powinno być ewentualnie wynikiem odrębnej analizy.
W badaniu częściowym odpowiesz jedynie na część pytań, np. tylko na te z poziomu podstawowego. Może Ci się ono przydać gdy nie masz wiedzy technicznej, a chcesz, bądź musisz, ocenić dostępność cyfrową strony internetowej.
Takie badanie nigdy nie da Ci odpowiedzi czy serwis jest dostępny, ale może dać Ci odpowiedź, że jest niedostępny (bo ma błędy np. na poziomie podstawowym).
Prowadząc badanie częściowe koniecznie udziel odpowiedzi na pytania oznaczone jako „pytanie kluczowe”. Negatywna odpowiedź, na którekolwiek z takich pytań, oznacza bariery uniemożliwiające korzystanie ze strony przez osoby z niepełnosprawnością, a nie tylko niedogodność czy utrudnienie.
Badanie i jego wyniki możesz wykorzystać w różnych sytuacjach:
· jako podstawę do przygotowania deklaracji dostępności,
· do corocznego badania dostępności cyfrowej strony, żeby zaktualizować deklarację dostępności,
· do sprawdzenia czy strona internetowa przekazana Ci przez jej wykonawcę jest zgodna z wytycznymi WCAG 2.1 i ustawą,
· do bieżącego badania wybranych nowych stron lub nowych funkcjonalności na stronie,
·
do planowania działań naprawczych związanych z
dostępnością cyfrową
i ustalania harmonogramu tych działań.
Do oceny dostępności cyfrowej na poziomie podstawowym wystarczy umiejętność korzystania ze stron internetowych. Nie musisz mieć ani wiedzy technicznej ani znać kodu HTML.
1. Wciśnij wielokrotnie przycisk TAB i przejdź w ten sposób po wszystkich aktywnych elementach strony,
2. Każdy element, na który wejdziesz w ten sposób powinien jakoś się wyróżnić (np. dodatkową ramką, zmianą koloru) - to wyróżnienie to tzw. fokus,
3. Sprawdź czy widzisz takie wyróżnienie na aktywnych elementach strony,
· Negatywna (oznacz jeśli fokus nie jest widoczny - elementy nie wyróżniają się po wybraniu klawiaturą),
· Pozytywna (oznacz jeśli fokus jest widoczny – elementy wyróżniają się wybraniu klawiaturą),
1. Użyj do nawigacji samej klawiatury i klawiszy:
· TAB (idź do przodu),
· Shift+TAB (idź do tyłu),
· Enter (wybierz),
· Esc (wyjdź/zamknij),
· Spacja (oznacz/rozwiń w np. pola rozwijane, listy rozwijane)
· strzałki „góra” i „dół” (przechodzenie po elementach listy rozwijanej),
2. Sprawdź, czy wszystkie działania, które można wykonać na danej stronie myszką, można wykonać też samą klawiaturą i wymienionymi przyciskami. Sprawdź w ten sposób wszystkie linki, przyciski, listy linków, listy rozwijalne, pola formularzy, odtwarzacze multimediów. Zwróć uwagę na funkcje dodatkowe np. chat, linki udostępnienia treści w mediach społecznościowych, mapy z klikalnymi obszarami itp.
· Negatywna (oznacz jeśli jakikolwiek aktywny element nie może być użyty przy nawigacji klawiaturą);
· Pozytywna (oznacz jeśli nie ma żadnych problemów przy nawigacji klawiaturą);
1. Sprawdź tylko jeśli na stronie jest odtwarzacz, którego nie można obsłużyć samą klawiaturą,
2. Sprawdź czy obok takiego niedostępnego odtwarzacza jest tekstowa alternatywa multimediów (np. pełna treść opisana w artykule lub w dokumencie do pobrania)
· Negatywna (oznacz jeśli obok niedostępnego odtwarzacza jest alternatywa tekstowa prezentowanych za jego pomocą multimediów),
· Pozytywna (oznacz jeśli obok niedostępnego odtwarzacza nie ma alternatywy tekstowej prezentowanych za jego pomocą multimediów),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma odtwarzaczy multimediów lub odtwarzaczy multimediów niedostępnych za pomocą klawiatury).
Nawigując samą klawiaturą, sprawdź czy żaden element/grupa elementów nie blokuje Twojej dalszej nawigacji.
1. Wykonaj badanie jak w poprzednim pytaniu.
2. Sprawdź czy możesz swobodnie przejść po wszystkich elementach strony, po czym wracasz do paska adresu przeglądarki.
· Negatywna (oznacz jeśli jest pułapka klawiaturowa).
· Pozytywna (oznacz jeśli nie ma żadnych pułapek klawiaturowych).
1. Sprawdź, czy w przypadku gdy po kliknięciu w któryś z elementów otwiera się nowe okno lub nowa zakładka przeglądarki,
2. Jeśli tak, to sprawdź czy bezpośrednio obok, wewnątrz, w wartości atrybutu „title” elementu albo w inny sposób dostępna jest informacja o otwarciu nowego okna/zakładki przeglądarki (np. „Link otwiera się w nowym oknie przeglądarki”),
· Negatywna (oznacz jeśli treści otwierają się w nowym oknie/zakładce przeglądarki, a nie ma o tym wcześniej informacji),
· Pozytywna (oznacz jeśli treści otwierają się w nowym oknie/zakładce przeglądarki i jest o tym wcześniejsza informacja),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma treści otwieranych w nowym oknie/zakładce przeglądarki).
Sprawdź, czy nie ma sytuacji, że przy nawigacji klawiaturą i bez wciśnięcia ENTER oraz przy nawigacji myszką i bez kliknięcia jej przycisku, wyświetla się nowe okno z treścią.
· Negatywna (oznacz jeśli są takie sytuacje),
· Pozytywna (oznacz jeśli nie ma takich sytuacji),
1. Sprawdź czy na badanych stronach jest link do mapy strony. Jeśli tak, sprawdź czy są w niej linki do wszystkich stron serwisu i czy linki te działają (prowadzą do odpowiednich stron),
2. Sprawdź czy na badanych stronach jest wyszukiwarka lub link do formularza wyszukiwarka. Jeśli tak, wpisz przykładowe słowo i sprawdź czy wyszukiwarka działa.
· Negatywna (oznacz jeśli na stronach nie ma ani wyszukiwarki ani mapy strony),
· Pozytywna (oznacz jeśli na stronach jest działająca wyszukiwarka i/lub aktualna mapa strony),
· Nie dotyczy (oznacz jeśli cały badany serwis składa się tylko z jednej strony).
Sprawdź, czy na wszystkich badanych stronach, menu wygląda i działa tak samo.
· Negatywna (oznacz jeśli na stronach są różnice w wyglądzie i/lub działaniu menu),
· Pozytywna (oznacz jeśli na stronach nie ma różnic w wyglądzie i działaniu menu),
· Nie dotyczy (oznacz jeśli cały badany serwis składa się tylko z jednej strony i nie ma w nim menu).
1. Przejdź po badanych stronach za pomocą samej klawiatury,
2. Sprawdź, czy fokus klawiatury porusza się w logicznej kolejności, spójnej z układem wizualnym treści (najczęściej od góry do dołu, od lewej do prawej).
· Negatywna (oznacz jeśli fokus porusza się nielogicznie),
· Pozytywna (oznacz jeśli fokus porusza się logicznie),
1. Sprawdź czy jakiś element strony nie błyska na czerwono. Jeśli tak, policz, ile jest takich błysków w ciągu sekundy.
2. Zobacz, czy jest na stronie obszar, który podlega gwałtownym zmianom jasności. Jeśli tak, oceń, czy zajmuje on więcej niż 25% obszaru strony.
· Negatywna (oznacz jeśli jest 3 i więcej czerwonych błysków na sekundę lub jeśli obszar zmiany jasności jest większy niż 25% obszaru strony),
· Pozytywna (oznacz jeśli nie ma takich elementów lub są ale nie spełniają warunków z odpowiedzi negatywnej),
1. Powiększ widok badanej strony do 200% - np. trzymając wciśnięty klawisz CTRL wciśnij kilkukrotnie przycisk „+”. W pasku przeglądarki będzie widoczna informacja o ile procent widok jest powiększony. Uwaga: nie chodzi tu o powiększenie samych czcionek, ale całego widoku strony.
2. Sprawdź czy cała zawartość strony jest widoczna, bez konieczności przewijania treści w poziomie.
3. Sprawdź czy żadne treści nie zachodzą na siebie lub czy nie zniknęły.
· Negatywna (oznacz jeśli po powiększeniu do 200% konieczne jest przewijanie w poziomie lub jakieś treści zniknęły lub zachodzą na siebie),
· Pozytywna (oznacz jeśli po powiększeniu do 200% wszystkie treści są widoczne i poprawnie działają),
1. Na smartfonie lub tablecie wyświetl badane strony,
2. Sprawdź, czy zawartość strony jest ta sama bez względu czy trzymasz ekran w poziomie czy w pionie,
· Negatywna (oznacz jeśli obrócenie ekranu powoduje problemy),
· Pozytywna (oznacz jeśli odwrócenie ekranu nie powoduje problemów),
1. Sprawdź czy na stronie jest informacja przekazywana kolorem np. kolorowy wykres, podświetlanie na czerwono ramek w formularzu, który jest błędnie wypełniony,
2. Sprawdź czy obok takiej informacji jest także informacja tekstowa, która umożliwi jej zrozumienie np. osobom z zaburzeniami widzenia barw,
· Negatywna (oznacz jeśli jest informacja przekazywana wyłącznie kolorem),
· Pozytywna (oznacz jeśli nie ma informacji przekazywanej wyłącznie kolorem),
1. Sprawdź, czy na stronie jest instrukcja odnosząca się do kolorów np. „Kliknij w niebieski przycisk”, „Pole oznaczone na czerwono zawiera błędne informacje” itp.
· Negatywna (oznacz jeśli jest instrukcja odnosząca się do koloru elementu),
· Pozytywna (oznacz jeśli nie ma instrukcji odnoszącej się do koloru elementu),
Sprawdź czy jakikolwiek element na badanych podstronach przekazuje informację za pomocą swojej pozycji bądź formy. Jeśli tak jest, to sprawdź, czy informacja przekazywana za pomocą formy bądź pozycji jest dostępna inną drogą niż jedynie poprzez formę i pozycję.
1. Sprawdź, czy na stronie jest informacja odnosząca się do pozycji lub formy elementu np. „Kliknij przycisk w prawym górnym rogu żeby zamknąć okno”, „Wybierz trójkąt żeby przejść dalej” itp.
· Negatywna (oznacz jeśli jest informacja przekazywana jedynie przez pozycję lub formę),
· Pozytywna (oznacz jeśli nie ma informacji przekazywanej jedynie przez pozycję lub formę),
1. Sprawdź, czy na stronie uruchamia się automatycznie dźwięk, który trwa dłużej niż 3 sekundy.
2. Sprawdź czy jest możliwość zatrzymania tego dźwięku (np. przycisk wyłącz).
· Negatywna (oznacz jeśli jest dźwięk trwający dłużej niż 3 sekundy, którego nie można zatrzymać),
· Pozytywna (oznacz jeśli nie ma takiego dźwięku lub jest możliwość jego zatrzymania ( także nawigując samą klawiaturą)),
1. Sprawdź czy na stronie są elementy migające lub poruszające się, których miganie lub ruch nie są niezbędne dla zrozumienia informacji,
2. Sprawdź czy ich miganie lub ruch da się zatrzymać i ponownie uruchomić lub czy mignięcia są rzadziej niż raz na 5 sekund lub czy takie element można ukryć i ponownie wyświetlić,
· Negatywna (oznacz jeśli są takie elementy),
· Pozytywna (oznacz jeśli nie ma takich elementów),
1. Tytuł strony pojawia się na zakładce w przeglądarce. Zazwyczaj pokazuje się w całości w formie „dymka” gdy najedziesz na daną zakładkę przeglądarki kursorem myszki,
2. Sprawdź czy każda strona posiada unikalny tytuł, który opisuje jej zawartość (identyczny tytuł wszystkich lub wielu stron w jednym serwisie to błąd),
3. Sprawdź czy informacje w tytule mają układ „od szczegółu do ogółu” – od informacji o zawartości szczegółowej danej strony do nazwy serwisu/właściciela serwisu (np. „Kontakt – Urząd Miasta w Wiliczu” lub „Kontakt – um.wilicz.pl”)
· Negatywna (oznacz jeśli nie ma unikalnych tytułów stron informujących o ich zawartości lub tytuły te mają złą strukturę),
· Pozytywna (oznacz jeśli każda strona ma unikalny, właściwie przygotowany, tytuł informujący o jej zawartości),
1. Sprawdź, czy na stronie są złożone elementy graficzne (np. skomplikowane infografiki, wykresy, mapy itp.),
2. Sprawdź czy takie elementy mają dodatkowy opis, który umożliwi dokładne zrozumienie ich zawartości np. przez osoby niewidome. Opis ten może być umieszczony obok elementu graficznego lub w formie linku prowadzącego do miejsca, gdzie można go przeczytać.
· Negatywna (oznacz jeśli złożony element graficzny nie ma poszerzonego opisu),
· Pozytywna (oznacz jeśli każdy złożony element graficzny ma poszerzony opis),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma elementów wymagających poszerzonych opisów).
1. Sprawdź czy na stronie są formularze.
2. Sprawdź, czy etykiety przypisane do pól formularzy są zrozumiałe i czy są tuż obok pól, których dotyczą.
· Negatywna (oznacz jeśli jest etykiety nie są zrozumiałe i/lub nie są wizualnie powiązane z polami, których dotyczą),
· Pozytywna (oznacz jeśli jest etykiety są zrozumiałe i są wizualnie powiązane z polami, których dotyczą),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularza).
1. Sprawdź czy na stronie są formularze.
2. Sprawdź czy przy próbie wysłania (przejścia dalej) formularza bez żadnych danych pojawia się informacja o błędzie,
3. Sprawdź, czy po wpisania niepoprawnych danych do formularza, pojawia się informacja o błędzie,
4. Sprawdź czy informacja o błędzie jest tekstowa, zrozumiała i podaje przyczynę błędu,
· Negatywna (oznacz jeśli nie ma informacji o błędzie lub jest ona tylko wizualna lub mało zrozumiała),
· Pozytywna (oznacz jeśli informacja o błędzie jest tekstowa, precyzyjna i zrozumiała),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularza).
1. Sprawdź czy na stronie są formularze.
2. Sprawdź czy w komunikatach o błędach są jednoznaczne rady, jak poprawnie wpisywać dane do pól formularza. Zwróć uwagę, czy przy polach, które trzeba wypełnić w określonym formacie jest o tym informacja (np. „datę wpisz w formacie dd-mm-rrrr. dd oznaczają dzień, mm oznaczają miesiąc (jednocyfrowy numer miesiąca poprzedź zerem, rok (rrrr) zapisz w formie czterocyfrowej, np. 2019”, „numer PESEL powinien zawierać 11 cyfr, a wpisanych zostało tylko 10”).
· Negatywna (oznacz jeśli w komunikacje błędu nie ma sugestii jak go poprawić),
· Pozytywna (oznacz jeśli w komunikacje błędu jest sugestia jak go poprawić),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularza).
1. Sprawdź czy na stronie jest taki formularz (np. związany z zakupem, składaniem oświadczenia)
2. Jeśli tak, sprawdź czy możesz:
· sprawdź i poprawić lub usunąć dane przed ich ostatecznym wysłaniem;
· odpowiedzieć na ewentualne „Żądanie potwierdzenia wysłania formularza”;
· odzyskać dane po ich usunięciu (chyba, że ich ostateczne usunięcie było jednoznacznie potwierdzone).
· Negatywna (oznacz jeśli w tego typu formularzu nie ma możliwości sprawdzenia, poprawienie i usunięcia danych przed ostatecznym wysłaniem),
· Pozytywna (oznacz jeśli w tego typu formularzu jest możliwość sprawdzenia, poprawienie i usunięcia danych przed ostatecznym wysłaniem ),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tego typu formularza).
Test ten wykonaj tylko jeśli badane elementy nie są udostępnione w bardziej zaawansowany sposób dla osób niepełnosprawnych (audiodeskrypcji dla filmów i animacji, napisów dla niesłyszących do filmów i animacji z dźwiękiem).
1. Sprawdź, czy na stronie są elementy filmowe, animowane lub dźwiękowe, które przekazują informacje,
2. Jeśli tak, sprawdź czy każdy taki element ma tytuł opisujący zawartość (Kryterium 1.1.1) oraz transkrypcję czyli tekstowy opis całej treści tego elementu (kryterium 1.2.3),
3. Sprawdź, czy transkrypcja dokładnie opisują zawartość filmów i animacji dla osób niewidomych (nie tylko wypowiadane słowa, ale też opis widocznych obrazów).
4. Sprawdź, czy transkrypcja zawiera dokładnie całą treść (co do słowa) prezentowano w formie dźwięku,
· Negatywna (oznacz jeśli brakuje opisów tekstowych zawartości elementów filmowych, animowanych i dźwiękowych),
· Pozytywna (oznacz jeśli każdy element filmowy, animowany i dźwiękowy, które przekazuje informacje ma opis tekstowy swojej zawartości),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tego typu materiałów).
1. Sprawdź czy na stronie jest film lub animacja ze ścieżką dźwiękową,
2. Sprawdź czy te materiały nie powtarzają wyłącznie treści prezentowanych w tekście obok,
3. Jeśli nie, sprawdź czy do każdego takiego filmu lub animacji dodane są napisy dla osób niesłyszących. Takie napisy oprócz treści wypowiadanych przez lektora i/lub bohaterów muszą mieć również informacje o innych dźwiękach ważnych dla zrozumienia treści.
· Negatywna (oznacz jeśli brakuje napisów dla osób niesłyszących w tego typu materiałach),
· Pozytywna (oznacz jeśli są napisy dla osób niesłyszących we wszystkich tego typu materiałach),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tego typu materiałów).
1. Sprawdź, czy na stronie są filmy, animacje czy inne multimedia, które przekazują ważne informacje obrazem (np. w filmach promocyjnych czy będących relacjami z jakiś wydarzeń obraz jest często ważniejszy niż ścieżka lektora),
2. Sprawdź, czy w tekście obok takiego elementu, nie ma dokładnego opisu ważnych informacji przekazywanych obrazem,
3. Jeśli nie ma takiego opisu tekstowego, sprawdź czy do elementu jest dodana audiodeskrypcja (dodatkowa ścieżka dźwiękowa z lektorem, który opowiada poszczególne sceny). Sprawdź czy dokładanie opisuje ona poszczególne sceny/widoki.
· Negatywna (oznacz jeśli w tego typu elementach brakuje audiodeskrypcji),
· Pozytywna (oznacz jeśli w tego typu elementach jest audiodeskrypcja),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma elementów wymagających audiodeskrypcji).
1.
Sprawdź, czy link do dokumentu do pobrania ma w swojej
treści informację o formacie i rozmiarze dokumentu, a także, jeśli to konieczne,
o jego języku. Przykładowy wygląd linku prowadzącego do dokumentu do pobrania: Nazwa dokumentu (100 KB, PDF)
2. Jeśli nie, sprawdź czy takie informacje nie są podane w innym sposób, bezpośrednio obok tego linku.
· Negatywna (oznacz jeśli przy linku brakuje dodatkowych informacji informacje o formacie, wielkości lub ewentualnie języku),
· Pozytywna (oznacz jeśli w treści linku lub bezpośrednio obok niego są informacje o formacie, wielkości i ewentualnie języku),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma linków do dokumentów do pobrania).
Do oceny dostępności cyfrowej na poziomie średnim potrzebna jest wiedza o budowie stron internetowych (HTML, CSS), umiejętność obsługi prostych dodatkowych programów, w tym automatycznych walidatorów dostępności oraz umiejętność podstawowej obsługi czytnika ekranu.
1. Sprawdź, czy na stronie jest poprawnie umieszczony nagłówek <h1>, który opisuje/tytułuje zawartość danej strony,
2. Sprawdź czy na stronie nie ma więcej nagłówków <h1> - jest to dopuszczalne tylko gdy na jednej stronie są całkowicie odrębne, niepowiązane ze sobą hierarchicznie i logiczne bloki treści.
· Negatywna (oznacz jeśli na stronie brakuje nagłówka h1),
· Pozytywna (oznacz jeśli na stronie jest prawidłowy nagłówek),
1. Nagłówki mają logicznie oddawać strukturę dokumentu. Muszą być ułożone w kolejności od najwyższego (h1) do najniższego, bez żadnych „dziur” w układzie logicznym (po nagłówku <h1> musi być <h2>, a nie <h4>)
2. Sprawdź, czy na stronie nie ma treści, które tylko wizualnie są nagłówkami, a w kodzie nie mają znacznika <h…> na odpowiednim poziomie,
3. Sprawdź, czy na stronie są elementy oznaczone niepotrzebnie w kodzie jako nagłówki,
4. Sprawdź czy zachowana jest logiczna kolejność i ciągłość struktury nagłówkowej na stronie.
· Negatywna (oznacz jeśli na stronie są nagłówki wyłącznie wizualne lub są problemy z logiczną strukturą nagłówków),
· Pozytywna (oznacz jeśli na stronie wszystkie nagłówki są oznaczone w kodzie odpowiednimi znacznikami i tworzą logiczną strukturę),
Sprawdź, czy wszystkie bloki tekstu wyglądające jak listy elementów zdefiniowane są jako takie w kodzie HTML.
· Negatywna (oznacz jeśli na stronie są listy tylko wizualne, bez oznaczenia ich odpowiednio w kodzie HTML),
· Pozytywna (oznacz jeśli listy elementów mają odpowiednie oznaczenie w kodzie HTML),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma list elementów).
Sprawdź, czy w każdej tabeli prezentującej dane:
· wszystkie nagłówki (kolumn lub linii) zdefiniowane są w znacznikach <th> i mają niepowtarzalne <id>,
· odpowiadające nagłówkom komórki tabel są połączone z nimi za pomocą atrybutu <headers> lub <scope>.
· Negatywna (oznacz jeśli w tabelach brakuje nagłówków tabel lub ich połączenia ze zbiorami komórek),
· Pozytywna (oznacz jeśli w tabelach są nagłówki tabel połączone z odpowiednimi zbiorami komórek),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tabel z danymi).
1. Sprawdź, czy tabela prezentująca dane ma poprawny tytuł - <caption>,
2. Sprawdź czy złożona tabela ma oprócz tego opis - <summary>.
· Negatywna (oznacz, jeśli w tabeli brakuje <caption> i/lub złożona tabela nie ma <summary>),
· Pozytywna (oznacz jeśli każda tabela ma <caption>, a wymagające tego, także <summary>),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tabeli prezentującej dane)
Sprawdź, czy żadna tabela prezentujące dane nie jest stworzone „ręcznie” (np. liniami, czy znakami w edytorze tekstu) a nie za pomocą znaczników tabeli.
· Negatywna (oznacz jeśli jest tego typu tabela),
· Pozytywna (oznacz jeśli nie ma tego typu tabeli),
Sprawdź, czy tabela będąca szkieletem strony (tzw. tabela layoutowa) ma zdefiniowaną rolę - role=”presentation”.
· Negatywna (oznacz jeśli tabele będące szkieletem nie mają dodane role=”presentation”),
· Pozytywna (oznacz jeśli tabele będące szkieletem mają dodane role=”presentation”),
· Nie dotyczy (oznacz jeśli nie ma tego typu tabeli)
Sprawdź, czy w tabeli będącej szkieletem strony są elementy:
· <th>,
· <caption>,
· <thead>,
· <tfoot>
· <colgroup>
· <scope>
· <headers>
· <axis>
· <summary>
· Negatywna (oznacz jeśli w tabeli szkieletowej jest którykolwiek z wymienionych elementów),
· Pozytywna (oznacz jeśli w tabeli szkieletowej nie ma żadnego z wymienionych elementów),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tego typu tabeli)
1. Sprawdź, czy w kodzie strony są stosowane listy definicji <dl>,
2. Sprawdź czy wszystkich listach definicji element <dd> jest poprzedzony elementem <dt>.
· Negatywna (oznacz jeśli struktura kodu list definicji jest nieprawidłowa),
· Pozytywna (oznacz jeśli struktura kodu list definicji jest prawidłowa),
· Nie dotyczy (oznacz jeśli w kodzie badanych stronach nie ma list definicji)
1. Sprawdź, czy w arkuszu stylów, we właściwości „content” są przekazywane znaczące infromacje,
2. Jeśli tak, sprawdź czy te informacje są dostępne również w inny sposób,
· Negatywna (oznacz jeśli znaczące informacje generowane przez arkusze stylów nie mają alternatywy),
· Pozytywna (oznacz jeśli znaczące informacje generowane przez arkusze stylów mają dostępną alternatywę),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma znaczących informacji generowanych przez arkusze stylów).
1. Sprawdź, czy na stronie jest element, który po kliknięciu myszką lub przejęciu fokusu powoduje uruchomienie akcji (np. wyświetlenie informacji, zatwierdzenie formularza, przejście do innej strony, otwarcie nowego okna, generowanie treści itp.),
2. Jeśli tak, sprawdź czy jest to jeden z elementów z listy:
· a,
· area,
· button lub input type button,
· submit,
· reset,
· file,
· image,
· password,
· radio,
· checkbox,
· select
3. Jeśli nie, sprawdź czy jest inna możliwość uruchomienia akcji za pomocą jednego z elementów z listy.
· Negatywna (oznacz jeśli akcja wywoływana jest przez element spoza listy i nie ma alternatywne do niej dostępu poprzez element z listy),
· Pozytywna (oznacz jeśli na badanych stronach wszystkie akcje są wywoływane przez element z listy lub jest alternatywny sposób ich uruchomienia przez element z listy),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma elementów wywołujących akcje).
1. Sprawdź, czy na stronie są cytaty,
2. Jeśli tak sprawdź czy w kodzie HTML cytat jest zawsze w znaczniku <q> lub <blockquote>
· Negatywna (oznacz jeśli na badanych stronach cytaty nie są określone w kodzie lub są określone błędnie),
· Pozytywna (oznacz jeśli na badanych stronach są poprawnie określone w kodzie),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma cytatów)
1. Sprawdź, czy w kodzie strony są znaczniki frame lub iframe,
2. Jeśli tak, sprawdź czy każdy z nich ma poprawnie sformułowany atrybut „title” opisujący zawartość prezentowaną w ramce.
· Negatywna (oznacz jeśli na badanych stronach ramki nie mają tytułów lub mają nieprawidłowe tytuły),
· Pozytywna (oznacz jeśli na badanych stronach ramki mają prawidłowe tytuły),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma ramek)
1. Do badania użyj czytnika ekranu np. NVDA lub samodzielnie przeanalizuj kod HTML badanej strony,
2. Sprawdź czy na badanej stronie nie ma sytuacji gdzie ta sama treść/ wartość danego elementu jest podana (odczytywana przez czytnik) dwa lub więcej razy. Najczęściej wynika to:
a. powtórzenia tej samej treści opisu alternatywnego i atrybutu <title> w linku graficznych,
b. powtórzenie treści linku tekstowego w atrybucie <title> tego linku,
c. powtórzenia etykiety pola/przycisku formularza w etykiecie i np. za pomocą dodatkowej etykiety ARIA,
d. powtórzenia treści z toolbaru/infobaru w dodatkowej ukrytej treści połączonej z tym toolbarem/infobarem przez ARIA,
· Negatywna (oznacz jeśli na badanych stronach jest efekt jąkania),
· Pozytywna (oznacz jeśli na badanych stronach nie ma efektu jąkania),
1. Sprawdź, linki poszczególnych menu (głównego, do mediów społecznościowych itp.) są zgrupowane w kodzie w listach oznaczonych unikalnym id.
2. Sprawdź czy takie listy elementów nie mieszają się ze sobą i nie zawierają zbędnych elementów.
· Negatywna (oznacz jeśli elementy menu nie są zgrupowane w kodzie w listę),
· Pozytywna (oznacz jeśli elementy każdego menu są zgrupowane w kodzie w listę),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma menu).
Sprawdź, czy na badanych stronach są linki, które nie mają żadnej zawartości pomiędzy znacznikami <a> i </a>.
· Negatywna (oznacz jeśli są takie linki),
· Pozytywna (oznacz jeśli nie ma takich linków),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma linków).
1. Sprawdź, czy na wszystkich badanych stronach są linki o takiej samej treści,
2. Jeśli tak, sprawdź czy zawsze mają tę samą funkcję lub prowadzą do tego samego celu.
· Negatywna (oznacz jeśli linki i tej samej treści mają różne funkcje lub prowadzą do różnych celów),
· Pozytywna (oznacz jeśli funkcja linków o tej samej treści jest spójna na wszystkich badanych stronach),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma linków).
1. Sprawdź, czy treści linków na stronie są łatwe do zrozumienia samodzielnie lub ze wsparciem treści z atrybutu <title> lub innej treści otaczającej link,
2. Zwróć uwagę na linki typu „czytaj więcej”, „pobierz” itp. Linki te są trudne do użycia przez osoby niewidome bo ich treść nie wskazuje precyzyjnie do czego prowadzą – sprawdź, czy te linki są uzupełnione o treść dojaśniającą (może być ukryta wizualnie, ale musi być dostępna dla czytników ekranu).
· Negatywna (oznacz jeśli cel i działanie linku nie jest zrozumiałe, nawet z tekstem uzupełniającym lub otaczającym),
· Pozytywna (oznacz jeśli cel i działanie linku jest zrozumiałe bezpośrednio z treści lub z tekstu uzupełniającego/otaczającego),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma linków).
1. Sprawdź, czy na stronie jest element graficzny <img>, który obrazem przekazuje informacje (a nie jest wyłącznie dekoracyjny),
2. Sprawdź, czy każdy taki element ma atrybut <alt> z odpowiednią treścią opisującą jego wygląd lub funkcję (w przypadku linków graficznych) .
3. Sprawdź, czy na stronie jest tekst w formie grafiki <img>. Jeśli tak, sprawdź czy jego opis alternatywny ma dokładanie tą samą treść co ten graficzny tekst.
· Negatywna (oznacz jeśli którykolwiek z informacyjnych elementów graficznych <img> nie ma atrybutu <alt> lub jego treść jest niewłaściwa),
· Pozytywna (oznacz jeśli na badanych stronach nie ma żadnych problemów związanych z atrybutami alt elementów graficznych <img>),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma elementów graficznych <img>).
Sprawdź, czy każdy wyłącznie dekoracyjny element graficzny <img> ma pusty atrybut <alt> (alt=””).
· Negatywna (oznacz jeśli opisy alternatywne dekoracyjnych elementów graficznych mają treść),
· Pozytywna (oznacz jeśli dekoracyjne elementy graficzne <img> mają pusty atrybut <alt>),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma dekoracyjnych elementów graficznych <img>).
1. Sprawdź, czy na stronie są powtarzające się elementy graficzne, które pełnią taką samą lub analogiczną funkcję,
2. Jeśli tak, sprawdź czy każdy z tych elementów ma taki sam jego opis alternatywny, etykietę lub atrybut <title>,
· Negatywna (oznacz jeśli opisy alternatywne, etykiety lub <title> tych elementów są różne),
· Pozytywna (oznacz jeśli opisy alternatywne, etykiety lub <title> tych elementów są takie same),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma powtarzających się elementów graficznych).
1. Sprawdź, czy na badanych stronach jest zabezpieczenie CAPTCHA,
2. Jeśli tak, sprawdź czy:
a. ma formę tekstową (np. proste zadanie matematyczne),
b. oprócz zadania w formie graficznej ma alternatywę np. tekstową lub dźwiękową, która możliwi obsłużenie go samodzielnie przez każdego użytkownika.
· Negatywna (oznacz jeśli CAPTCHA nie jest tekstowa lub nie ma alternatywy tekstowej lub dźwiękowej),
· Pozytywna (oznacz jeśli CAPTCHA jest tekstowa lub ma alternatywę tekstową lub dźwiękową),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma zabezpieczenia CAPTCHA).
1. Sprawdź, czy każde pole formularza ma unikalne na stronie <id>,
2. Sprawdź czy każde pole formularza ma opis swojego przeznaczenia w atrybucie <title> lub etykiecie <label>,
3. Sprawdź czy atrybut <title> lub etykieta <label> dla odpowiednio połączone z polem w kodzie HTML,
· Negatywna (oznacz jeśli pole formularza nie ma unikalnego <id> lub nie ma opisu (w odpowiednio połączonym z nim <title> lub <label>),
· Pozytywna (oznacz jeśli pole formularza ma unikalny <id> i ma opis przeznaczenia (w odpowiednio połączonym z nim <title> lub <label>),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularzy).
1. Sprawdź, czy na stronie są pola formularzy, które są obowiązkowe lub, w które trzeba wpisać dane w jeden określony sposób (np. data w formacie rrrr-mm-dd),
2. Jeśli tak, sprawdź czy informacje o tym są podane na początku formularza, w etykiecie pola lub w innym sposób, ale powiązany bezpośrednio z polem, do którego się odnoszą.
· Negatywna (oznacz jeśli obowiązkowe pole formularza lub pole wymagające konkretnego formatu danych nie ma dostępnej informacji o tym warunkach),
· Pozytywna (oznacz jeśli obowiązkowe pole formularza lub pole wymagające konkretnego formatu danych ma dostępną informację o tym warunkach),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularzy lub pól obowiązkowych i wymagających konkretnego formatu danych).
1. Sprawdź, czy w formularzy są pola o podobnej funkcji lub niosące informacje o podobnym charakterze (np. odpowiedzi w polach typu radio),
2. Jeśli tak, sprawdź czy są zgrupowane w znaczniku <fieldset> lub <optgroup> (w przypadku elementów <option>).
· Negatywna (oznacz jeśli brakuje znacznika grupującego pola o podobnej funkcji lub niosące informacje o podobnym charakterze),
· Pozytywna (oznacz jeśli jest znacznik grupujący pola o podobnej funkcji lub niosące informacje o podobnym charakterze),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularzy lub pól o podobnej funkcji/ niosących informacje o podobnym charakterze).
1. Sprawdź, czy na stronie są pola zgrupowane przez znacznik <fieldset>
2. Jeśli tak, sprawdź czy do każdej takiej grupy dodany jest także znacznik <legend> wyjaśniający jej zawartość,
· Negatywna (oznacz jeśli pola zgrupowane poprzez <fieldset> nie mają opisu grupy w znaczniku <legend>),
· Pozytywna (oznacz jeśli pola zgrupowane poprzez <fieldset> mają opis grupy w znaczniku <legend>),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularzy lub pól zgrupowanych za pomocą <fieldset>).
1. Sprawdź, czy na stronie są pola zgrupowane przez znacznik <optgroup>
2. Jeśli tak, sprawdź czy do każdej takiej grupy dodany jest także znacznik <label> wyjaśniający jej zawartość,
· Negatywna (oznacz jeśli pola zgrupowane poprzez <optgroup> nie mają opisu grupy w znaczniku <label>),
· Pozytywna (oznacz jeśli pola zgrupowane poprzez <optgroup> mają opis grupy w znaczniku <label>),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularzy lub pól zgrupowanych za pomocą <optgroup>).
1. Sprawdź, czy, tam gdzie to możliwe, pola formularza mają dodaną funkcję autouzupełniania,
2. Jeśli tak, sprawdź czy funkcja ta działa prawidłowo,
· Negatywna (oznacz jeśli funkcja autouzupełniania działa niepoprawnie)
· Pozytywna (oznacz jeśli funkcja autouzupełniania działa poprawnie),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma formularzy lub pól z funkcją autouzupełniania)
Sprawdź, czy
· powiększenie odstępów między liniami (line-height) do 1,5 wielkości czcionki,
· powiększenie odstępów między paragrafami do dwukrotności wielkości czcionki,
· powiększenie odstępów między literami (letter-spacing) do 0,12 wielkości czcionki.
· powiększenie odstępów między słowami (word-spacing) do 0,16 wielkości czcionki
nie pogarsza czytelności tekstu.
· Negatywna (oznacz jeśli te zmiany wpływają negatywnie na czytelność tekstu)
· Pozytywna (oznacz jeśli te zmiany nie wpływają negatywnie na czytelność tekstu),
Sprawdź, czy w żadnym miejscu litery w słowie nie jest rozstrzelone za pomocą spacji.
· Negatywna (oznacz jeśli są słowa z literami rozstrzelonymi spacjami)
· Pozytywna (oznacz jeśli nie ma słów rozstrzelonych spacjami),
1. Sprawdź, czy na stronie są symbole ASCII-Art,
2. Jeśli tak, sprawdź czy mają prawidłową alternatywę tekstową,
· Negatywna (oznacz jeśli brakuje alternatywy tekstowej dla tych symboli)
· Pozytywna (oznacz jeśli jest alternatywa tekstowa dla tych symboli),
· Nie dotyczy (oznacz, jeśli nie ma takich symboli na badanych stronach)
1. Sprawdź, czy na stronie są treści w innym języku niż główny język treści,
2. Jeśli tak, sprawdź czy mają one oddzielną, poprawną deklarację języka.
· Negatywna (oznacz jeśli brakuje oddzielnej deklaracji języka dla treści obcojęzycznych ),
· Pozytywna (oznacz jeśli treści obcojęzyczne mają swoją oddzielną i poprawną deklarację języka),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma treści w innym języku niż wskazuje główna deklaracja)
Sprawdź czy rozmiary czcionek w formularzach (input, textarea, select, buton) są definiowane w CSS za pomocą jednostek względnych:
· pt (punkt)
· pc (pica)
· px (pixel)
· cm (centymetr)
· mm (millimetr)
· in (cal)
· Negatywna (oznacz jeśli wielkość czcionek w formularzach jest definiowana za pomocą jednostek względnych),
· Pozytywna (oznacz jeśli wielkość czcionek w formularzach jest definiowana za pomocą jednostek bezwzględnych (em i ex)),
· Nie dotyczy (oznacz jeśli wielkość czcionek w formularzach nie jest definiowana w stylach CSS)
1. Sprawdź czy gdy w CSS zdefiniowany jest koloru elementu to zdefiniowany jest również kolor tła dla tego elementu (i odwrotnie).
· Negatywna (oznacz jeśli kolory elementu i tła nie są wspólnie zdefiniowane w arkuszu stylów),
· Pozytywna (oznacz jeśli kolory elementu i tła są wspólnie zdefiniowane w arkuszu stylów),
· Nie dotyczy (oznacz jeśli kolory nie są definiowane w arkuszy stylów)
1. Wyświetl stronę (na urządzeniu mobilnym lub w symulatorze takiego widoku na komputerze) w trybie pionowym o szerokości 320 pikseli,
2. Sprawdź, czy w tym układzie żadna treść ani funkcja na stronie nie znika i czy nie musisz używać do przewijania treści suwaka poziomego,
3. Wyświetl stronę (na urządzeniu mobilnym lub w symulatorze takiego widoku na komputerze) w trybie poziomym o wysokości 256 pikseli,
4. Sprawdź, czy w tym układzie żadna treść ani funkcja na stronie nie znika i czy nie musisz używać do przewijania treści suwaka poziomego,
· Negatywna (oznacz jeśli w którymkolwiek z wymienionych widoków jakieś treści lub funkcje znikają bądź wymagają użycia suwaka poziomego)
· Pozytywna (oznacz jeśli w wymienionych widokach żadne treści i funkcje nie znikają i nie wymagają użycia suwaka poziomego),
· Nie dotyczy (oznacz jeśli problem dotyczy elementów z natury wymagających dużego obszaru prezentacji i przewijania np.: tabel danych, złożonych obrazów (map, wykresów).
Sprawdź czy w kodzie HTML badanych stron nie ma znaczników <blink>, <bgsound> lub <marqee>.
· Negatywna (oznacz jeśli są te znaczniki)
· Pozytywna (oznacz jeśli nie ma tych znaczników),
1. Wyłącz style CSS na stronie,
2. Sprawdź, czy wszystkie informacje są nadal dostępne, czytelne i mają logiczną kolejność.
· Negatywna (oznacz jeśli po wyłączeniu stylów jest problem z treścią strony )
· Pozytywna (oznacz jeśli po wyłączeniu stylów treść jest nadal dostępna, czytelna i w logicznej kolejności),
Sprawdź czy selektor CSS outline nie ma wartości „0” wyłączającej widoczność fokusu klawiatury.
· Negatywna (oznacz jeśli outline wyłącza widoczność fokusu),
· Pozytywna (oznacz jeśli outline nie wyłącza widoczności fokusu),
1. Do badania użyj dowolnego analizatora kontrastu (np. w dodatku WAVE, Color Contrast Analyser),
2. Sprawdź czy kontrast tekstu do tła wynosi co najmniej 4,5:1 lub w przypadku tekstu większego niż 150% wielkości podstawowej tekstu na stronie, kontrast wynosi co najmniej 3:1.
· Negatywna (oznacz jeśli na badanych stronach są teksty, które nie spełniają minimalnych wymagań kontrastu do tła),
· Pozytywna (oznacz jeśli na badanych stronach nie ma tekstu, który nie spełnia minimalnych wymagań kontrastu do tła ),
1. Do badania użyj dowolnego analizatora kontrastu (np. w dodatku WAVE, Color Contrast Analyser),
2. Sprawdź czy kontrast elementów interfejsu (np. ramek pól formularza) i grafik pozwalających zrozumieć treści lub niosących ważne informacje (np. symbol wskazujący pole obowiązkowe formularza, ikoniczne przyciski w widoku mobilnym) do tła wynosi co najmniej 3:1
· Negatywna (oznacz jeśli na badanych stronach są niosące ważne informacje elementy interfejsu/graficzne, które nie spełniają minimalnych wymagań kontrastu do tła),
· Pozytywna (oznacz jeśli na badanych stronach elementy interfejsu i graficzne niosące ważne informacje spełniają minimalne wymagania kontrastu do tła),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma niosących ważne informacje elementów interfejsu i graficznych,)
1. Sprawdź, czy na stronie zmieniony jest domyślnych wygląd linków tekstowych (ciemnoniebieskie, podkreślone),
2. Jeśli tak to sprawdź:
a. czy linki wyróżnione są zarówno kolorem jak i formatowanie (np. podkreślenie), lub
b. czy linki wyróżnione tylko kolorem odróżniają się wystarczająco od otaczającego je tekstu (kontrast minimalny 3:1),
c. czy linki zachowują odpowiedni kontrast do tła (patrz Czy kontrast tekstu w stosunku do tła wynosi co najmniej 4,5:1?)
3. Sprawdź czy linki na wszystkich stronach wyglądają tak samo,
4. Sprawdź czy linki są nadal dobrze wyróżnione po oznaczeniu ich klawiaturą (fokus) i kursorem myszy (hover).
· Negatywna (oznacz jeśli na badanych stronach linki tekstowe nie spełniają wskazanych wymogów widoczności),
· Pozytywna (oznacz jeśli na badanych stronach linki tekstowe spełniają wskazane wymogi widoczności),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma linków tekstowych)
1. Przejdź po stronie nawigując samą klawiaturą (TAB, Shift+TAB),
2. Sprawdź czy oznaczenie fokusem jakiegoś elementu (np. wejście na pole tekstowe, przycisk), bez potwierdzenia wyboru Enterem/Spacją, nie powoduje zmian kontekstu strony (np. załadowania nowych treści, innego widoku itp.)
· Negatywna (oznacz jeśli kontekst strony zmienia się po samym oznaczeniu fokusem),
· Pozytywna (oznacz jeśli kontekst strony nie zmienia się po samym oznaczeniu fokusem),
1. Sprawdź, czy stronie są elementy, których zachowanie może być zaskakujące dla użytkowników, bo działają one inaczej niż standardowo lub wywołują one zmiany które są zaskakujące dla użytkownika,
2. Jeśli tak, sprawdź czy użytkownik jest wcześniej informowany o takim zachowaniu elementów.
· Negatywna (oznacz jeśli zmiana kontekstu dzieje się poza użytkownikiem i nie miał on o tym wcześniej informacji),
· Pozytywna (oznacz jeśli zmiana kontekstu nie dzieje się poza użytkownikiem lub miał on wcześniej informacji o niestandardowych zachowaniu elementu),
1. Sprawdź, czy strona lub jej elementy są automatyczne odświeżane,
2. Jeśli tak, upewnij się że jest to absolutnie konieczne dla zrozumienia informacji lub funkcjonalności,
3. Sprawdź czy użytkownik może zatrzymać i uruchomić to odświeżanie lub zmienić przedział czasowy pomiędzy odświeżeniami do ponad 20 godzin.
· Negatywna (oznacz jeśli na badanych stronach jest mechanizm automatycznego odświeżania, którym użytkownik nie może zarządzać),
· Pozytywna (oznacz jeśli na badanych stronach jest mechanizm automatycznego odświeżania, i użytkownik może nim zarządzać),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma mechanizmu automatycznego odświeżania)
1. Sprawdź, czy w kodzie strony są elementy powodujące jej automatyczne przekierowanie do innej strony czy innego adresu www (typu <meta http-equiv="refresh" content="5; URL=http://adres.pl/innastrona/">),
2. Jeśli tak, sprawdź czy jest to absolutnie konieczne dla zrozumienia informacji lub dla konkretnej funkcjonalności lub czy użytkownik może dowolnie opóźnić, zatrzymać i uruchomić to działanie.
· Negatywna (oznacz jeśli na badanych stronach są takie przekierowania choć nie są absolutnie konieczne lub użytkownik nie może nimi zarządzać),
· Pozytywna (oznacz jeśli na badanych stronach nie ma takich przekierowań lub są absolutnie konieczne i użytkownik nie może nimi zarządzać),
1. Sprawdź czy na stronie jest co najmniej jeden link pozwalający przejść szybko do treści głównej strony (korzystając z kotwicy do unikatowego id w odpowiednim znaczniku). Link ten najczęściej ma treść „Przejdź do treści” lub „Przejdź do treści głównej” i pozwala pominąć całą część nawigacyjną strony,
2. Sprawdź, czy są inne działające analogicznie linki prowadzące do kotwic np. do menu.
3. Sprawdź czy link (linki) jest spójnie użyty i działa poprawnie na wszystkich badanych podstronach serwisu.
4. Sprawdź czy na wszystkich stronach kolejność rozmieszczenia tych linków w kodzie HTML jest taka sama.
· Negatywna (oznacz jeśli na badanych stronach nie ma co najmniej jednego linku do omijania powtarzających się bloków lub link (linki) działa nieprawidłowo),
· Pozytywna (oznacz jeśli na badanych stronach jest co najmniej jeden link do omijania powtarzających się bloków i link (linki) działa prawidłowo),
· Nie dotyczy (oznacz, jeśli badana stronach jest jednostronicowa, prosta lub bez powtarzających się bloków treści)
1. Sprawdź czy na stronie są dodatkowe informacji lub elementów, które pojawiają się gdy:
· kursor myszy przemieszcza się nad elementem aktywnym (np. linkiem, przyciskiem, polem formularza) lub
· gdy ten element przyjmuje fokus
i zasłaniają lub przykrywają istotne elementy interfejsu.
2. Sprawdź, czy ta dodatkowa zawartość może być ukryta bez przemieszczania fokusu i kursora,
3. Sprawdź, czy nad dodatkową zawartości można przesunąć wskaźnik myszy bez spowodowania jej zniknięcia,
4. Sprawdź czy dodatkowa zawartość:
· jest widoczna tak długo, jak długo fokus lub wskaźnik myszy pozostaje nad elementem aktywnym;
· jest widoczna do momentu, gdy użytkownik uruchomi działanie mające na celu ukrycie jej bez przemieszczania fokusu ani wskaźnika myszy;
· jest widoczna tak długo, jak jest to zasadne.
· Negatywna (oznacz jeśli na badanych stronach dodatkowe informacje wyświetlane w opisanych sytuacjach nie mogą być zarządzane przez użytkownika),
· Pozytywna (oznacz jeśli na badanych stronach dodatkowe informacje wyświetlane w opisanych sytuacjach mogą być zarządzane przez użytkownika),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma tego typu elementów)
1. Sprawdź, czy na stronie jest zastosowany jednoliterowy skrót klawiszowy,
2. Jeśli tak sprawdź czy możliwe jest jedno z poniższych działań:
· wyłączenie skrótu;
· zmiana skrótu na inny;
· w przypadku skrótu związanego z aktywnym elementem interfejsu, skrót działa tylko gdy fokus jest na tym elemencie.
· Negatywna (oznacz jeśli w jednoliterowych skrótach klawiszowych nie można wykonać żadnego z wymienionych działań),
· Pozytywna (oznacz jeśli na badanych stronach w jednoliterowych skrótach klawiszowych można wykonać przynajmniej jedno z wymienionych działań),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma jednoliterowych skrótów klawiszowych)
1. Do badania użyj urządzenia z ekranem dotykowym np. smarfona,
2. Sprawdź, czy funkcjonalności dostępne za pomocą jednoczesnego ruchu lub dotknięcia ekranu kilkoma palcami można także wykonać dotykając jednego punktu na ekranie (np. przycisku).
· Negatywna (oznacz jeśli na badanych stronach są funkcje dostępne tylko za pomocą złożonego gestu),
· Pozytywna (oznacz jeśli na badanych stronach funkcje dostępne za pomocą złożonego gestu można wykonać też za pomocą prostego gestu jednopunktowego),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie funkcji dostępnej za pomocą złożonego gestu)
1. Sprawdź czy na stronie jest działanie, które uruchamia się poprze dotknięcia ekranu dotykowego lub wciśnięcia klawisza myszki,
2. Sprawdź, czy przed zakończeniem gestu punktowego (przed podniesieniem palca lub zwolnieniem klawisza myszy) działanie, może być anulowane.
· Negatywna (oznacz jeśli na badanych stronach są działania uruchamiane gestem punktowym lub naciśnięcie klawisza myszki, których nie można anulować),
· Pozytywna (oznacz jeśli na badanych stronach, działania uruchamiane gestem punktowym lub naciśnięcie klawisza myszki, można anulować przerywając ich wykonanie),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma działań uruchamianych gestem punktowym lub naciśnięcie klawisza myszki)
1. Sprawdź badane strony walidatorem W3C,
2. Sprawdź, czy walidator nie znalazł żadnego błędu lub przestarzałych, niewspieranych już znaczników i atrybutów.
· Negatywna (oznacz jeśli walidacja wykazała błędy i/lub przestarzałe elementy kodu),
· Pozytywna (oznacz jeśli walidacja nie wykazała żadnych błędów i przestarzałych elementów kodu),
Sprawdź, czy na stronie jest poprawnie sformułowana, odpowiadająca rzeczywistości deklaracja języka - w znaczniku <html> atrybut <lang> z odpowiednią wartością np. dla języka polskiego <html lang=”pl-PL”>.
· Negatywna (oznacz brakuje deklaracji języka lub jest ona błędna ),
· Pozytywna (oznacz jeśli na każdej stronie jest prawidłowa deklaracji języka treści),
Sprawdź, czy w kodzie HTML strony nie ma znaczników:
· basefont
· blink
· center
· font
· marquee
· s
· strike
· tt
· u
· align
· alink
· background
· basefont
· bgcolor
· border
· color
· link
· text
· vlink
· Negatywna (oznacz jeśli jest którykolwiek z tych znaczników),
· Pozytywna (oznacz jeśli na badanych stronach nie ma żadnego z tych znaczników),
Sprawdź, czy każda badana strona ma poprawną deklarację typu dokumentu DTD, zgodną z kodem HTML strony.
· Negatywna (oznacz jeśli brakuje deklaracji DTD lub jest ona niewłaściwa lub w nie),
· Pozytywna (oznacz jeśli deklaracja DTD jest prawidłowa i w prawidłowym miejscu kodu),
1. Sprawdź, czy znaczniki HTML są używane zgodne z ich przeznaczeniem, a nie jedynie w celu zmiany wizualnej elementów na stronie (np. ramka <fieldset> lub nagłówkek np. <h2> błędnie użyte do wizualnego wyróżnienia cytatu).
2. Sprawdź poprawne użycie (zgodne z semantyką kodu) wszystkich znaczników, które mogą zmieniać wygląd prezentowanych informacji.
· Negatywna (oznacz jeśli na badanych stronach znaczniki są używane niezgodnie ze standardami, do wyłącznie wizualnej zmiany elementu),
· Pozytywna (oznacz jeśli na badanych stronach znaczniki są używane zgodnie ze standardami, a nie do wyłącznie wizualnej zmiany elementu),
1. Sprawdź czy na stronie są dokumenty do pobrania,
2. Jeśli tak, pobierz i przejrzyj te dokumenty pod kątem dostępności cyfrowej.
3. W pierwszej kolejności sprawdź czy dokumenty nie mają formy skanów (bez rozpoznania czcionek).
4. W dokładnym przeglądzie mogą Ci pomóc narzędzia automatyczne np.:
a. w programach pakietu MS Office (od wersji 2010) – Inspektor dostępności,
b. w programie Adobe Acrobat – narzędzie „Pełne sprawdzenie dostępności”
c. program PDF Accessibility Checker do testowania plików w formacie PDF,
5. Jeśli pliki nie są dostępne cyfrowo, sprawdź czy na stronie z której można je pobrać jest dla nich dostępna cyfrowo alternatywa (np. treść dokumentu jest w artykule, pod którym jest plik do pobrania tego dokumentu)
· Negatywna (oznacz jeśli na badanych stronach są dokumenty niedostępne cyfrowo i bez alternatywy),
· Pozytywna (oznacz jeśli na badanych stronach nie ma dokumentów niedostępnych cyfrowo lub mają one dostępną cyfrowo alternatywę),
· Nie dotyczy (oznacz, jeśli na badanych stronach nie ma dokumentów do pobrania)
Do oceny dostępności cyfrowej na poziomie zaawansowanym potrzebna jest wiedza o budowie stron internetowych (HTML, CSS) i skryptów, umiejętność obsługi prostych dodatkowych programów, w tym automatycznych walidatorów dostępności oraz umiejętność obsługi czytnika ekranu.
1. Sprawdź czy na stronie są elementy (niebędące częścią innych elementów) które niosą ważne informacje, a nie są elementem multimedialnym ani CAPTCHĄ:
· aplet,
· object,
· embed,
· kod javascript generujący którykolwiek z powyższych elementów.
2. Jeśli tak, sprawdź czy każdy z nich ma odpowiedni, poprawnie sformułowany opis - w atrybut <alt>, <noembed>, lub inny jednoznaczny i dostępny opis zawartości. Sprawdź czy taki opis znajduje się bezpośrednio obok elementu, którego dotyczy.
· Negatywna (oznacz jeśli wskazane elementy nie mają opisów zawartości),
· Pozytywna (oznacz jeśli wszystkie, wskazane elementy maja opisy zawartości),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma tego typu elementów).
Sprawdź, czy widoczna etykieta każdego komponentu ma taką samą treść, jak etykieta zgłaszana użytkownikom przez technologie asystujące (np. czytniki ekranu).
· Negatywna (oznacz jeśli etykieta wizualne i zgłaszana przez technologie asystujące mają różną treść),
· Pozytywna (oznacz jeśli etykieta wizualne i zgłaszana przez technologie asystujące mają taką samą treść),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma etykiet)
1. Sprawdź, czy na stronie są komunikaty o statusie lub błędach (np. o postępie jakichś działań odbywających się w tle, o błędnie wpisanych danych),
2. Jeśli tak, sprawdź czy nawigując czytnikiem ekranu lub samą klawiaturą informacje te są przekazywanie automatycznie, bez konieczności oznaczenia ich fokusem.
· Negatywna (oznacz jeśli komunikaty o statusie lub błędzie są dostępne dopiero po przejściu fokusu),
· Pozytywna (oznacz jeśli komunikaty o statusie lub błędzie są dostępne bez przechodzenia fokusu),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma informacji o statusie lub błędach)
1. Sprawdź czy na stronie są elementy:
· object
· embed
· aplet
· kod javascript generujący którykolwiek z powyższych elementów.
2. Jeśli tak, sprawdź, czy są one w pełni dostępne dla technologii asystujących np. czytników ekranu i programów zmieniających układ kontrastu
3. Jeśli w tych elementach niezbędna jest transkrypcję tekstową, sprawdź czy jest dodana.
· Negatywna (oznacz jeśli skrypty nie są dostępne dla technologii asystujących lub nie mają niezbędnej transkrypcji tekstowej),
· Pozytywna (oznacz jeśli skrypty są dostępne dla technologii asystujących i mają niezbędną transkrypcję tekstową),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma skryptów i elementów programowalnych w innych sposób).
1. Sprawdź, czy są na stronie skrypty, które zmieniają zawartość nietekstową strony,
2. Jeśli tak, sprawdź czy skrypty zmienia także alternatywę tekstową dla tej zawartości (jeśli jest to niezbędne).
· Negatywna (oznacz jeśli skrypt nie zmienia jednocześnie alternatywy dla zawartości nietekstowej),
· Pozytywna (oznacz jeśli zmienia także alternatywę dla zawartości nietekstowej),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma skryptów zmieniających zawartości nietekstową).
1. Sprawdź wszystkie elementy strony, które mogą otrzymać fokus, które mają atrybuty zarządzania zdarzeniami lub kod javascript służący do zarządzania tymi zdarzeniami:
· onclick
· onkeypress
· onmousedown
· onmouseup
· onmouseover
· onmouseout
· onfocus
· onblur
· onkeydown
· onkeyup
· kod javascript pełniący rolę któregokolwiek z powyższych
2. Sprawdź, czy wymienione powyżej atrybuty występuje zawsze w parze tak, aby każde zdarzenie było możliwe do obsłużenia zarówno myszką jak i klawiaturą, bądź czy istnieje dostępna inna alternatywa.
· Negatywna (oznacz jeśli brakuje odpowiedników zdarzeń do nawigacji myszką lub klawiaturą),
· Pozytywna (oznacz jeśli każde zdarzenie do nawigacji myszką ma swój odpowiednik w nawigacji klawiaturą i na odwrót),
· Nie dotyczy (oznacz jeśli na badanych stronach nie atrybutów lub skryptów do zarządzania obsługą i nawigacją)
1. Sprawdź, czy na stronie są zmiany strony lub jej treści wywołane przez kod javascript uruchamiany działaniem użytkownika,
2. Jeśli tak, sprawdź czy ta zmiana znajduje się w kodzie strony bezpośrednio za elementem, który spowodował jej powstanie.
· Negatywna (oznacz jeśli treść generowana dynamicznie nie znajduje się bezpośrednio za powodującym ją elementem),
· Pozytywna (oznacz jeśli treść generowana dynamicznie znajduje się bezpośrednio za powodującym ją elementem),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma zmian wywoływanych przez skrypty)
Sprawdź, czy na stronie jest kod javascript, który powoduje usunięcia ramki fokusu z elementów aktywnych.
· Negatywna (oznacz jeśli skrypt usuwa ramkę fokusu),
· Pozytywna (oznacz jeśli skrypt nie usuwa ramki fokusu),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma skryptów)
Sprawdź, czy elementy generowane dynamicznie (przez skrypt) są dostępne przez technologie asystujące (np. czytniki ekranu).
· Negatywna (oznacz jeśli elementy generowane dynamicznie nie są dostępne przez technologie asystujące),
· Pozytywna (oznacz jeśli elementy generowane dynamicznie są dostępne przez technologie asystujące),
· Nie dotyczy (oznacz jeśli na badanych stronach nie ma elementów generowanych dynamicznie).
Przy każdym błędzie, oceń na ile dana niedostępna treść lub funkcja jest powszechna i ważna dla użytkowników strony internetowej. To Twoja subiektywna ocena, ale oprzyj ją na wiedzy i zrozumieniu potrzeb użytkowników, a nie przeczuciach. Opisz jasno i dokładnie swoją ocenę.
Dane zebrane w tej tabeli przydadzą się przy planowaniu kolejności prac. Będą pomocne dla programisty, koordynatora ds. dostępności lub innej osoby odpowiedzialnej za wdrożenie poprawek.
Jeśli trafisz na błąd, sprawdź czy jest on także na innych, analogiczny stronach czy może wystąpił tylko jednokrotnie. Adresy tych dodatkowych stron także umieść w tabeli przy opisie błędu. Dzięki temu zobaczysz jaki jest zasięg tego problemu.
W ostatniej kolumnie tabeli możesz ocenić wagę danego błędu. Przyda Ci się to przy planowaniu kolejności prac naprawczych. Wagę błędu możesz ustalić na skali np. od 1 do 5 lub opisowo np. błąd krytyczny, błąd istotny, błąd nieistotny.
Pamiętaj, że waga błędu zależy od kontekstu. Brak odpowiednich opisów alternatywnych zdjęć w artykule o wręczaniu nagród pracownikom gminy to błąd nieistotny, ale w wirtualnej galerii sztuki brak takich opisów dzieł będzie już błędem krytycznym.
Zwróć uwagę na strony, które bezwzględnie muszą być dostępne cyfrowo nawet w serwisach z wieloma błędami. Waga błędów na tych stronach będzie wysoka.
Nawet błąd, który uznasz za nieistotny, nadal pozostaje błędem dostępności cyfrowej i oznacza niezgodność strony internetowej z wytycznymi WCAG 2.1 i ustawą o dostępności cyfrowej.
|
LP |
Adres strony, na
której został wykryty błąd oraz ewentualne podstrony, na których również
występuje. |
Szczegółowy opis
błędu z wyjaśnieniami |
Nadana waga błędu |
|
1. |
|
|
|
|
2. |
|
|
|
|
3. |
|
|
|
|
4. |
|
|
|
|
5. |
|
|
|
|
6. |
|
|
|
|
... |
|
|
|