Funkcjonalność · Poziom A

2.1.1 Klawiatura

Wszystko, co da się zrobić myszą, powinno dać się obsłużyć także klawiaturą.

Krótko

Wszystko, co da się zrobić myszą, powinno dać się obsłużyć także klawiaturą.

Problem w praktyce

Użytkownik nie korzysta z myszy. Jeśli menu, przycisk, karuzela, modal, filtr albo formularz działa tylko po kliknięciu myszą, użytkownik nie może wykonać zadania.

To kryterium dotyczy dostępu do funkcji z klawiatury. Nie ocenia jeszcze, czy kolejność fokusu jest idealna, czy fokus jest widoczny albo czy da się wyjść z każdego komponentu bez pułapki.

Kogo to dotyczy

  • Osób z niepełnosprawnościami ruchowymi.
  • Osób niewidomych korzystających z czytników ekranu.
  • Osób słabowidzących.
  • Osób korzystających z przełączników i alternatywnych urządzeń wejścia.
  • Użytkowników zaawansowanych, którzy pracują szybciej klawiaturą.

Dobry przykład

  • Przyciski są elementami <button>.
  • Linki są elementami <a href="...">.
  • Menu można obsłużyć Tab, Enter, Space i Escape, jeśli dotyczy.
  • Modal można otworzyć, obsłużyć i zamknąć klawiaturą.
  • Formularz da się wypełnić i wysłać bez myszy.

Zły przykład

  • Klikany <div> bez obsługi klawiatury.
  • Element działa tylko na hover.
  • Przycisk jest ikoną bez natywnej kontrolki.
  • Karuzela działa tylko gestem myszy.
  • Menu mobilne nie otwiera się z klawiatury.
  • Niestandardowy checkbox nie reaguje na Space.

Przykłady kodu

Dobry przycisk

Natywny button działa z klawiatury bez dodatkowego JavaScriptu.

Kod — HTML

<button type="button">
  Pokaż szczegóły
</button>

Zły przykład: div z onclick udający przycisk

To wygląda jak przycisk i reaguje na kliknięcie myszą, ale nadal jest zwykłym divem. Nie jest domyślnie fokusowalny i nie ma natywnej obsługi Enterem ani Spacją.

Kod — HTML

<div
  class="button-like"
  onclick="showDetails()"
>
  Pokaż szczegóły
</div>

Dlaczego to problem

Ten element może wyglądać jak przycisk i reagować na kliknięcie myszą, ale nadal jest zwykłym divem. Nie trafia domyślnie do kolejności fokusu i nie ma natywnej obsługi Enterem ani Spacją. Użytkownik klawiatury może nie mieć dostępu do tej funkcji.

Dlaczego ARIA nie wystarczy?

Czasem ktoś próbuje naprawić taki element przez dodanie roli przycisku i możliwości fokusu. To może przybliżyć element do poprawnego wzorca, ale nadal wymaga ręcznego odtworzenia zachowania natywnego przycisku.

Ryzykowny kierunek: ręczne naprawianie diva

role="button" mówi technologiom wspomagającym, że element ma być traktowany jak przycisk. tabindex="0" pozwala wejść na element Tabem. Ale to nadal nie dodaje automatycznie obsługi Spacji i Entera tak jak natywny button.

Kod — HTML

<div
  role="button"
  tabindex="0"
  onclick="showDetails()"
  onkeydown="handleButtonKeydown(event)"
>
  Pokaż szczegóły
</div>

Dlaczego to ryzykowne

Da się to naprawiać ręcznie, ale łatwo popełnić błąd. Trzeba pamiętać o roli, fokusie, obsłudze Entera i Spacji oraz stanie komponentu.

Najbezpieczniej: natywny button

Jeśli element ma działać jak przycisk, najprościej i najbezpieczniej użyć <button>.

Kod — HTML

<button type="button">
  Pokaż szczegóły
</button>

Dlaczego to dobre

Natywny button ma właściwą rolę, trafia do kolejności fokusu i obsługuje klawiaturę bez ręcznego odtwarzania zachowania przycisku.

Dobry kierunek dla linku

Jeśli element prowadzi do innego adresu, użyj linku. Jeśli wykonuje akcję na stronie, użyj przycisku.

Kod — HTML

<a href="/kontakt">
  Kontakt
</a>

Przykład graficzny

To proste demo edukacyjne pokazuje różnicę między atrapą przycisku, prawdziwym przyciskiem i prawdziwym linkiem. Button służy do akcji, a link do przejścia. Użyj Tab, Enter i Spacji, żeby sprawdzić obsługę klawiaturą.

Źle

Pokaż szczegóły

To makieta złego wzorca. Wizualnie wygląda jak przycisk i w kodzie może mieć onclick, ale jako zwykły div nie trafia domyślnie do kolejności fokusu. Użytkownik klawiatury może nie osiągnąć go Tabem.

Dobrze

Ten przycisk jest natywnym elementem HTML. Można go aktywować myszą, Enterem albo Spacją.

Komunikat pojawi się po aktywacji przycisku.

Przejdź do notatki o linku

Ten link prowadzi do konkretnego miejsca na tej samej stronie. Link służy do przejścia, a button do wykonania akcji.

Sprawdź

  • Tab
  • Shift+Tab
  • Enter
  • Space
  • Escape
To proste demo nie jest pełnym komponentem aplikacji. W złym przykładzie problem nie polega na wyglądzie. Problem polega na tym, że element wygląda jak przycisk, ale w kodzie nie jest natywną kontrolką.

Jak sprawdzić

  1. Odłóż mysz.
  2. Przejdź stronę klawiszami Tab i Shift+Tab.
  3. Aktywuj elementy klawiszami Enter i Space.
  4. Sprawdź menu, formularze, modale, karuzele, filtry i zakładki.
  5. Sprawdź, czy da się wykonać wszystkie zadania.
  6. Nie oceniaj wyłącznie automatem. To kryterium wymaga testu manualnego.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • Część elementów interaktywnych bez roli albo nazwy.
  • Niektóre klikane elementy bez semantyki.
  • Część problemów z formularzami i linkami.

Automat nie oceni pewnie

  • Czy wszystkie funkcje da się realnie wykonać bez myszy.
  • Czy niestandardowy komponent ma kompletną obsługę klawiaturą.
  • Czy karuzela, filtr albo modal działa w całym przepływie zadania.

Typowe błędy

  • Klikane div i span zamiast przycisków.
  • Menu dostępne tylko po najechaniu myszą.
  • Ikony działające jak przyciski, ale bez natywnej kontrolki.
  • Niestandardowe checkboxy i przełączniki bez obsługi Space.
  • Karuzele, mapy i filtry obsługiwane tylko myszą.