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

Rob Dodson

Dzięki użyciu odpowiednich semantycznych elementów HTML możesz zaspokoić większość lub wszystkie swoje 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 wygodniejsze korzystanie z komórek)

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. Do przełączania się między elementami sterującymi używaj TAB (lub SHIFT + TAB), a do sterowania ich wartościami możesz używać klawiszy strzałek i klawiszy takich jak ENTER czy SPACE.

Jeśli masz pod ręką telefon, możesz zauważyć, że te wbudowane elementy mają wiele unikalnych interakcji na urządzeniach mobilnych. Samodzielne odtwarzanie tych interakcji na urządzeniach mobilnych wymaga mnóstwa 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 ułatwiający dostęp:

  • można zaznaczyć za pomocą klawiatury;
  • Wyłączenie obsługi
  • Obsługuj klawisze ENTER lub SPACE, aby wykonać działanie
  • być prawidłowo odczytywane przez czytnik ekranu;

Przycisk div nie zawiera ż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ęcie”, 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, by nasłuchiwać zdarzenia keydown, sprawdzić, czy kod klucza to ENTER lub SPACE, a potem uruchomić moduł obsługi kliknięć. 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 istniejącej witrynie lub aplikacji masz przyciski div, rozważ ich zamianę na elementy button. button jest łatwy do stylu i zapewnia wiele ułatwień dostępu.

Innym typowym wzorcem antyspamowym 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ęć syntetycznych. 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 tego elementu spowoduje przekierowanie użytkownika na nową stronę, użyj właściwości <a>. Dotyczy to aplikacji internetowych jednostronnych, 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ć, czego się spodziewać.

DO ZROBIENIA: DevSite – test Think and Check

Styl

Niektóre wbudowane elementy, zwłaszcza <input>, mogą być trudne do sformatowania. Dzięki sprytnemu użyciu 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

Korzystanie z 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 swojego 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ą elementu tabindex.