blog na temat dostępności stron internetowych

Przejdź do głównej treści

Dostępność z klawiatury

Dostęp do każdej treści i zawartych w niej funkcjonalności poprzez klawiaturę jest jednym z podstawowych wymagań dostępności stron internetowych. Większość osób tworzących serwisy internetowe posługuje się na co dzień myszą, i dlatego często zapominają oni o tym, że każdy interaktywny element zamieszczony na stronie musi być również dostępny poprzez klawiaturę.

Dlaczego jest to ważne?

Choć mysz jest bardzo popularnym urządzeniem wejścia, nie wszystkie osoby mogą z niej korzystać. Osoby z niepełnosprawnościami ruchowymi, np. cierpiące na chorobę Parkinsona, czy też porażenie mózgowe, mogą mieć problem z posługiwaniem się myszą. Użytkownicy ci korzystają zatem z alternatywnych urządzeń wejścia, takich jak “mouth stick” (pałeczka sterowana ustami), “head wand” (czyli tzw. różdżka przymocowana do głowy użytkownika), czy też “single switch access” (czyli dostęp za pomocą pojedynczego przycisku – znany fizyk Stephen Hawking używa tego typu urządzenia). Również osoby niewidzące najczęściej korzystają z klawiatury (zwykłej lub brajlowskiej).
Choć urządzenia te różnią się od siebie, ich działanie opiera się na podobnych zasadach. Dlatego też zapewniając dostępność strony poprzez klawiaturę, zapewniamy również dostęp do niej użytkownikom korzystającym z wielu innych, alternatywnych urządzeń wejścia.

Jak sprawdzić, czy strona jest dostępna z klawiatury?

Na szczęście to jeden z najłatwiejszych testów dostępności strony, przeprowadzić go może niemal każdy. Wystarczy odłożyć mysz i spróbować poruszać się po stronie używając klawisza Tab. Naciśnięcie klawisza Tab powoduje przemieszczenie fokusa do kolejnego elementu interaktywnego (dostęp do poprzedniego uzyskuje się przez naciśnięcie kombinacji Shift + Tab). Czy jest możliwe przeniesienie fokusu do każdego odnośnika, przycisku, pola formularzowego i innego rodzaju elementu interaktywnego? Czy jest możliwa obsługa każdego z nich za pomocą klawiatury?

Blog “Internet bez barier” został zbudowany w sposób zapewniający dostęp do wszystkich treści i funkcji zarówno przy użyciu myszy, jak i klawiatury. Dlatego też test tej strony da odpowiedź “tak” na obydwa powyższe pytania.
Proszę jednak spróbować przeprowadzić ten sam test na przykład na stronie http://tadeuszwozniak.pl/ wykonanej w technologii Flash. Szybko okaże się, że do żadnego z elementów interaktywnych nie można dotrzeć przy pomocy klawiatury i cała strona jest kompletnia niedostępna dla osób, które nie używają myszy.

Jak zapewnić dostępność poprzez klawiaturę?

Podstawową techniką jest po prostu używanie prawidłowych elementów HTML do tworzenia elementów interaktywnych, np. <a> do tworzenia odnośnika, czy <button> do tworzenia przycisku. Elementy te z natury są dostępne zarówno przy użyciu myszy jak i klawiatury, i dlatego stosując je nie musimy się martwić o kwestię dostępności poprzez klawiaturę. Ściśle wiąże się to z podstawową (według mnie) zasadą dostępności – stosowania semantycznego HTML.

