Jakie są podstawy testowania dostępności stron dla osób z niepełnosprawnościami?

Co to jest dostępność stron dla osób z niepełnosprawnościami?

Kluczowe informacje zostały omówione we wpisie: Dlaczego warto tworzyć strony internetowe dostępne dla osób z niepełnosprawnościami? Jest to niezbędna wiedza, aby móc testować dostępność stron dla osób z niepełnosprawnościami, dlatego należy się zapoznać przed przeczytaniem treści tego wpisu. Ten temat jest ważny od początku nauki programowania i wpis zawiera także instrukcje skierowane dla osób początkujących. Zaawansowanych proszę o wyrozumiałość ;-).

O czym musisz wiedzieć zanim zaczniesz testować?

  1. W tym wpisie użyto słowa ?dostępność? jako skróconej wersji frazy ?dostępność stron internetowych dla osób z niepełnosprawnościami?.

    W Internecie możesz spotkać się ze słowem ?dostępność?, ale także w kontekście czasu w jakim strona internetowa była dostępna bez awarii lub błędów.

  2. Istnieją programy, które automatycznie badają dostępność. Pozytywny wynik w takim programie nie oznacza, że strona jest dostępna dla osób z niepełnosprawnościami!

    Program bada kod strony internetowej (czyli tłumaczenie komputerowi jak ma wyświetlić stronę). Następnie sprawdza czy ten kod  jest zgodny z międzynarodowymi wytycznymi dotyczącymi dostępności. Taki program nazywa się walidatorem WCAG, bo testuje (waliduje) kod pod kątem zgodności z wytycznymi WCAG (więcej o tych wytycznych we wpisie Dlaczego warto tworzyć strony internetowe dostępne dla osób z niepełnosprawnościami?). Popularnym programem do badania dostępności jest WAVE. Wystarczy na stronie wkleić linka do podstrony, którą chcemy zbadać. Wave wyświetli w języku angielskim problemy i ostrzeżenia związane z dostępnością.

    Może to ułatwić sprawdzenie, ale nie wykryje wszystkich problemów. Przykładem są obrazki na stronie internetowej, które w kodzie strony powinny zawierać opis tekstowy grafiki (nie jest on widoczny na stronie internetowej, ale może go przeczytać czytnik ekranu osoby niewidomej). Program wykryje obecność opisu tekstowego grafiki, ale nie sprawdzi czy opis jest poprawny (czy zawiera wszystkie informacje jakie zawiera obrazek). Może też wskazywać błąd w miejscu, w którym jest wdrożone skuteczne rozwiązanie.

  3. W międzynarodowych wytycznych WCAG są różne poziomy dostępności, a każdy z nich jest oznaczony literą „A” (od ?A?, przez ?AA?, do ?AAA?). Pojedyncze ?A? oznacza minimalny poziom, a potrójne ?A? najwyższy. W wyborze poziomów do testowania został użyty dokument Rozporządzenie Rady Ministrów w sprawie Krajowych Ram Interoperacyjności (stan prawny na 27 kwietnia 2016 r.). Ten dokument nakazuje stronom rządowym dostępność i określa na jakim poziomie ma spełniać daną wytyczną (w załączniku nr 4 dostępnym wraz z rozporządzeniem).
    Niniejszy wpis to podstawy testowania, więc nie wszystkie elementy z załącznika 4 będziemy testować. Jednakże podstawy te zawierają obszerny materiał o testowaniu, więc pozwolą Ci wykryć dużo poważnych problemów z dostępnością.

  4. Wpis prezentuje elementy eksperckiego testowania dostępności. Należy jednak pamiętać, że często w proces testowania są włączone także osoby z niepełnosprawnościami. Są one w stanie zwrócić uwagę na nietypowe problemy, które trudniej zauważyć podczas testowania eksperckiego. Warto w dużych projektach (bankowych, rządowych, korporacyjnych) wspierać się pomocą eksperta i osób z różnymi niepełnosprawnościami. Ekspert często podpowie jak rozwiązać technicznie dany problem z dostępnością.
  5. Z chwilą oddania serwisu może on być dostępny, ale z czasem jego stan może ulec pogorszeniu.  Istotne jest to co będzie robione w późniejszym etapie, bo np. poprawki w formularzu kontaktowym na stronie mogą powodować nieoczekiwane błędy dostępności. Dodatkowo redaktorzy stron internetowych mają duży wpływ na dostępność. Można pogorszyć dostępność, np. poprzez wrzucenie skanu dokumentu. Taki dokument nie jest dostępny dla czytnika ekranu. Podobnie jak każde inne testy (np. bezpieczeństwo), także dostępność powinna być sprawdzana systematycznie.
  6. Zawsze w każdej sytuacji wątpliwości, problemu lub rozbieżności z materiałami o dostępności w internecie w pierwszej kolejności powinniśmy zajrzeć do wytycznych WCAG. Są one dostępne w polskim tłumaczeniu wytycznych WCAG, a bardziej szczegółowe rozwiązania są w dokumentacji dodatkowej (dokumenty dodatkowe są w języku angielskim, strona dostępna 27 kwietnia 2016 r.). Kolejnym etapem rozwoju testera dostępności jest analiza wszystkich wytycznych WCAG oraz badanie ich na dużych serwisach dostępnych w Internecie (Uwaga: największe serwisy internetowe też mają problemy z dostępnością, więc rozwiązania problemów zawsze szukajmy w wytycznych).
  7. Nie wszystkie elementy na tym blogu są perfekcyjnym rozwiązaniem problemów z dostępnością, ale pracę nad zwiększeniem dostępności są i będą prowadzone cyklicznie (zgodnie z zasadą, że dostępność trzeba sprawdzać systematycznie).
  8. Strony internetowe można testować pod różnymi kątami:
    • dostępności;
    • szybkości wczytania się (ładowania strony);
    • bezpieczeństwa (czy można się „włamać” na stronę);
    • błędów (czy np. działa formularz kontaktowy);
    • i wielu innych (np. co robi użytkownik, aby się z nami skontaktować).

    Błędy nie tylko pojawią się z czasem. One są nawet po testowaniu dostępności. Musisz pamiętać zawsze o złotej zasadzie. Już w 1969 r. Edsger Dijkstra (holenderski naukowiec) trafnie podsumował to: „Testowanie pokazuje obecność, a nie brak błędów”. Co za tym idzie zawsze jest szansa odkrycia nieszablonowego problemu (np. w jednej przeglądarce coś działa poprawnie dla osób niewidomych, a w drugiej niej). Warto obserwować nowości ze świata dostępności.

