4 proste testy dostępności cyfrowej

Nawigacja przez źle zorganizowane lub zbyt długie strony może być uciążliwa dla wszystkich, a tym bardziej dla osób korzystających z technologii wspomagających. Dobrze zorganizowana struktura pozwala szybciej odkryć cel i funkcjonalności różnych części stron i ułatwia nawigację.

Przeskanowanie strony pod kątem ogólnej struktury i układu pomaga rozpoznać istotne bariery dostępności, które nieraz powodują, że użytkownicy po kilku sekundach opuszczają stronę, bo nie mogą z niej skorzystać.

Oto pomocnicze listy pytań, które należy zadać, i rzeczy, na które należy zwrócić uwagę:

Układ i struktura stron

• Czy strona jest podzielona na główne obszary?
• Czy obszary stron są wyróżnione i oznakowane?
• Czy funkcje obszarów stron są zrozumiałe?
• Czy układ treści powtarzanych na wielu stronach jest spójny?
• Czy ważniejsze treści i funkcje strony mają wyższy priorytet?

Orientacja i nawigacja

• Czy cele treści są zrozumiałe z samych wskazówek tekstowych?
• Czy istnieje mechanizm szybkiego dostępu do głównych części strony?
• Czy sekcje, bloki tekstu i tabele mają nagłówki opisujące ich treść?
• Czy nagłówki, etykiety i łącza są zrozumiałe bez otaczającego je kontekstu?
• Czy kontrast między pierwszym planem i tłem wydaje się wystarczający?
• Czy wskazówki wizualne są rozpoznawalne bez rozróżniania ich kolorów?

Ludzie korzystają ze stron internetowych na różnych urządzeniach i w różnych okolicznościach. Niektórzy muszą się posłużyć specjalnymi strategiami adaptacyjnymi, aby móc w ogóle korzystać ze strony, np. znacznie powiększają rozmiar czcionek albo włączają tryb inwersji kolorów.

Strony, na których zastosowano przestarzałe techniki projektowania często stają się bezużyteczne, gdy zostanie powiększony rozmiar czcionki, zmniejszona rozdzielczość albo gdy są wyświetlane na urządzeniu z niewielkim ekranem.

Są dwa szybkie i proste sposoby na ocenę elastyczności strony.

• Pierwszy, zmień rozmiar czcionki.
• Drugi, zobacz stronę na urządzeniu przenośnym.

Zmień rozmiar czcionki

Strony powinny być łatwe w nawigacji i zrozumiałe, gdy zostaną zwiększone do 2 razy (200%) w stosunku do strony domyślnej.

Wszystkie nowoczesne przeglądarki udostępniają funkcję dostosowania rozmiaru czcionki za pomocą skrótów klawiaturowych - klawisza modyfikującego (Ctrl w Windows lub CMD w Mac) oraz znaków plus i minus. Można również posłużyć się kółeczkiem myszki z naciśniętym równocześnie klawiszem Ctrl lub CMD). A jeśli używasz urządzenia dotykowego, wykorzystaj gesty szczypania i rozciągania.

Zobacz stronę na urządzeniu przenośnym

Strona powinna się dostosowywać do pionowej i poziomej orientacji ekranu (treść powinna się „ponownie wlewać” do obszaru operacyjnego) i pozostawać nadal w pełni czytelna i łatwa w nawigacji. Powinna istnieć możliwość skalowania strony. Przeglądanie strony nie powinno wymagać przewijania w poziomie.

Oto pytania, które należy zadać, i rzeczy, na które należy zwrócić uwagę:

• Czy cały tekst jest nadal widoczny? Czy nie nachodzi na siebie?
• Czy przy po zwiększeniu rozmiaru kontekst wizualny rozkłada się odpowiednio?
• Czy nagłówki, etykiety i wskazówki wizualne są poprawnie powiązane treścią?
• Czy bloki treści przesuwają się lub dopasowują prawidłowo?

Możliwość obsługi strony wyłącznie za pomocą klawiatury ma dla dostępności zasadnicze znaczenie. Duża liczba osób nie może z różnych powodów używać w pracy z komputerem myszy, panelu, ani ekranu dotykowego. Osoby niewidome nie widzą wskaźnika myszy. Osoby z zaburzeniami motoryki lub chronicznym bólem mogą nie być w stanie używać myszy czy precyzyjnie trafiać w aktywne miejsca strony.

