Używanie semantycznego HTML-a, aby ułatwić korzystanie 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 tabindex, a użytkownicy będą bardziej zadowoleni.

Bezpłatna obsługa klawiatury (i lepsza obsługa mobilna)

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

Poza tym 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żywać klawiatury. Aby przełączać się między elementami sterującymi, możesz używać klawisza TAB (lub SHIFT + TAB). Aby zmieniać ich wartości, możesz używać klawiszy strzałek oraz klawiszy takich jak ENTER i 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 odtworzenie tych interakcji mobilnych wymaga sporo 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 elementu nieinterakcyjnego, takiego jak div lub span, jako przycisku przez dodanie do niego 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 działań
  • 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óżnice 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łatwiających dostępność.

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 tagu <button>.
  • Jeśli kliknięcie elementu przekieruje użytkownika na nową stronę, użyj elementu <a>. Dotyczy to aplikacji internetowych jednostronicowych, które wczytują nowe treści i zaktualizują 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ć.

TODO: DevSite – Think and Check assessment

Styl

Niektóre wbudowane elementy, zwłaszcza <input>, mogą być trudne do sformatowania. Dzięki sprytnemu wykorzystaniu CSS 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. Przechodź po swojej witrynie za pomocą klawisza tabulacji i sprawdź, czy nie ma w niej 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.