Jak szukać błędów utrudniających życie osobom niewidomym?

Osoby niewidome do poruszania się po stronie używają klawiatury i programów, które czytają im zawartość ekranu. Programy te nazywamy czytnikami ekranu i muszą one działać od uruchomienia komputera. Osoby niewidome nie używają przycisków do odtworzenia treści strony w formie dźwiękowej, bo musi „słyszeć” od uruchomienia systemu co się dzieje na ekranie komputera.

Stronę internetową będziemy testować bezpłatnym czytnikiem ekranu NVDA, który posiada polską wersję językową. Oprócz tego istnieją płatne odpowiedniki (np.: Jaws i Window-Eyes), ale NVDA jest świetnym narzędziem do testowania.

Jak zainstalować czytnik ekranu NVDA?

  1. Zainstalujemy wersję 2016.1, która dostępna była w maju 2016 r. Kolejne wersje programu mogą się różnić (w tym instrukcja instalacji).
  2. Wchodzimy na stronę producenta NVDA, należy tam zaznaczyć opcję: „Skip donation this time” i w polu „Email address” wpisać e-mail (nie trzeba go potwierdzać poprzez link aktywacyjny). Klikamy „Download”. Zapisujemy plik na naszym dysku.
  3. Klikamy dwukrotnie na plik, który chcemy zainstalować w komputerze (instalacja jest w języku polskim). Podczas tego procesu uruchomi się czytnik ekranu i będziemy słyszeć efekty jego działania. Instalacja jest w języku polskim, klikamy „zgadzam się”, a następnie „zainstaluj nvda na tym komputerze”. W kolejnym kroku odznacz opcję „Używaj NVDA na ekranie logowania systemu Windows (wymaga uprawnień administratora)”. Bez odznaczenia tej opcji czytnik ekranu będzie się uruchamiał podczas logowanie do systemu. Czytnik ekranu powinien wykryć język systemu i ustawić swoje opcje na język polski. Po instalacji uruchomi się powitanie NVDA (kliknij, aby powiększyć):
    Okno powitalne programu NVDA, w tle blog Stolica Kujaw

Jak pracować z czytnikiem ekranu NVDA?

Osoba ze zdrowym narządem wzroku może pominąć elementy, które się powtarzają lub są niechciane. Osoba z uszkodzonym narządem wzroku polega na tym co usłyszy i nie może poruszać się w ten sam sposób. Dla osoby z uszkodzonym wzrokiem ważne są skróty na klawiaturze, które pomagają w szybszym poruszaniu się po stronie. Oto popularne skróty na klawiaturze (NVDA wersja 2016.1):

  • przycisk na klawiaturze „tabulator”- pozwala przechodzić po wszystkich linkach (odsyłaczach), polach formularza na stronie. Uwaga: przechodzenie zaczyna od okienek przeglądarki internetowej (np. pola, gdzie wpisujemy adres strony internetowej);
  • „shift” i jednocześnie „tabulator – pozwoli wrócić do poprzedniego linka/pola formularza;
  • przycisk na klawiaturze „shift” – zatrzymaj czytanie. Ponowne wciśnięcie uruchomi czytanie od momentu zatrzymania;
  • „insert” i jednocześnie wciśnięta strzałka w dół – czytaj wszystko na stronie. Skrót może nie działać, jeśli w ustawieniach programu zmieniłaś/zmieniłeś „przycisk NVDA”;
  • „insert” i jednocześnie wciśnięta litera „q” – zamknij czytnik ekranu (wyskoczy okno z prośbą o potwierdzenie).
  • litera „H” – pozwala poruszać się po nagłówkach strony (więcej o nich później);
  • litera „F” – przejdź do formularza.