Widoczność fokusu

Nieodzownym warunkiem efektywnej obsługi strony za pomocą klawiatury jest widoczność wskaźnika fokusu, czyli wyróżnienia tego miejsca na stronie, które odbiera aktualnie sygnały z klawiatury. Może to być albo łącze, albo przycisk, albo pole formularza lub inne miejsce interaktywne. Widoczność wskaźnika fokusu jest szczególnie ważna dla ogółu użytkowników, a krytyczna dla użytkowników słabowidzących lub cierpiących na zaburzenia motoryki, niekoniecznie tylko dla osób niewidomych.

Obsługa klawiaturą

Standardową konwencją dla tradycyjnych stron internetowych, określoną przez przeglądarkę, jest cykliczne i sekwencyjne przemieszczanie się na stronie za pomocą klawiszy Tab lub Shift+Tab między łączami, przyciskami i polami formularzy. Elementy sterujące, takie jak przyciski i łącza, są aktywowane za pomocą klawisza Enter, natomiast wyborów (zaznaczania) na przykład pól opcji, pozycji na listach rozwijanych, dokonuje się za pomocą klawisza Spacji. Po kontrolkach formularzy można się poruszać za pomocą klawiszy strzałek.

W nowoczesnych aplikacjach internetowych i na nowoczesnych stronach internetowych ta klasyczna konwencja coraz bardziej zbliża się do konwencji znanej z obsługi programów komputerowych. Wzorcowe rozwiązania opierają się na założeniu, że klawisze Tab lub Shift+Tab służą do przemieszczania się między głównymi widżetami czy komponentami strony, a gdy fokus znajdzie się wewnątrz komponentu czy widżetu (np. paska menu), do poruszania się w lewo i w prawo oraz w dół i w górę służą klawisze strzałek. Często mogą być także wykorzystane klawisze Esc, Home, End, PageUp, PageDown.

Lista kontrolna

Oto pomocnicza lista pytań, które należy zadać, i rzeczy, na które należy zwrócić uwagę:

• Czy w każdym momencie widzisz, na którym elemencie strony znajduje się wskaźnik fokusu?
• Czy kolejność przenoszenia fokusu jest zgodna z logicznym porządkiem treści na stronie?
• Czy fokus pozostaje w miejscu, do którego został przeniesiony?
• Czy łącza możesz uruchomić za pomocą klawisza Enter, a przyciski za pomocą spacji?
• Czy bez użycia myszy możesz odsłonić treści ukryte (np. menu, karty, harmonijki)?
• Czy w złożonych obiektach, np. menu, możesz jest poruszania się za pomocą strzałek?
• Czy bez użycia myszy możesz się wydostać z każdego elementu na stronie?
• Czy na stronie są łącza, które przyspieszają dostęp do głównych obszarów strony?
• Czy skróty lub łącza pomijające są widoczne i czytelne?

W cyfrowym świecie obrazy i multimedia są niesamowicie atrakcyjnymi i skutecznymi sposobami przekazu. Niestety, nie zawsze można na nich polegać. Może się zdarzyć, że w pewnych okolicznościach obrazy nie zostaną w ogóle wyświetlone na ekranach użytkowników. W niektórych sytuacjach oglądanie filmu czy słuchanie nagrania dźwiękowego może być niemożliwe. Osoby niewidome i wiele osób słabowidzących nie skorzystają z obrazów czy filmów, jeśli nie zapewnimy im równoważnej alternatywy tekstowej. Osoby głuche lub słabosłyszące bez alternatywy tekstowej nie skorzystają z mediów opartych na dźwięku.

Dlatego wszelkie obrazy przedstawiające ważną treść i wszelkie multimedia osadzone na stronie internetowej powinny posiadać równoważną alternatywę tekstową. W przypadku obrazów często wystarczy alternatywa tekstowa przekazana za pomocą specjalnego (i obowiązkowego) atrybutu alt w znaczniku osadzającym obraz. W przypadku złożonych obrazów, wykresów, infografik konieczne może być opisanie ich w treści strony lub na dodatkowej stronie, do której odsyła łącze sąsiadujące z obrazem. W przypadku multimediów niezbędnymi alternatywami są napisy (tzw. rozszerzone), transkrypcje, audiodeskrypcje (opisy dźwiękowe).

