5 kroków do projektowania aplikacji z myślą o dostępności klawiatury

Kiedy myślimy o „przeciętnym” użytkowniku, zwykle wyobrażamy sobie go używającego myszy lub gładzika, gdy jest przy komputerze. Ale co, jeśli ich preferowaną lub jedyną opcją było użycie klawiatury? Czy zastanawiałeś się nad projektowaniem aplikacji z myślą o ułatwieniach dostępu za pomocą klawiatury?

Istnieje wiele powodów, dla których ktoś może nie chcieć lub nie być w stanie obsługiwać myszy lub gładzika w celu korzystania z komputera. Mogą mieć stałe, przewlekłe lub tymczasowe schorzenia, które ograniczają ich zręczność lub kontrolę mięśni, powodując wrażliwość nadgarstków lub dłoni lub utrudniając śledzenie kursora myszy na ekranie. Mogą też być „zaawansowanymi użytkownikami” szukającymi więcej skrótów w celu usprawnienia swoich przepływów pracy. W każdym z tych przypadków klawiatury mogą być preferowanym lub niezbędnym środkiem interakcji z technologią.

Z tego artykułu dowiesz się o wytycznych dotyczących ułatwień dostępu z klawiatury, a także o pięciu krokach, o których należy pamiętać podczas projektowania aplikacji, aby upewnić się, że są one dostępne z klawiatury.

Jak działa dostępność klawiatury?

Jeśli aplikacja jest dostępna z klawiatury, oznacza to, że użytkownicy mogą używać tylko klawiatury do obsługi elementów sterujących . Elementy kontrolne to dowolne interaktywne komponenty na stronie, takie jak przyciski, łącza, dane wejściowe formularzy, filmy i inne treści interaktywne.

Podstawy nawigacji za pomocą klawiatury

Oto kilka podstawowych klawiszy używanych do nawigacji za pomocą klawiatury:

• Przechodzenie do następnego elementu sterującego: Tab (lub klawisz strzałki w prawo lub w dół, aby wyświetlić powiązane przyciski radiowe i wybrać opcje)
• Przechodzenie do poprzedniego elementu sterującego: Shift + Tab (lub klawisz strzałki w lewo lub w górę, aby wyświetlić powiązane przyciski radiowe i wybrać opcje)
• Kliknięcie elementu sterującego: Enter i/lub spacja
• Poruszanie się między powiązanymi przyciskami radiowymi lub wybieranie opcji: Klawisze strzałek

Kolejność ostrości

Kolejność, w jakiej elementy kontrolne mogą reagować na zdarzenia klawiatury, jest nazywana kolejnością fokusów . Gdy element jest aktywny, możesz wchodzić z nim w interakcję za pomocą określonych elementów sterujących klawiatury. Gdy element traci ostrość, staje się rozmyty. Przeglądarki renderują domyślne stany skupienia, aby pomóc użytkownikom śledzić, który element jest aktualnie aktywny.

Może Cię również zainteresować: Uniwersalne projektowanie: 11 praktycznych wskazówek, jak zwiększyć dostępność witryn i aplikacji.

Dostępność klawiatury i wytyczne dotyczące dostępności treści internetowych (WCAG)

Wytyczne dotyczące dostępności treści internetowych (WCAG) określają trzy poziomy zgodności — poziom A, poziom AA i poziom AAA — które zostały przyjęte jako standardy dla regionalnych lub krajowych przepisów dotyczących dostępności sieci na całym świecie.

Dostępność klawiatury jest jednym z kryteriów sukcesu dla poziomu zgodności A. Kryteria poziomu A opisują niezbędne funkcje dla wszystkich treści internetowych. Są również uważane za najłatwiejsze do wdrożenia.

„Dostępność klawiatury jest również łatwa do pomyłki, jeśli nie jesteśmy ostrożni”.

To powiedziawszy, dostępność klawiatury również łatwo się pomylić, jeśli nie będziemy ostrożni. Oto przykłady typowych problemów z ułatwieniami dostępu do klawiatury znalezionych w internecie:

• Niezauważalne stany skupienia
• Nieprawidłowa kolejność ustawiania ostrości
• Interaktywne elementy, na które nie można ustawić ostrości
• Złożone komponenty, które nie wychwytują interakcji z klawiaturą