Więcej skrótów jest dostępne po kliknięciu prawym przyciskiem na ikonkę programu NVDA w pasku systemowym. Wybieramy „pomoc”, a następnie „wykaz klawiszy poleceń” (kliknij, aby powiększyć):

Menu czytnika ekranu NVDA prowadzące do wykazu klawiszy poleceń

Jest jeszcze jeden istotny skrót, który uruchamia listę linków, nagłówków i punktów orientacyjnych. Tester może to wykorzystać, aby szybko zorientować się co jest na stronie. Każdy link lub nagłówek powinien być zrozumiały i jednoznaczny to zinterpretowania (link dokąd prowadzi, nagłówek jaką treść streszcza). W przypadku dziwnych nazw linków lub nagłówków możemy mieć do czynienia z błędem dostępności.  Skrót do uruchamiania list to przycisk „insert” i jednocześnie wciśnięty przycisk „F7”. Skrót może nie działać, jeśli w ustawieniach programu zmieniłaś/zmieniłeś „przycisk NVDA”.

Jak szukać błędów przy pomocy czytnika ekranu?

Najbardziej pożądanym badaniem jest sprawdzenie wszystkich stron od góry do dołu. Jednakże ze względu na ograniczone zasoby kadrowe i czasowe często będziemy musieli wytypować strony do badania. Najczęściej odwiedzana strona to Strona Główna, ale nie jest ona jedyną istotną stroną. Bardzo ważne jest sprawdzenie stron, które zawierają:

  • formularze (np. wyszukiwarka, kontakt, zapisy na konferencję itd.);
  • kluczowe elementy strony internetowej  (np. w sklepie internetowym trzeba przejść przez cały proces zakupu towaru, w elektronicznej bibliotece należy spróbować zamówić książkę itd.);
  • mapy i animacje oraz elementy interaktywne;
  • treść pojedynczej wiadomości (na portalu informacyjnym), stronę produktu (sklep internetowy), stronę książki (biblioteka) itd.