Niestety wielu deweloperów front-end często upiera się przy tworzeniu interaktywnych komponentów za pomocą elementów, które nie zostały do tego celu stworzone. Na przykład, główna nawigacja strony Polskiej Organizacji Turystycznej (http://www.polska.travel/pl) została stworzona częściowo przy pomocy elementów <span>:

<ul>
  [...]
  <li>
    <span>Regiony i Miasta</span>
    <ul>
      <li><a href="/pl/regiony/strona-2/">Regiony</a></li> 
      <li><a href="/pl/miasta/">Główne miasta</a></li>
      [...]
    </ul>
  </li>
  <li>
    <span>Atrakcje</span>
    <ul>
      <li><a href="/pl/unesco/">Dziedzictwo UNESCO</a></li>
      [...]
    </ul>
  </li>
</ul>
fragment strony Polskiej Organizacji Turystycznej z zaznaczonymi głównymi opcjami menu 'Poznaj Polske', 'Regiony i Miasta', 'Atrakcje', 'Organizacja Podróży' i 'Noclegi'

Główne menu strony Polskiej Organizacji Turystycznej

Gdy użytkownik posługujący się myszą kliknie na jedną z opcji menu (np. “Regiony i Miasta”), w pasku pod menu głównym pojawiają się odnośniki do stron należących do sekcji “Regiony i Miasta”. Ponieważ jednak żaden z głównych elementów menu nie otrzymuje fokusu, wybór opcji przy pomocy klawiatury jest niemożliwy.
Nie wiem, dlaczego twórcy tej strony zdecydowali się na użycie elementu <span> w połączeniu z JavaScript, zamiast posłużyć się właściwym elementem HTML (nawiasem mówiąc, użytkownik, który wyłączył JavaScript w przeglądarce, również nie będzie miał dostępu do głównego menu). Tworząc strony zawsze należy starać się stosować semantycznie poprawne elementy HTML.

Jeśli jednak z jakiegoś powodu absolutnie konieczne jest użycie elementu niesemantycznego w połączeniu z JavaScript do stworzenia elementu interaktywnego, należy bezwzględnie upewnić się, że element ten działa w identyczny sposób jak jego odpowiednik w HTML. A zatem m.in. wszelkie obsługi zdarzeń (z ang. “event handlers”) wyzwalane przez zdarzenia nieklawiaturowe przy pomocy myszy muszą również być powiązane ze zdarzeniami klawiaturowymi. Czyli ilekroć używamy “mousedown”, musimy też użyć “keydown”, dla każdego “mouseup” – “keyup”, “click” – “keypress”, “mouseover” – “focus”, a dla “mouseout” – “blur”.

Często zdarza się, że deweloperzy korzystają z tzw. widgetów stworzonych przez osoby trzecie. W tym wypadku nie zawsze możliwe jest naprawienie błędów związanych z dostępnością istniejących w kodzie napisanym przez kogoś innego (czy to z braku wiedzy, czy też braku czasu). Co wtedy? Jeśli nie istnieje lepsza, dostępna alternatywa tego widgetu, sami nie możemy stworzyć własnego, a użycie go jest konieczne (np. wymagane przez klienta), należy zapewnić alternatywny dostęp do tej samej funkcjonalności czy też treści.
Na przykład, spójrzmy na rezerwacyjny widget zastosowany na stronie hotelu Bristol w Warszawie (http://www.hotelbristolwarsaw.pl/).

formularz rezerwacyjny, pełen opis poniżej

Formularz rezerwacyjny zawierający elementy interaktywne niedostępne dla osób, które nie używają myszy. Zawiera on pola ‘data przyjazdu’, ‘data wyjazdu’, pola służące do wyboru ilości osób, ikonkę ‘?’ oraz przycisk ‘Znajdź najlepszą stawkę’. Obok każdego pola wyboru daty zamieszczone są ikonki kalendarza. Są one zaznaczone na czerwono, podobnie jak ikonka ‘?’

Aby wybrać datę przyjazdu i wyjazdu, użytkownik musi kliknąć na ikonkę kalendarza i wybrać datę. Niestety osoby korzystające z klawiatury nie mają dostępu do kalendarza; kontrolka, która służy do jego otwarcia, jest jedynie elementem <img> (który z natury nie otrzymuje fokusa) z zastosowanym kodem JavaScript:

<img width="20" height="20" border="0" onclick="checkInCal.select($('checkIn'),'checkInTrigger','MM/dd/yyyy')" id="checkInTrigger" title="Select Date" alt="#" src="assets/images/home-new/calendar.png">

Niemożliwość skorzystania z kalendarza nie byłaby tak dużym problemem, gdyby osoby, które nie korzystają z myszy, były w stanie po prostu wpisać datę przyjazdu i wyjazdu w odpowiednie pola formularzowe. Okazuje się jednak, że i to nie jest możliwe. Pola “data przyjazdu” i “data wyjazdu” są wypełniane automatycznie na podstawie wybranej daty z kalendarza, i posiadają atrybut “readonly” uniemożliwiający użytkownikowi wpisanie daty:

<input type="text" onclick="checkOutCal.select($('checkOut'),'checkOutTrigger','MM/dd/yyyy')" readonly="readonly" value="11/11/2014" id="checkOut">

Jest to przykład bardzo złej praktyki: jeśli niemożliwy jest dostęp do kalendarza za pomocą klawiatury, osoby nie korzystające z myszy przynajmniej powinny być w stanie wpisać datę w odpowiednie pole.

Kolejną rzeczą, na którą musimy zwrócić uwagę, to że każda treść udostępniana użytkownikowi, gdy kursor myszy zostanie umieszczony na określonym elemencie strony, musi być również udostępniona, gdy element ten otrzymuje fokus. Przykładu nie musimy szukać daleko: wróćmy do formularza rezerwacyjnego na stronie hotelu Bristol. Gdy kursor myszy zostanie naniesiony na ikonkę “?” na ekranie pojawia się okno z informacją na temat dzieci w pokoju. Jako że element ten został stworzony przy użyciu elementu <span>, który z natury nie otrzymuje fokusu, oraz jako że zostały użyte jedynie obsługi zdarzeń związanych ze zdarzeniami nieklawiaturowymi, osoby, które nie używają myszy, nie mają możliwości dostępu do tej informacji:

<span onmouseout="hideTooltip($(this))" onmouseover="showTooltip($(this));">

Najczęstsze błędy

Podsumowując, najczęściej spotykane problemy z dostępnością poprzez klawiaturę są spowodowane przez:

  • używanie nieprawidłowych elementów HTML do tworzenia elementów interaktywnych (np. <span> zamiast <a> do zamieszczenia odnośnika)
  • stosowanie elementów interaktywnych, które nie otrzymuja fokusu
  • stosowanie elementów interaktywnych, które mogą być obsłużone wyłącznie przy pomocy myszy

Istnieją też inne problemy, które mogą uniemożliwić bądź też znacznie utrudnić osobom używającym klawiaturę korzystanie ze strony internetowej. Należą do nich tzw. “pułapka na klawiaturę”, niewidoczny fokus, czy też nieprawidłowa kolejność fokusa. Te problemy opiszę jednak w odrębnych artykułach.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>