Na szczęście istnieje wiele technik, których możemy użyć, aby pamiętać o użytkownikach klawiatury i uniknąć popełniania tych błędów w naszych własnych aplikacjach.

5 kroków tworzenia aplikacji dostępnych z klawiatury

1. Projektuj intuicyjne interakcje

Kiedy renderujemy proste elementy sterujące bez dostosowanych zachowań, zwykle możemy wykorzystać ich wbudowane funkcje ułatwień dostępu klawiatury. Ale jeśli nie znamy standardowych zachowań klawiatury związanych z przyciskami, linkami lub danymi wejściowymi, możemy nieumyślnie stworzyć mylące wrażenia dla użytkowników klawiatury.

„Jeśli nie znamy standardowych zachowań klawiatury związanych z przyciskami, linkami lub danymi wejściowymi, możemy nieumyślnie stworzyć mylące wrażenia dla użytkowników klawiatury”.

Na przykład programiści czasami używają CSS, aby ukryć natywne przyciski opcji HTML na rzecz bardziej stylizowanych elementów wizualnych. Nie jest oczywiste, że dane wejściowe są przyciskami radiowymi za kulisami, więc użytkownicy klawiatury mogą nie zdawać sobie sprawy, że powinni używać klawiszy strzałek — a nie klawisza Tab — do przesuwania punktu skupienia między powiązanymi opcjami.

Aby uniknąć tego problemu, powinniśmy wyświetlić coś, co przynajmniej przypomina natywny element HTML, aby zapewnić wizualne wskazówki każdemu, kto chce lub musi z nim korzystać za pomocą klawiatury.

2. Zbuduj swoją aplikację tak, aby klawiatura mogła robić wszystko, co mysz

Uważaj na elementy, które nie są dostarczane z wbudowanymi funkcjami ułatwień dostępu klawiatury. Elementy układu, listy, tabele, nagłówki, akapity i niesemantyczne znaczniki HTML domyślnie nie obsługują skrótów klawiaturowych. A jednak są one często używane do tworzenia bardziej złożonych komponentów, takich jak karty, listy typu „przeciągnij i upuść” lub moduły.

JavaScript umożliwia nam dodawanie detektorów zdarzeń, które sprawiają, że elementy niesterujące reagują na kliknięcia myszką lub gesty. Na przykład w React możemy użyć właściwości onClick , aby dodać interaktywność do elementu listy.

Ilekroć dodamy interaktywność do elementów niesterujących, musimy ustawić ich atrybut tabIndex na 0 . Umożliwi to elementowi otrzymanie fokusu we właściwej kolejności fokusu po naciśnięciu klawisza Tab. Musimy również zaimplementować obsługę zdarzeń naciśnięcia klawisza lub naciśnięcia klawisza, aby rejestrować „kliknięcia” za pomocą klawisza Enter i/lub spacji (łącza można klikać za pomocą obu, podczas gdy przyciski obsługują tylko klawisz Enter).

Możemy uniknąć części tej dodatkowej pracy, używając kontrolek, takich jak znaczniki zakotwiczenia lub elementy przycisków. Zawsze możemy użyć CSS, aby zastąpić domyślne style linków i przycisków oraz sprawić, by element interaktywny obejmował całą szerokość swojego nieinteraktywnego elementu nadrzędnego, aby zmaksymalizować obszar docelowy.

Niezależnie od tego, czy używamy elementów sterujących dla funkcji innych niż natywne, nadal może być konieczne dodanie detektorów zdarzeń dla klawiszy strzałek (do poruszania się między kartami w komponencie karty) lub klawisza Escape (do zamykania nakładki), aby nasz komponent działał 100 procent dostępnej klawiatury.

Jeśli zaimplementujemy niestandardowe zachowanie klawiatury dla bardziej złożonego komponentu, pomocne będzie udostępnienie widocznych instrukcji opisujących elementy sterujące klawiatury, których ludzie mogą używać do interakcji z komponentem.

3. Wykonaj dodatkową pracę nadpisując domyślną kolejność ustawiania ostrości