Ocenę, czy zapewniono dostępność obrazów, można przeprowadzić na dwa sposoby:

• wyłączyć obrazy
• użyć narzędzia pokazującego teksty alternatywne

Wyłączenie obrazów

Najłatwiej wyłączyć obrazy w przeglądarce Chrome. Przejdź do Ustawienia > Zaawansowane > Prywatność i bezpieczeństwo > Ustawienia witryn > Grafika, a następnie odznacz opcję Pokaż wszystkie (zalecane).

W przeglądarce Firefox opcja wyłączania grafiki jest ukryta. Najpierw wpisz w pasku adresu przeglądarki about:config, następnie odszukaj ustawienie permissions.default.image i naciśnij Enter lub kliknij dwukrotnie, aby zmienić wartość w polu Wartość z 1 na 0.

Instalacja narzędzia Web Developer

Pasek narzędzi Web Developer opracowany przez Chrisa Pedricka dostarcza wielu przydatnych, a czasem niezbędnych podręcznych narzędzi oceny stron internetowych. Można go zainstalować w Chrome, Firefoxie i w Operze. Uruchom przeglądarkę i skorzystaj z jednego z łączy:

• Web Developer dla przeglądarki Chrome
• Web Developer dla przeglądarki Firefox
• Web Developer dla przeglądarki Opera

Po zainstalowaniu dostęp do opcji paska Web Developer uzyskujemy, naciskając ikonę koła zębatego na pasku opcji naszej przeglądarki.

Jeśli chcesz wyłączyć wyświetlanie obrazów, wybierz kolejno opcję Images ('Obrazy'), a następnie Disable Images ('Wyłącz obrazy')

Aby włączyć wyświetlanie tekstów alternatywnych obrazów, wybierz kolejno opcję Images ('Obrazy'), następnie Outline All Images ('Obrysuj wszystkie obrazy') oraz Display Alt Attributes ('Wyświetlaj atrybuty alt').

Lista kontrolna

Oto pytania, które należy zadać, i rzeczy, na które należy zwrócić uwagę:

• Czy treść strony z wyłączonymi obrazami jest równoważna treści z obrazami włączonymi?
• Czy wszystkie istniejące wcześniej informacje są widoczne?
• Czy każdy obraz zawiera atrybut alt z tekstem lub bez tekstu (alt="")?
• Czy teksty alternatywne przekazują to samo znaczenie, funkcję lub kontekst, co opisywane obrazy?
• Czy treść każdego złożonego obrazu (wykresy, infografiki, schematy) jest przedstawiona w tekście lub obok obrazu znajduje się łącze prowadzące do opisującego je tekstu?
• Czy istnieje alternatywna forma CAPTCHA dla każdego testu opartego na obrazkach?

Jeśli na stronie osadzone są multimedia:

• Czy do nagrań zawierających wyłącznie dźwięk dołączono napisy lub transkrypcję?
• Czy do wszystkich nagrań zawierających wyłącznie wideo (ruchomy obraz) dołączono tekst opisujący lub narrację dźwiękową (audiodeskrypcję)?
• Czy do wszystkich nagrań audiowideo dołączono napisy albo transkrypcję?
• Czy napisy są zsynchronizowane z treścią mówioną?
• Czy do filmów dołączona jest narracja dźwiękowa (audiodeskrypcja)?
• Czy napisy, transkrypcja, audiodeskrypcja przekazują informacje niezbędne do zrozumienia treści (kto mówi, istotne dźwięki w tle, opowiadanie istotnych zdarzeń)?
• Czy napisy znajdują się bezpośrednio na filmie lub czy w odtwarzaczu jest kontrolka, która włącza i wyłącza napisy?
• Czy w odtwarzaczu istnieje kontrolka, która włącza wersję alternatywną z opisem dźwiękowym (audiodeskrypcją) lub kontrolka, która włącza i wyłącza opis dźwiękowy?