2.1.1 Klawiatura (A) - WCAG 2.0

Każdy element serwisu, każda jego funkcjonalność powinna być dostępna przy użyciu klawiatury, za wyjątkiem tych, które konwencjonalnie nie mogą być wykonane klawiaturą (np. rysunek odręczny).
Użyte skróty klawiaturowe (accesskeys) nie powinny wchodzić w konflikt z istniejącymi w przeglądarce czy programie czytającym. Nie  zaleca się stosowania własnych skrótów klawiaturowych (accesskeys).

Spełnienie wymagań tego punktu będzie szczególnie ważne dla użytkowników niewidomych, korzystających tylko z klawiatury lub użytkowników z zaburzeniami koordynacji ruchowej czy niewydolności mięśniowej górnych partii ciała. Przykładów i sytuacji, które mogą wymagać użycia klawiatury jest oczywiście więcej i dotyczą każdego użytkownika, np. korzystanie z terminala z dostępem do Internetu bez myszki.

Musimy zadbać przede wszystkim o to, aby każdy element aktywny był przedstawiony za pomocą jego semantycznego odpowiednika HTML :

  • dla linków: <a> - znacznik powinien zawierać atrybut href
  • dla pól formularzy - <input>, <select>, <button>, itp.

Szczególną uwagę należy zwrócić na wykonywanie zdarzeń typu: onclick, onmouseover, itp.

Przyjrzyjmy się obsłudze zdarzenia onclick. Jest ono wyzwalane wówczas, gdy na elemencie HTML przycisk myszy zostanie naciśnięty. Zdarzenie jest zależne od urządzenia – myszy. Jednak, jeśli zdarzenie onclick jest używane wraz z hiperłączami lub polami formularza, to przeglądarki i technologie wspomagające zinterpretują je, jako naciśnięcie klawisza Enter. W tych przypadkach zdarzenie onclick nie jest zależne od urządzenia.

Należy jednak unikać wykonywania zdarzeń na elementach nieaktywnych. Poniższy przykład obrazuje sytuację, w której element nie będzie obsłużony z klawiatury, ponieważ warstwa <div> nie jest elementem aktywnym (nie można go wybrać np. przy pomocy klawisza Tab), a co za tym idzie zdarzenie onclick nie zostanie wywołane.

Przykład niepoprawnego użycia:
<div onclick=”pokaz_wyniki();”>Pokaż wyniki</div>

Zamiast powyższego można zastosować:

<a href=”#” onclick=”pokaz_wyniki();”>Pokaż wyniki</a>

<a href="wyniki.htm" onclick="pokaz_wyniki();">Pokaż wyniki</a>

<form action="wyniki.php" onsubmit="return false;">
<input type="submit" value="Pokaż wyniki" onclick=" pokaz_wyniki();" />
</form>

Powrót do: Wytyczna 2.1 Dostępność przy pomocy klawiatury