Kolejność fokusu to kolejny wymóg WCAG, który jest ściśle powiązany z dostępnością klawiatury. Aby spełnić kryteria kategorii A, kolejność fokusów powinna być spójna z wizualną sekwencją interaktywnych elementów na stronie. Użytkownicy klawiatury powinni mieć możliwość poruszania się po elementach sterujących na ekranie od góry do dołu iw tym samym kierunku poziomym, co treść tekstu (od lewej do prawej lub od prawej do lewej).

Najłatwiejszym sposobem spełnienia tego kryterium jest pozostawienie domyślnej kolejności skupienia, która jest określona przez kolejność, w jakiej elementy są ułożone w znacznikach , bez zmian. Ryzykujemy niespełnieniem tego kryterium wprowadzając rozbieżności pomiędzy wizualną kolejnością elementów sterujących a ich rozmieszczeniem w kodzie źródłowym.

Może Ci się również spodobać: Tworzenie dostępnej nawigacji Breadcrumb za pomocą Liquid i Shopify.

Jeśli użyjemy powyższego zrzutu ekranu jako przykładu, załóżmy, że chcemy, aby karta „Aktualizuj tagi” zamieniała się miejscami z kartą „Aktualizuj opis”, gdy układają się w węższe widoczne obszary. Jeśli karty są renderowane jako elementy elastyczne, możemy rozważyć użycie właściwości CSS order w celu zmiany ich kolejności w określonym punkcie przerwania.

Chociaż właściwość order wpływa na wizualną sekwencję elementów elastycznych, nie aktualizuje ich rozmieszczenia w kodzie źródłowym. W rezultacie, gdy użytkownik naciska klawisz Tab, aby przechodzić między poszczególnymi przyciskami, przycisk „Aktualizuj tagi” nadal będzie aktywny przed przyciskiem „Aktualizuj opis”, mimo że są one wyświetlane na ekranie w odwrotnej kolejności. Powoduje to nieoczekiwane przesunięcie punktu ciężkości w górę iw dół strony, powodując dezorientację użytkownika.

Jednym ze sposobów uniknięcia tego problemu jest renderowanie dwóch wersji kart w znacznikach: jednej w kolejności oczekiwanej dla szerszych szerokości rzutni, a drugiej w kolejności wymaganej dla węższych szerokości rzutni. Możemy użyć właściwości display , aby przełączać się między nimi w określonych punktach przerwania.

Jeśli nie chcemy utrzymywać dwóch wersji w znacznikach, będziemy musieli użyć JavaScript, aby zaktualizować atrybuty tabIndex kart podczas ich układania na stronie. W zależności od liczby elementów sterujących, które renderujemy, takie podejście może być trudniejsze do wykonania niż utrzymywanie różnych wersji kart w znacznikach.

4. Dostosowując stany skupienia, projektuj dla użytkowników, którzy najbardziej ich potrzebują

Przeglądarki używają właściwości CSS outline do renderowania wizualnego wskazania, że ​​element jest ostry. Stany skupienia mają na celu pomóc użytkownikom zidentyfikować, który element będzie rejestrował zdarzenia związane z klawiaturą podczas poruszania się po stronie za pomocą klawiatury.

Projektanci i programiści bardzo często zastępują domyślne stany fokusu renderowane przez przeglądarki. Może to wymagać aktualizacji domyślnego outline lub całkowitego usunięcia go i zastąpienia inną właściwością CSS, taką jak background , border , box-shadow , color lub transform .

Może ci się również spodobać: Tworzenie dostępnej strony za pomocą Liquid.

Niezależnie od tego, czy zdecydujemy się renderować niestandardowe stany fokusu w naszych aplikacjach, powinniśmy upewnić się, że spełniają one następujące wymagania dotyczące ułatwień dostępu:

• Wystarczający kontrast kolorów: Kontrast między naszym stanem ostrości a kolorami wokół niego powinien być wystarczający, aby użytkownicy niedowidzący mogli łatwo śledzić, który element jest aktualnie ostry.
• Zmiany koloru są łączone z innymi wskaźnikami wizualnymi: Zmiana koloru obramowania elementu, czcionki lub tła może nie być zauważalna dla użytkowników z daltonizmem. Powinno to być połączone z innymi zmianami wizualnymi, które nie wymagają od użytkowników rozróżniania kolorów. Dotyczy to również stanów najechania kursorem i błędów, które obejmują zmiany koloru.
• Widoczne w motywach o wysokim kontraście: niektóre właściwości CSS, w tym background i box-shadow , są ignorowane, gdy tryb wysokiego kontrastu jest włączony na urządzeniach z systemem Windows. Zmiany w kolorze również mogą nie zostać zarejestrowane, dlatego podwójnie ważne jest poleganie na dodatkowych wskaźnikach, które są dostrzegalne dla osób, które potrzebują większego kontrastu między kolorami tła i pierwszego planu.

Chociaż dopuszczalne jest zastąpienie domyślnej właściwości outline , nigdy nie usuwaj domyślnych stanów fokusu bez podania zamiennika.

5. Zapewnij skróty dla użytkowników klawiatury

Jeśli ktoś używa myszy do poruszania się po stronie internetowej, podczas ładowania strony może przewijać nieistotną zawartość nagłówka, aby dotrzeć do informacji, których szuka. Proces ten nie jest tak usprawniony dla użytkowników klawiatury, którzy mogą potrzebować przejść przez wiele linków nawigacyjnych lub innych elementów kontrolnych, które pojawiają się przed główną zawartością strony.

Jako programiści możemy udostępnić „link do pominięcia” u góry każdej strony w naszej aplikacji, aby umożliwić użytkownikom klawiatury pominięcie elementów kontrolnych poprzedzających główną zawartość strony. Łącze pominięcia jest zazwyczaj ukryte, dopóki nie uzyska fokusu. Nie jest widoczny dla osób używających myszy do interakcji z Twoją aplikacją, ale będzie pierwszym elementem, na który zwróci się uwagę osób korzystających z klawiatury.

Po kliknięciu łącza fokus zostaje przeniesiony do głównego kontenera treści, a użytkownicy klawiatury mogą natychmiast rozpocząć przechodzenie między głównymi elementami kontrolnymi na stronie za pomocą klawiszy Tab.

Pomiń linki to coś więcej niż wygodne skróty. Są przykładem bloków obejściowych, które są wymagane do spełnienia standardów WCAG poziomu A.

Często testuj swoją aplikację, stając się użytkownikiem klawiatury

Testowanie dostępności klawiatury ma stosunkowo mniejszą krzywą uczenia się dla osób, które nie są przyzwyczajone do korzystania z technologii lub urządzeń wspomagających. Wszystko, czego potrzebujesz, to dostęp do klawiatury, znajomość standardowych zachowań klawiatury i dostęp do trybu wysokiego kontrastu systemu Windows (poprzez nabycie urządzenia z systemem Windows lub zainstalowanie maszyny wirtualnej).

Oto kilka pytań, o których warto pamiętać podczas testowania naszej aplikacji pod kątem dostępności klawiatury:

• Czy mogę używać klawiatury do interakcji ze wszystkim, co reaguje na kliknięcia myszą i gesty?
• Czy ktoś będzie wiedział, jak wchodzić w interakcje z tym elementem, gdy otrzyma fokus?
• Czy kolejność fokusu jest zgodna z wizualną sekwencją interaktywnych elementów na stronie?
• Czy mogę śledzić, który element jest aktualnie ostry, nawet jeśli wymagam większego kontrastu między kolorami?
• Czy mogę łatwo przejść do głównej zawartości strony?

Odpowiedź „tak” na wszystkie te pytania nie musi wymagać dużego wysiłku i może mieć pozytywne skutki dla użytkowników w każdych okolicznościach: niezależnie od tego, czy są niepełnosprawni fizycznie, szukają sposobów na zaoszczędzenie czasu, czy też potrzebują swój komputer jedną ręką.

Testy dostępności to kluczowy element tworzenia aplikacji. W szczególności dostępność klawiatury jest tak samo ważna jak zapewnienie tekstu alternatywnego osobom korzystającym z czytników ekranu lub podpisów osobom, które nie słyszą treści audio. Ostatecznie umiejętność korzystania z myszy nie powinna być wymagana do korzystania z aplikacji, jeśli chcesz, aby Twoja aplikacja była w pełni dostępna.