Każdą z tych stron należy sprawdzić na kilka sposobów (nie używamy myszki i włączamy czytnik ekranu NVDA):

  1. Przechodzimy za pomocą klawisza”tabulator” po wszystkich linkach (odsyłaczach) i polach formularza strony. To co usłyszymy musi nam jednoznacznie mówić do czego prowadzi link lub co trzeba wpisać w pole formularza. Jeśli był potrzebny wzrok do zrozumienia tego co usłyszeliśmy to mamy błąd dostępności.

    Spójrz na stronę główną bloga Stolica Kujaw, są tam przyciski „Czytaj więcej”.  Bardzo często takie przyciski są błędnie zaprojektowane, ponieważ „Czytaj więcej” nie mówi nam o czym możemy się szerzej dowiedzieć. Dodatkowo często takie linki występują kilkakrotnie na stronie, a każdy z tych linków prowadzi w inne miejsce (powoduje to dezorientacje).

    Poruszając się za pomocą „tabulatora” nie słyszymy co otacza przycisk „czytaj więcej” („czytaj więcej”, ale o czym? Tylko osoba ze zdrowym narządem wzroku widzi te powiązanie!). Osoba z uszkodzonym wzrokiem może czytać stronę „od deski do deski” i wtedy może zrozumie dokąd prowadzi przycisk. Takie rozwiązanie problemu jest niedopuszczalne, bo zmuszasz do czytania każdej podstrony serwisu. Osoba niewidoma chce w szybki sposób znaleźć interesującego linka i trzeba jej to umożliwić.

    Żeby naprawić ten błąd nie musisz zmieniać wyglądu linku, wystarczy że ukryjesz dla czytnika ekranu odpowiedni komunikat z rozwinięciem dokąd prowadzi link (tak jak na tym blogu – najedź myszką na „czytaj więcej” a wyświetli Ci się to co usłyszy osoba niewidoma). Szerzej o poprawianiu błędów będzie w innym wpisie, ponieważ ten wpis skupia się na testowaniu dostępności.

    Błędem będzie także jak usłyszymy „obrazek” (grafika jest linkiem, ale nie ma opisu tekstowego dla czytnika ekranu); „puste” (często zdarza się w formularzach, gdzie pole nie jest opisane dla czytnika ekranu).

    Kolejny błąd może polegać na tym, że czytnik ekranu blokuje się na jakimś elemencie strony (nie możemy dojść do końca strony) lub pomija jakieś części, które są klikalne za pomocą myszy (nie czyta ich).

  2. Czytamy całą stronę za pomocą skrótu „insert” i jednocześnie strzałka w dół. Podczas odczytywania należy zwrócić uwagę czy przeczytał całą treść strony i czy występują jakieś nietypowe słowa (czytnik ekranu może przeczytać coś co nie jest widoczne na stronie). Ważne jest też, aby zachowywał on kolejnością czytania identyczną z kolejnością tekstu jaką widzimy.

    Bardzo często zdarzają się błędy z brakiem opisu tekstowego dla zdjęć i wykresów oraz statystyk w formie obrazka. Dostępna strona ma umieszczoną informację dla czytnika ekranu co zawiera zdjęcie. Ozdobne elementy graficzne strony nie powinny być czytane. Można oznaczyć je w taki sposób, aby czytnik ekranu je ignorował. Szczególnie zwróć uwagę na obrazki, które zawierają dane/statystyki. Prawidłowy opis tekstowy takich obrazków zawiera wszystkie informacje, które są na obrazku (osoba niewidoma powinna usłyszeć wszystkie informacje zawarte w obrazku). Warto również poszukać na stronie plików PDF i sprawdzić czy da się je odczytać (skany dokumentów są całkowicie niedostępne dla osób niewidomych).

    Kolejnym problemem są materiały multimedialne (animacje i video). Czy w materiale są informacje, które nie są przekazywane także w formie dźwiękowej? Na przykład częsty błąd to podanie adresu strony internetowej bez odczytania go albo pokazanie prezentacji bez odczytania co na niej się znajduje.

    Mechanizmy sprawdzające czy jesteś człowiekiem (np: CAPTCHA – czyli przepisywanie tekstu z obrazka) bardzo często wykluczają osoby niewidome (czytnik ekranu nie jest w stanie odczytać zawartości obrazka). Strona musi posiadać alternatywę, która umożliwi przejście osoby niewidomej przez zabezpieczenie. Często forma dźwiękowa CAPTCHY jest zbyt trudna, dlatego zaleca się tworzenie prostych zadań matematycznych. Użytkownik musi podać wynik dodawania (2+2). Należy tutaj pamiętać o osobach o obniżonej sprawności intelektualnej, dlatego trudne zadania nie są wskazane. Osoby pełnosprawne również docenią łatwiejsze zadania, które nie zmuszają ich do sprawdzenia (np. stolicy Wysp Owczych ;-)).

  3. Czytamy stronę przechodząc wyłącznie po nagłówkach (klawisz „H”). Nimi są oznaczone najważniejsze elementy strony i śródtytułu. W przypadku tego wpisu śródtytułami są pytania, które pełnią rolę streszczenia jakieś partii treści. W tym wpisie przechodząc po nagłówkach można usłyszeć między innymi: „Jak szukać błędów przy pomocy czytnika ekranu?”. Nagłówki pozwalają zorientować się szybko o czym jest treść. Najczęściej występujące błędy to:
    • brak nagłówków (możemy je widzieć na stronie, ale to nie oznacza że w kodzie są dobrze oznaczone),
    • źle dopasowane nagłówki (np. duża partia tekstu jest oznaczona jako nagłówek. Prawidłowo użyte nagłówki przypominają coś w rodzaju spisu treści na danej stronie),
    • błędna struktura nagłówków (więcej w podtytule jak wykryć błędną strukturę nagłówków),
    • mało istotne elementy oznaczone nagłówkiem (np. rzadko wykorzystywany element strony).

Jak wykryć błędną strukturę nagłówków?

Nagłówki powinny oznaczać najważniejsze elementy strony (np.: tytuł, menu, wyszukiwarkę) i tworzyć coś w rodzaju spisu treści. Na przykład nagłówek „Jak wykryć błędną strukturę nagłówków” pozwala na szybkie zorientowanie się czego dotyczy dana partia tekstu. Nagłówek ten jest podrozdziałem dla rozdziału „Jak szukać błędów utrudniających życie osobom niewidomym?” (też nagłówek). Widzimy tutaj pewną hierarchię, rozdziały zawierają podrozdziały. Nagłówki mogą być od 1 do 6 poziomu.

Poziom zależy od ważności danego elementu. Nagłówkiem pierwszego poziomu zazwyczaj oznacza się nazwę strony,  poziomem drugim oznacza się menu/wyszukiwarkę lub tytuł pojedynczej strony. Kolejne nagłówki oznaczają rozdziały (np. mogą być nagłówkiem poziomu 3) lub podrozdziały danego artykułu (np. mogą być nagłówkiem poziomu 4). Właściwa hierarchia nie dopuszcza możliwości, że nagłówek poziomu 4 zawiera nagłówki poziomu 3.  Podobnie jak w książce podrozdział nie może zawierać rozdziałów. Dobrze to ilustruje program do sprawdzania nagłówków. Zwróć uwagę, że przy każdym nagłówku jest cyfra, która oznacza poziom (od 1 najważniejszego do mniej ważnych).

Właściwa struktura nagłówków - lista nagłówków z tego wpisu z oznaczeniem ich poziomu

Jeżeli struktura (hierarchia) nagłówków jest poprawna to tło dla każdego z nich będzie białe (jak na zrzucie ekranu). Jeżeli jakiś wpis będzie niezgodny ze strukturą to będzie jego tło w kolorze różowym (krewetkowym :P). Paradoksalnie program do badania dostępności oznacza błąd za pomocą koloru. Program sprawdza tylko problemy związane z hierarchią nagłówków, ale też umożliwia podejrzenie tego co usłyszy osoba niewidoma poruszająca się tylko po nagłówkach strony.

