Wróć do wszystkich kryteriów

2.1.4 Skróty klawiszowe (ang.) Character Key Shortcuts

Specjalizacje:

  • Deweloper

Elementy:

  • Cała strona / widok
  • Przyciski i kontrolki

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Głównym założeniem tej wytycznej jest zapewnienie użytkownikom pełnej kontroli nad interfejsem i wyeliminowanie ryzyka przypadkowego wywołania akcji. Dotyczy to sytuacji, w których aplikacja reaguje na naciśnięcie pojedynczego klawisza (litery, cyfry lub symbolu) bez konieczności użycia klawiszy modyfikujących, takich jak Ctrl lub Alt .

    Pamiętaj, że dla wielu osób takie skróty są przeszkodą, a nie ułatwieniem. Celem jest uniknięcie konfliktów z technologiami wspomagającymi oraz ochrona użytkowników przed nieoczekiwanymi skutkami drobnych pomyłek podczas pisania lub obsługi komputera głosem.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#character-key-shortcuts

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#jednoznakowe-skroty-klawiaturowe

    Słownik pojęć

    Skrót jednoznakowy
    –

    Mechanizm, w którym naciśnięcie samej litery (np. „s”) powoduje wykonanie konkretnej funkcji w systemie.

    Klawisze modyfikujące
    –

    Klawisze Shift, Ctrl, Alt lub Command, które w połączeniu z innym znakiem tworzą bezpieczniejszą kombinację

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy sterujący głosem: To grupa najbardziej narażona. Ponieważ oprogramowanie do rozpoznawania mowy działa zazwyczaj w trybie mieszanym (dyktowanie + komendy), przypadkowe słowo może zostać zinterpretowane jako „seria” skrótów klawiszowych, co prowadzi do niekontrolowanych działań w aplikacji.
    • Osoby z niepełnosprawnością ruchową: Użytkownicy z drżeniem rąk lub ograniczoną precyzją mogą omyłkowo nacisnąć klawisz, co bez odpowiednich zabezpieczeń doprowadzi do niechcianych zmian na stronie.
    • Użytkownicy czytników ekranu: Wiele technologii wspomagających (np. NVDA) wykorzystuje pojedyncze klawisze do nawigacji po strukturze strony (np. „h” dla nagłówków). Skróty witryny mogą kolidować z tymi komendami.
    • Użytkownicy z zaburzeniami poznawczymi: Możliwość przemapowania skrótów pozwala im na ujednolicenie obsługi różnych aplikacji, co zmniejsza obciążenie poznawcze.

    Zasady wdrażania i wymagania techniczne

    Jeśli Twoja strona implementuje skróty jednoznakowe, musisz zapewnić co najmniej jedno z poniższych rozwiązań:

    1. Wyłączenie ((ang.) Turn off): Użytkownik musi mieć możliwość całkowitej dezaktywacji skrótów jednoznakowych.
    2. Przemapowanie ((ang.) Remap): Umożliwienie użytkownikowi dodania klawisza modyfikującego do istniejącego skrótu (np. zmiana „S” na Ctrl + S).
    3. Aktywność tylko przy fokusie ((ang.) Active only on focus): Skrót może działać bez zmian, pod warunkiem, że jest aktywny wyłącznie wtedy, gdy konkretny komponent (np. odtwarzacz wideo) posiada fokus.

    Wyjątki i sytuacje szczególne

    • Komponenty interfejsu: Kryterium nie dotyczy standardowych list rozwijanych czy menu, gdzie naciśnięcie litery pozwala przeskoczyć do elementu na liście – te mechanizmy działają tylko przy aktywnym fokusie na danym komponencie.
    • Klawisze dostępu ((ang.) Access keys): Zazwyczaj nie są objęte tym kryterium, ponieważ przeglądarki domyślnie wymagają dla nich użycia klawiszy modyfikujących (np. Alt + [klawisz]).

    Przykłady implementacji

    Najczęstsze błędy

    • F99: Implementacja skrótów jednoznakowych (lub ich sekwencji), których nie da się wyłączyć ani zmienić w ustawieniach aplikacji.
    • Brak blokowania skrótów globalnych, gdy użytkownik znajduje się w polu edycji tekstu.
    • Brak informacji dla użytkownika o istnieniu takich skrótów, co uniemożliwia im świadome zarządzanie dostępnością.
    • Tworzenie skrótów kolidujących z domyślnymi funkcjami przeglądarki lub systemu operacyjnego.
    • Brak udostępnienia panelu konfiguracji, w którym użytkownik mógłby zarządzać skrótami.

    Najlepsze praktyki

    • Wzoruj się na liderach: Aplikacje takie jak Gmail oferują dedykowane panele ustawień skrótów klawiaturowych.
    • Unikaj konfliktów: Nie twórz skrótów, które mogą nadpisywać standardowe funkcje przeglądarki lub popularnych czytników ekranu.
    • Informacja zwrotna: Po użyciu skrótu (jeśli nie jest on oczywisty), warto przekazać użytkownikowi potwierdzenie wykonania akcji (np. poprzez aria-live).
    • Jasna dokumentacja: Przygotuj czytelną i łatwo dostępną dokumentację wszystkich dostępnych skrótów klawiszowych w sekcji pomocy.
    • Testuj rozwiązania: Pamiętaj o testach użyteczności z udziałem osób korzystających z technologii wspomagających.

    Metody testowania

    • Testowanie manualne: Spróbuj obsłużyć stronę wyłącznie klawiaturą. Sprawdź, czy podczas wpisywania danych do formularza nie dochodzi do przypadkowego przełączania widoków lub uruchamiania funkcji aplikacji.
    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź w kodzie JavaScript (zdarzenia keydown), czy skróty są blokowane w momencie, gdy fokus znajduje się wewnątrz elementów edytowalnych <input> lub <textarea>.
    • NVDA: Uruchom czytnik ekranu i zweryfikuj, czy skróty zdefiniowane na stronie nie blokują standardowych klawiszy nawigacyjnych czytnika (np. skrótów do nagłówków czy tabel).
    • Testowanie manualne: Odłóż mysz i sprawdź, czy możesz przejść przez wszystkie interaktywne elementy za pomocą klawiszy Tab oraz Shift + Tab i czy zawsze masz drogę wyjścia.
    • NVDA: Uruchom czytnik ekranu i zweryfikuj, czy słyszysz instrukcje dotyczące obsługi złożonych komponentów i wyjścia z nich.
    • ANDI.js: Wykorzystaj moduł (ang.) „Tab Order”, aby sprawdzić, czy ścieżka nawigacji nie wpada w nieskończoną pętlę bez możliwości wyjścia.
    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź w drzewie DOM, czy skrypty obsługujące zdarzenia klawiatury (np. onkeydown) nie blokują domyślnego zachowania przeglądarki w sposób uniemożliwiający nawigację.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 przykładów implementacji skrótów klawiszowych. Twoim zadaniem jest sprawdzenie, czy są one zgodne z kryterium 2.1.4.

    Jak to sprawdzić?

    1. Naciśnij przypisany klawisz (np. M, P, S) i zobacz, czy akcja się wykona.
    2. Sprawdź, czy skrót działa globalnie (zawsze), czy tylko po sfokusowaniu konkretnego elementu.
    3. Sprawdź, czy istnieje możliwość wyłączenia skrótu lub jego zmiany.
    4. Spróbuj wpisać tekst w pola formularza i zaobserwuj, czy skróty nie przeszkadzają w pisaniu.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura, Narzędzie deweloperskie (ang.) Developer Tools, NVDA

    Link: https://pdc.ambiscale.com/training/wcag-2-1-4/

    #1 BŁĄD

    Problem: Skrót „M” działa globalnie i nie można go wyłączyć ani zmienić.
    Dlaczego: Użytkownicy programów do rozpoznawania mowy mogą przypadkowo wyciszyć dźwięk wypowiadając słowo zawierające literę „m”.
    Naprawa: Dodaj opcję wyłączenia skrótu, możliwość jego zmiany na kombinację z klawiszem modyfikującym (np. Ctrl+M) lub ogranicz jego działanie tylko do momentu, gdy odtwarzacz ma fokus.

    #2 DOBRZE

    Dlaczego: Skrót „P” działa globalnie, ale użytkownik ma możliwość jego wyłączenia za pomocą checkboxa. Spełnia to warunek „Wyłączenie (Turn off)” kryterium 2.1.4.

    #3 DOBRZE

    Dlaczego: Skrót „F” działa tylko wtedy, gdy odtwarzacz posiada fokus. Spełnia to warunek „Aktywność tylko przy fokusie (Active only on focus)”. Użytkownik nie wywoła akcji przypadkowo, nawigując po innej części strony.

    #4 BŁĄD

    Problem: Skrót „S” działa globalnie i nie sprawdza, czy użytkownik znajduje się w polu tekstowym.
    Dlaczego: Próba wpisania litery „s” w polu formularza powoduje wywołanie akcji (zapisanie) zamiast (lub oprócz) wpisania litery. Jest to bardzo uciążliwe i uniemożliwia normalne korzystanie z formularzy.
    Naprawa: Skróty globalne powinny być blokowane, gdy fokus znajduje się w polach edytowalnych (input, textarea), a dodatkowo musi istnieć opcja ich wyłączenia lub zmiany.

    #5 DOBRZE

    Dlaczego: Użytkownik ma możliwość zmiany domyślnego skrótu jednoznakowego na kombinację z klawiszem modyfikującym (np. Ctrl + F). Spełnia to warunek „Przemapowanie (Remap)” kryterium 2.1.4.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów