Używaj semantycznego kodu HTML, aby łatwiej korzystać z klawiatury

Rob Dodson

Korzystając z odpowiednich semantycznych elementów HTML, możesz zaspokoić większość lub wszystkie potrzeby związane z dostępem za pomocą klawiatury. Oznacza to, że nie musisz tracić czasu na zabawę z elementem tabindex, a użytkownicy będą szczęśliwsi.

Bezpłatna obsługa klawiatury (i lepsze wrażenia z korzystania z aplikacji mobilnych)

Dostępnych jest wiele wbudowanych elementów interaktywnych z odpowiednią semantyką i obsługą klawiatury. Najczęściej używane są:

Ponadto elementy z atrybutem contenteditable są czasami używane do wpisywania tekstu niesformatowanego.

Łatwo można przeoczyć wbudowane wsparcie dla klawiatury, które oferują te elementy. Poniżej znajdziesz kilka przykładowych elementów. Zamiast myszy spróbuj użyć klawiatury. Możesz używać klawisza TAB (lub SHIFT + TAB) do przełączania się między elementami sterującymi, a klawiszy strzałek i klawiszy takich jak ENTER i SPACE do zmiany ich wartości.

Jeśli masz pod ręką telefon, możesz zauważyć, że te wbudowane elementy mają wiele unikalnych interakcji na urządzeniach mobilnych. Samodzielne odtworzenie tych interakcji mobilnych wymaga dużo pracy. To kolejny dobry powód, dla którego warto korzystać z wbudowanych elementów.

Użyj button zamiast div.

Typowym błędem utrudniającym dostępność jest traktowanie elementów nieinterakcyjnych, takich jak div lub span, jako przycisków przez dodanie do nich obsługi kliknięcia.

Aby przycisk był uznawany za dostępny, powinien:

  • można zaznaczyć za pomocą klawiatury;
  • Wyłączenie obsługi
  • Obsługa klawiszy ENTER lub SPACE do wykonywania czynności
  • być prawidłowo odczytywane przez czytnik ekranu;

Przycisk div nie ma żadnego z tych elementów. Oznacza to, że musisz napisać dodatkowy kod, aby odtworzyć to, co element button oferuje bezpłatnie.

Na przykład elementy button mają sprytny trik zwany *syntetyczną aktywacją kliknięcia*. Jeśli dodasz do elementu button element obsługi kliknięcia, będzie on wykonywany, gdy użytkownik naciśnie przycisk ENTER lub SPACE. Przycisk div nie ma tej funkcji, więc musisz napisać dodatkowy kod, aby nasłuchiwać zdarzenia keydown, sprawdzić, czy kod klucza to ENTER lub SPACE, a następnie uruchomić moduł obsługi kliknięcia. Ała! To dużo dodatkowej pracy.

Porównaj różnicę w tym przykładzie. TAB, aby je kontrolować, oraz ENTER i SPACE, aby spróbować je kliknąć.

Jeśli w swojej witrynie lub aplikacji masz przyciski div, rozważ zastąpienie ich elementami button. button jest łatwy do spersonalizowania i zawiera wiele funkcji ułatwień dostępu.

Innym częstym błędem jest traktowanie linków jak przycisków poprzez dołączanie do nich kodu JavaScript.

<a href="#" onclick="// perform some action">

Zarówno przyciski, jak i linki obsługują pewną formę aktywacji kliknięcia syntetycznego. Które środowisko sprawdzi się w Twoim przypadku?

  • Jeśli kliknięcie elementu spowoduje wykonanie działania na stronie, użyj <button>.
  • Jeśli kliknięcie elementu przekieruje użytkownika na nową stronę, użyj <a>. Dotyczy to aplikacji internetowych jednostronicowych, które wczytują nowe treści i zmieniają adres URL za pomocą interfejsu History API.

Wynika to z tego, że czytniki ekranu inaczej odczytują przyciski i linki. Użycie odpowiedniego elementu pomaga użytkownikom czytników ekranu zrozumieć, jakiego wyniku się spodziewać.

TODO: DevSite – Think and Check assessment

Styl

Niektóre wbudowane elementy, zwłaszcza <input>, mogą być trudne do sformatowania. Dzięki sprytnemu wykorzystaniu usługi porównywania cen możesz obejść niektóre z tych ograniczeń. Projekt (o zabawnej nazwie) WTFForms zawiera przykład, który pokazuje kilka technik stylizacji niektórych trudniejszych w obsłudze elementów wbudowanych.

Dalsze kroki

Zastosowanie wbudowanych elementów HTML może znacznie poprawić dostępność witryny i znacznie zmniejszyć nakład pracy. Spróbuj przewijać stronę za pomocą klawisza tabulacji i szukać elementów sterujących, które nie obsługują klawiatury. Jeśli to możliwe, zastąp je standardowymi alternatywami w kodzie HTML.

Czasami możesz znaleźć element, który nie ma odpowiednika w kodzie HTML. Nie ma w tym nic złego. Czytaj dalej, aby dowiedzieć się, jak dodać obsługę klawiatury do niestandardowych interaktywnych elementów sterujących za pomocą tabindex.