Program do sprawdzania nagłówków jest dostępny wyłącznie w przeglądarce Firefox (testowane na wersji 46), dlatego musisz ściągnąć tę przeglądarkę internetową (strona dostępna 18 maja 2016 r.). Po ściągnięciu należy w menu wybrać „Narzędzia”, a następnie „Dodatki” (można też użyć skrótu „Ctrl” + „Shift” + „A”). Wyświetli się nowa zakładka, w wyszukiwarce („Szukaj we wszystkich dodatkach”) wpisujemy: „HeadingsMap” i po wyświetleniu wyników klikamy na „zainstaluj”.

Po włączeniu dodatku i ponownym uruchomieniu przeglądarki internetowej mamy dostęp do nowego narzędzia za pomocą skrótu na klawiaturze „Alt” + „o” (w ten sam sposób zamykamy okno). Prawidłowość nagłówków sprawdzamy w zakładce „Headings” (pierwsza na powyższym zrzucie ekranu).

Dlaczego grupa z z uszkodzonym narządem wzroku jest różnorodna?

W tej grupie mogą się znaleźć osoby spotykające się na stronach z różnymi problemami:

  • osoby z zaburzeniem rozpoznawania barw, które mogą mieć problemy z ważnymi informacjami oznaczonymi tylko kolorem (np. oznaczenie tylko czerwonym kolorem pól nieuzupełnionych w formularzu);
  • osoby niewidome, które mogą mieć problem z brakiem opisów zdjęć;
  • osoby niedowidzące, które mogą mieć problem ze zbyt małą czcionką i blokadą jej powiększenia. Należy sprawdzić czy wszystkie treści i funkcje strony (np. wyszukiwarka, przycisk wyślij w kontakcie itd.) są widoczne po powiększeniu do 200 proc. W każdej przeglądarce można powiększyć stronę za pomocą skrótu na klawiaturze „Ctrl” oraz „+”, a wrócić do pierwotnego rozmiaru za pomocą skrótu „Ctrl” + „0”.  Przeglądarka internetowa Chrome (strona dostępna 18 maja 2016 r.) dodatkowo wyświetla informację o ile procent powiększyliśmy stronę;
  • osoby głuchoniewidome, które mogą mieć problem z materiałami video bez transkrypcji (tekst zawierający dialogi i informacje o wszystkich kluczowych dźwiękach i obrazach);
  • osoby z chorobami oczu, które mogą mieć problem ze znikającymi elementami w ?trybie wysokiego kontrastu? (czyli bardzo ciemnego tła i bardzo jasnych literek).

Powinniśmy weryfikować czy jakakolwiek instrukcja lub tekst nie zawiera wskazówek opartych wyłącznie na zmysłach (wzrok, słuch itd). Takim przykładem jest np. polecenie kliknięcia w zielony link. Takim poleceniem wykluczmy:

  • osoby niewidome, które opierają się na tym co słyszą (czytnik ekranu);
  • osoby z zaburzeniem rozpoznawania barw;
  • osoby wymagające wysokiego kontrastu (podmienia on kolory linków).

Bardzo częstym problemem jest „zlewanie się” tekstu z tłem (kontrast).  Kolor czcionki nie powinien być zbliżony do koloru tła, a właściwe proporcje określają wytyczne WCAG. Proporcja wynosi 4,5 : 1, ale nie dotyczy:

  • loga strony/marki/firmy;
  • ozdobnych elementów strony (grafiki bez tekstu);
  • dużego tekstu (minimum czcionka pogrubiona 14px,  tutaj wymagana proporcja to 3:1).

Jak sprawdzić właściwe proporcje kontrastu?

