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

Rob Dodson

Dzięki właściwym semantycznym elementom HTML będziesz w stanie zaspokoić większość lub wszystkie potrzeby związane z dostępem do klawiatury. To oznacza mniej czasu na zajmowanie się usługą tabindex i więcej zadowolonych użytkowników.

Bezpłatna obsługa klawiatury (i wygodniejsza obsługa na urządzeniach mobilnych).

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

Poza tym elementy z atrybutem contenteditable są czasem używane do wpisywania dowolnego tekstu.

Można nie zauważyć wbudowanej klawiatury, którą zapewniają te elementy. Poniżej znajdziesz przykładowe elementy, z którymi możesz się zapoznać. Zamiast używać myszy, spróbuj sterować nimi za pomocą klawiatury. Do poruszania się między elementami sterującymi możesz używać TAB (lub SHIFT + TAB), a za pomocą klawiszy strzałek i klawiszy strzałek, takich jak ENTER czy SPACE, możesz zmieniać ich wartości.

Jeśli masz pod ręką telefon, możesz zobaczyć, że na urządzeniach mobilnych te wbudowane elementy często mają unikalne interakcje. Próba odtworzenia tych interakcji na urządzeniach mobilnych to ciężka praca. To kolejny dobry powód, by w miarę możliwości korzystać z elementów wbudowanych.

Używaj button zamiast div

Typowym elementem antyplagiatowym ułatwień dostępu jest traktowanie elementu nieinteraktywnego, takiego jak div czy span, jako przycisku przez dodanie do niego modułu obsługi kliknięcia.

Aby przycisk został uznany za dostępny, powinien:

  • umożliwia sterowanie za pomocą klawiatury;
  • Wyłączam pomoc
  • Aby wykonać działanie, użyj klawiszy ENTER lub SPACE.
  • być poprawnie odczytywane przez czytnik ekranu;

Przycisk div nie ma żadnej z tych informacji. Oznacza to, że musisz napisać dodatkowy kod, który pozwoli Ci bezpłatnie odtworzyć to, co daje Ci element button.

Na przykład elementy button działają w sposób nazywany *aktywacją kliknięć syntetycznych*. Jeśli dodasz do elementu button moduł obsługi kliknięcia, będzie on uruchamiany, gdy użytkownik naciśnie ENTER lub SPACE. Przycisk div nie ma tej funkcji. Aby go nasłuchiwać, musisz napisać dodatkowy kod, który będzie nasłuchiwać zdarzenia keydown, sprawdzić, czy kod klucza to ENTER lub SPACE, a potem uruchomić moduł obsługi kliknięć. Ała! To sporo dodatkowej pracy.

Porównaj różnice w tym przykładzie. TAB, aby je kontrolować, a także ENTER i SPACE, aby spróbować je kliknąć.

Jeśli masz przyciski div w istniejącej witrynie lub aplikacji, rozważ zastąpienie ich elementami button. Projekt button ma prosty styl i wiele korzyści z ułatwień dostępu.

Kolejną często spotykaną metodą antywzorową jest traktowanie linków jako przycisków przez powiązanie z nimi działania JavaScriptu.

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

Zarówno przyciski, jak i linki obsługują jakąś formę aktywacji syntetycznego kliknięcia. Którą z nich należy wybrać?

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

Dzieje się tak, ponieważ czytniki ekranu inaczej odczytują przyciski i linki. Użycie odpowiednich elementów pomaga użytkownikom czytnika ekranu wiedzieć, czego mogą się spodziewać.

DO ZROBIENIA: DevSite – ocena „Think and Check”

Styl

Określenie stylu niektórych wbudowanych elementów (w szczególności <input>) może być trudne. Dzięki technikom CSS możesz ominąć niektóre z tych ograniczeń. Projekt WTFForms (zabawnie nazywaną) zawiera przykładowy arkusz stylów, który prezentuje szereg technik stylizacji trudniejszych elementów wbudowanych.

Dalsze kroki

Zastosowanie wbudowanych elementów HTML może znacznie zwiększyć dostępność witryny i znacznie ograniczyć obciążenie pracą. Przeglądając witrynę za pomocą klawisza Tab, sprawdź, czy nie działają opcje z klawiatury. W miarę możliwości wymieniaj je i wymieniaj na standardowe wersje HTML.

Czasami może się zdarzyć, że jakiś element 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 elementów sterujących interaktywnych za pomocą tabindex.