Do sprawdzenia proporcji kontrastu potrzebujemy koloru tła i koloru czcionki w języku zrozumiałym dla komputerów (kod koloru). Kolory można opisywać w różny sposób, ale my potrzebujemy je opisane w formie 6 znaków (tzw. kod szesnastkowy). W ramach tych 6 znaków mogą być cyfry lub litery z przedziału od A do F. Cechą charakterystyczną jest podawanie kodu koloru wraz ze znakiem „kratki” (# – ang. nazwa to hash), np: #000000 (czarny), #FFFFFF (biały), #0000FF (niebieski). Tyle wiedzy nam wystarczy do testowania (kolory internetu, strona dostępna 18 maja 2016 r.).

W przypadku bardzo słabej widoczności tekstu na tle istnieje prawdopodobieństwo złego kontrastu. Kolory możemy sprawdzić poprzez narzędzie dla programisty (dostępne po wciśnięciu klawisza „F12”), ale obsługa tego narzędzia będzie w innym wpisie. Możemy także poprosić autora strony (programistę/grafika) o przekazanie koloru tła i koloru czcionki na elemencie, który chcemy zbadać. Jeżeli nie będzie to możliwe możemy sprawdzić to wykonując instrukcję (dla zaawansowanych: na końcu jest strona internetowa badająca proporcje kontrastu):

  • zrobić zrzut ekranu strony internetowej, gdzie chcemy badać kontrast (przycisk na klawiaturze „print screen”);
  • wkleić go do programu „Paint”, który jest dodawany do każdego systemu Windows.

    W Windowsie 8 należy najechać na prawy góry róg ekranu, aż wysunie się boks z dodatkowymi opcjami. Należy kliknąć na lupę i wpisać „Paint” oraz potwierdzić „enterem”.

    W Windowsie XP należy kliknąć na przycisk „Start” w lewym dolnym rogu ekranu, następnie wybrać „Wszystkie Programy” i „Akcesoria” oraz „Paint”.

    Uruchomienie (w systemie Windows 7) i omówienie podstaw programu (film dostępny na Youtube 21 maja 2016 r.):

  • w programie należy kliknąć ikonę pobierania ikonka pobierania koloru w Programie Paint i później kliknąć na tekst, który chcemy zbadać. Często tekst ma różne odcienie, więc należy bardzo uważnie wybierać miejsce pobrania koloru.

  • wybrać z górnej belki „Edytuj kolor” (Windows 8). W systemie Windows XP wybieramy z menu: „Kolory”, „Edytuj kolory”, następnie „Definiuj kolory niestandardowe”.

  • spisujemy cyfry w polach: Czerw., Ziel., Nieb. i przeklejamy je na stronę (w polu red – czerw., green – ziel., blue – nieb.): http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php (strona dostępna 21 maja 2016 r.). Po wpisaniu należy kliknąć przycisk „RGB->HEX”. Zapisujemy otrzymaną wartość.

  • następnie wklejamy otrzymaną wartość na stronę: http://webaim.org/resources/contrastchecker/ w polu „Foreground color” (strona dostępna 21 maja 2016 r.).

  • wrócić do Painta i kliknąć ikonę pobierania ikonka pobierania koloru w Programie Paint i później tło tekstu, które chcemy zbadać. Powtórzyć cały proces, ale wkleić na stronie http://webaim.org/resources/contrastchecker/ w polu „Background color”.

  • sprawdzamy czy na stronie http://webaim.org/resources/contrastchecker/ wyświetli się komunikat dla WCAG AA: „Pass” (oznacza on spełnienie poziomu „AA”. Zwróć uwagę, że strona również sprawdza wyższy poziom dostępności „AAA” ).

Należy również pamiętać, że są osoby które wymagają wysokiego kontrastu od uruchomienia komputera (czyli bardzo ciemnego tła i bardzo jasnych literek). Czasem strona jest wyposażona w link do specjalnej wersji („kontrastowej”), ale posiadanie takiego linku nie oznacza spełnienie wytycznych dotyczących kontrastu!

W systemie Windows możemy uruchomić „tryb wysokiego kontrastu” wciskając jednocześnie na klawiaturze: „shift + alt + print screen” (tak samo się wyłącza). Należy w tym trybie sprawdzić czy nie znika jakiś element strony. Często problemem są obrazki z przezroczystym tłem i czarnym napisem. Nie widać tego napisu w „trybie wysokiego kontrastu” (w tym przypadku przezroczyste tło należy zamienić na białe). Mogą również znikać inne elementy, np. wyszukiwarka i teksty. Wszystkie elementy dostępne w trybie normalnym powinny być dostępne w „trybie wysokiego kontrastu”.

Zrzut ekranu bloga w „trybie wysokiego kontrastu” (kliknij, aby powiększyć):

Blog w trybie wysokiego kontrastu

Jak szukać błędów utrudniających życie osobom z uszkodzonym narządem słuchu?

Osoby z uszkodzonym narządem słuchu mają problem ze wszystkimi treściami przekazywanymi za pomocą dźwięku (video, pliki dźwiękowe), ale nie jest to jedyny problem. Osoby niesłyszące mogą mieć problem z tekstami na stronie, ponieważ ich ojczystym językiem jest Polski Język Migowy (różni się on od języka polskiego). Bardzo ważne jest pisanie tekstów łatwym językiem, rozwijanie wszystkich użytych skrótów, unikanie trudnych wyrazów, dzielenie długich zdań, dodawanie śródtytułów do partii tekstów. Bardzo dobrą praktyką jest też tłumaczenie najważniejszych rzeczy na Polski Język Migowy (PJM), choć nie jest to wymóg dla urzędów ( Rozporządzenie Rady Ministrów w sprawie Krajowych Ram Interoperacyjności, stan prawny na 27 kwietnia 2016 r.). Jest jeszcze System Językowo-Migowy, ale tłumaczenie zawsze powinno być w PJM (nim porozumiewają się osoby z uszkodzonym narządem słuchu od urodzenia).

Wszystkie materiały video powinny być zaopatrzone w napisy rozszerzone, które obok dialogów powinny zawierać wszystkie kluczowe informacje dźwiękowe (np. w filmie słychać alarm pożarowy i bohaterzy uciekają z budynku – należy umieścić w napisach informację o alarmie pożarowym).

Jak szukać błędów utrudniających życie osobom z uszkodzonym narządem ruchu?

Wśród tej grupy są osoby, które nie mogą używać myszy. Do poruszania się po stronie internetowej używają klawiatury lub specjalnych urządzeń. Szczególnie trzy rodzaje problemów pojawiają się często podczas testowania:

  • poruszając się za pomocą klawiatury (przycisk „tabulator”) powinna pojawiać się obwoluta (fokus) wokół elementu aktywnego (czyli miejsce, gdzie zaniósł nas „tabulator”). Jeśli nie widzimy miejsca, w którym jesteśmy to napotkaliśmy poważny błąd dostępności. W przypadku tego bloga fokus jest w postaci czerwonej obwoluty (na zrzucie ekranu fokus ustawiony na linku”Zaawansowany” – kliknij, aby powiększyć):
    Zrzut ekranu bloga z zaznaczonym fokusem na linki "Zaawansowany"
  • jeżeli poruszając się za pomocą klawiatury nie możemy przejść do dalszej części strony to jest to błąd. Czasem fokus blokuje się na danym elemencie.
  • każda funkcjonalność i link musi być dostępny z poziomu klawiatury. Bardzo często kalendarze i slajdery (element wyświetlający i przewijający zdjęcia) nie jest dostępny z poziomu klawiatury.

Zwróć uwagę, że także osoby ze złamaniem ręki mogą mieć problem z używaniem myszki, dlatego odnośniki powinny być duże i łatwo klikalne (np. odnośnik w postaci dwóch nawiasów trójkątnych może sprawiać problemy „>>”).

Jak szukać błędów utrudniających życie osobom o obniżonej sprawności intelektualnej?

Trudny tekst bardzo często wyklucza osoby pełnosprawne. Czy zdarzyło Ci się, kiedyś słyszeć wypowiedź specjalisty (np.: informatyka, prawnika, inżyniera), która nie była dla Ciebie zrozumiała? Poprawna komunikacja i łatwy język to podstawa sprawnej strony internetowej. Bardzo często trudne teksty, używanie skrótów bez wyjaśnienia, „ściany tekstu”, brak podziału na śródtytuły powoduje, że wykluczamy grupę osób (w tym także osoby z obniżoną sprawnością intelektualną). Dobrym zwyczajem jest sprawdzanie łatwości tekstu z osobą starszą lub spoza branży. Świetnie ona wyłapie miejsca, gdzie trzeba rozszerzyć lub skrócić informacje.

Jakie są jeszcze błędy związane z dostępnością stron internetowych dla osób z niepełnosprawnościami?

  1. Migające elementy. Strona internetowa nie powinna zawierać elementów, które migają częściej niż trzy razy na sekundę. Takie elementy mogą wywoływać atak padaczki.
  2. Automatyczne odtwarzanie dźwięku na stronie dłuższe niż 3 sekundy. Strona internetowa powinna mieć mechanizm zatrzymujący lub wyłączający odtwarzanie dźwięku lub regulację dźwięku (niezależną od ustawionego dźwięku w komputerze). Tę wytyczną warto połączyć z dobrymi praktykami projektowania, które zakazują automatycznego odtwarzania video i audio. Jest to niezwykle uciążliwe przy przeglądaniu kilku stron naraz, a dodatkowo niezwykle szkodliwe:
    • osoba niewidoma obok dźwięku pochodzącego z czytnika ekranu otrzymuje dźwięk z odtwarzanego materiału (paraliżuje to poruszanie po stronie internetowej).
    • spowalnia to wczytywanie stron;
    • osoba z poważnym uszkodzeniem słuchu lub uszkodzonymi głośnikami albo wyłączonym dźwiękiem może nie zorientować się, że coś jest odtwarzane w tle (spowalnia strony, a w przypadku internetu mobilnego zmniejsza ilość danych jakie może wykorzystać taka osoba – limity ściągania);
    • duża głośność (np. reklama) powoduje, że można zakłócić ciszę, a przecież strony przeglądamy przy śpiącym dziecku, w bibliotece, kawiarni itd.

    W efekcie takich złych praktyk Internauci używają specjalnych programów (wtyczek do przeglądarki internetowej), które blokują tego typu rozwiązania.

  3. Limity czasowe. Niektóre serwisy umożliwiają wykonanie czynności na stronie tylko w określonym czasie. W takim przypadku musi być spełniony jeden z warunków:
    • możliwość wyłączenia limitu czasowego;
    • możliwość zmiany limitu czasowego (zwiększenie dziesięciokrotnie limitu);
    • ostrzeżenie o limicie i możliwość jego łatwego zwiększenie (np. poprzez kliknięcie).

    Zasada ta ma wyjątki (np. aukcje), więcej o problemie limitu czasowego w wytycznej 2.2.1.

  4. Informacja automatycznie porusza się, przesuwa, migota i jest widoczna dłużej niż 5 sekund oraz jest przedstawiona równolegle z inną treścią. Powinien być zapewniony mechanizm, który pozwala wstrzymać, zatrzymać lub ukryć. Podobny mechanizm dotyczy automatycznie aktualizujących się informacji przedstawionych równolegle z inną treścią. Są tutaj wyjątki opisane w wytycznej 2.2.2 (np. animacja wczytywania strony nie musi mieć takiego mechanizmu). Ten problem utrudnia życie osobom, które mają problem ze skupieniem (elementy rozpraszają), szybkim czytaniem lub posługującym się czytnikami ekranu. Możemy się z tym spotkać na paskach giełdowych informujących o kursie akcji, paskach z pogodą w miastach itd.
  5. Tytuł strony. Powinien opisywać cel lub temat strony internetowej (więcej w wytycznej 2.4.2). Dotyczy to także podstron, ma to pozwolić na szybkie zorientowanie się w zawartości strony internetowej. Przykładowo strona „o blogu” ma tytuł „O blogu – Stolica Kujaw”. Tytuł widać na zakładce strony (kliknij, aby powiększyć zrzut ekranu):
    Tytuł strony widoczny na zakładce
  6. Strona musi być stworzona poprawnie.

    Organizacja W3C stworzyła stronę, która sprawdza czy nasz kod w języku HTML jest poprawny. Walidator jest w języku angielskim.

    1. Wchodzimy na stronę: https://validator.w3.org/.
    2. W polu „address” wklej adres strony, którą chcesz sprawdzić.
    3. Klikamy przycisk „Check” (czyli sprawdź).
    4. Strona może zwrócić nam problemy („errors”) i ostrzeżenia („waring(s)”). Błędy musimy zawsze poprawiać, aby przejść sprawdzenie kodu (walidację). W przypadku ostrzeżeń nie ma takiej konieczności, ale warto zwrócić uwagę przed czym jesteśmy ostrzegani. Kliknij, aby powiększyć:
      Walidator W3C zwraca dwa błędy na stronie

Podsumowanie

  • Co to jest dostępność stron dla osób z niepełnosprawnościami? – Kluczowe informacje zostały omówione we wpisie: Dlaczego warto tworzyć strony internetowe dostępne dla osób z niepełnosprawnościami?
  • O czym musisz wiedzieć zanim zaczniesz testować? – Programy automatycznie badające dostępność nie zawsze są w stanie pokazać wszystkie błędy na stronie. W tym wpisie mamy dostępność najważniejszych elementów, ale nie wszystkich. Dostępność powinna być badana systematycznie, ponieważ duży wpływ na nią mają treści dodawane przez redaktorów oraz nowe poprawki do strony internetowej.
  • Jak szukać błędów utrudniających życie osobom niewidomym? – Zainstaluj czytnik ekranu NVDA. Za pomocą skrótów na klawiaturze ( „tabulator”, „insert” i strzałka w dół, klawisz „h”) przejdź po stronie i sprawdź czy to co słyszysz pozwala Ci poruszać się po stronie. Zwróć szczególną uwagę jak czytnik odczytuje: zdjęcia, formularze, zabezpieczenia typu CAPTCHA, pliki PDF. Sprawdź poprawność nagłówków w dodatku do Firefox’a HeadingsMap.
  • Dlaczego grupa z z uszkodzonym narządem wzroku jest różnorodna? – Są różne uszkodzenia narządu wzroku i w związku z tym różne problemy. Osoby z zaburzeniem rozpoznawania barw mogą mieć problemy z ważnymi informacjami oznaczonymi tylko kolorem, osoby niewidome mogą mieć problem z brakiem opisów zdjęć, osoby niedowidzące mogą mieć problem ze zbyt małą czcionką i blokadą jej powiększenia, osoby głuchoniewidome mogą mieć problem z materiałami video bez transkrypcji, osoby z chorobami oczu mogą mieć problem ze znikającymi elementami w ?trybie wysokiego kontrastu?. Strona do badania czy jest poprawny kontrast umożliwia sprawdzenie czy są właściwe proporcje kolorów.
  • Jak szukać błędów utrudniających życie osobom z uszkodzonym narządem słuchu? – Osoby z uszkodzonym narządem słuchu mają problem ze wszystkimi treściami przekazywanymi za pomocą dźwięku (video, pliki dźwiękowe). Mogą również mieć problem z tekstami na stronie, ponieważ ich ojczystym językiem jest Polski Język Migowy (różni się on od języka polskiego). 
  • Jak szukać błędów utrudniających życie osobom z uszkodzonym narządem ruchu? – Szukamy miejsc, gdzie znika fokus lub blokuje się na danym elemencie strony. Wszystkie elementy strony powinny być dostępne z poziomu klawiatury.
  • Jak szukać błędów utrudniających życie osobom o obniżonej sprawności intelektualnej? – Trudny tekst może im utrudnić zrozumienie informacji.
  • Jakie są jeszcze błędy związane z dostępnością stron internetowych dla osób z niepełnosprawnościami? – Migające elementy, automatyczne odtwarzanie dźwięku, limity czasowe, brak możliwości wyłączenia automatycznie przesuwających się elementów strony, złe tytułu strony, błędna walidacja kodu HTML mogą negatywnie wpływać na dostępność.

 

 

  • Podziel się na:

Zobacz również:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *