WCAG 2.1.4: Skróty klawiszowe jednoznakowe

WCAG 2.1.4: Skróty klawiszowe jednoznakowe

Kryterium sukcesu WCAG 2.1.4, zatytułowane „Skróty klawiszowe jednoznakowe” (ang. Character Key Shortcuts), dotyczy sposobów, w jakie skróty klawiszowe aktywowane pojedynczymi znakami są implementowane na stronach internetowych i w aplikacjach. Jego głównym celem jest zapobieganie przypadkowemu uruchomieniu funkcji oraz konfliktom z innymi metodami wprowadzania danych, takimi jak czytniki ekranu czy oprogramowanie do rozpoznawania mowy.

Kryterium to wymaga, aby wszelkie funkcje, które są aktywowane przez naciśnięcie pojedynczego znaku (litery, cyfry, symbolu lub znaku interpunkcyjnego) bez klawiszy modyfikujących (takich jak Ctrl, Alt, Shift), były obsługiwane w jeden z trzech dopuszczalnych sposobów:

• Wyłączenie: Użytkownik ma możliwość wyłączenia skrótu.
• Modyfikacja/Przemapowanie: Użytkownik ma możliwość zmiany klawisza aktywującego na inny (np. z 's' na 'z') lub na kombinację klawiszy (np. z 's' na Ctrl+S).
• Aktywne tylko przy fokusie: Skrót działa tylko wtedy, gdy konkretny element interfejsu użytkownika, dla którego jest przeznaczony, ma fokus (np. skrót 's' działa tylko, gdy przycisk 'Zapisz' ma fokus, a nie wtedy, gdy użytkownik pisze w polu tekstowym).

Czym jest kryterium 2.1.4 i dlaczego jest ważne?

Wiele stron internetowych i aplikacji internetowych wykorzystuje skróty klawiszowe, aby przyspieszyć nawigację lub dostęp do funkcji. Jednak skróty aktywowane pojedynczymi znakami bez klawiszy modyfikujących (np. Ctrl, Alt, Shift) mogą stwarzać poważne problemy z dostępnością. Przykładem jest sytuacja, gdy naciśnięcie litery 's' globalnie zapisuje dokument, nawet gdy użytkownik wpisuje tekst w polu tekstowym.

To kryterium ma kluczowe znaczenie dla następujących grup użytkowników:

• Użytkownicy z niepełnosprawnością ruchową: Osoby, które mogą mieć trudności z precyzyjnym naciskaniem klawiszy lub mogą doświadczać drżenia, są bardziej narażone na przypadkowe naciśnięcie klawisza i uruchomienie niechcianej funkcji.
• Użytkownicy wprowadzający mowę: Osoby korzystające z oprogramowania do rozpoznawania mowy, aby wprowadzać tekst, mogą przypadkowo aktywować skróty klawiszowe. Na przykład, jeśli słowo "stół" jest wypowiadane, system może wykryć literę 's' i uruchomić przypisany do niej skrót, zanim reszta słowa zostanie przetworzona.
• Użytkownicy czytników ekranu i innych technologii wspomagających: Czytniki ekranu i podobne narzędzia często wykorzystują pojedyncze klawisze do nawigacji po stronie (np. 'h' dla nagłówków, 'l' dla list). Globalne skróty jednoznakowe na stronie mogą kolidować z klawiszami używanymi przez te technologie, uniemożliwiając skuteczną interakcję z treścią.

Celem kryterium jest zapewnienie, że użytkownicy mają kontrolę nad interfejsem i mogą korzystać z technologii wspomagających bez nieoczekiwanych konfliktów i przeszkód.

Wymagania kryterium sukcesu 2.1.4

Aby spełnić kryterium sukcesu 2.1.4 (poziom AA), jeśli jakakolwiek funkcja na stronie jest aktywowana przez naciśnięcie pojedynczego klawisza (literę, znak interpunkcyjny, symbol lub cyfrę) bez użycia klawiszy modyfikujących (takich jak Ctrl, Alt lub Shift), co najmniej jeden z poniższych warunków musi zostać spełniony:

1. Wyłączenie (Turn Off): Dostępny jest mechanizm pozwalający użytkownikowi na wyłączenie skrótu klawiszowego uruchamianego jednym znakiem. Może to być opcja w ustawieniach aplikacji lub strony.
2. Modyfikacja/Przemapowanie (Remap): Dostępny jest mechanizm pozwalający użytkownikowi na zmianę klawisza lub klawiszy wymaganych do aktywacji skrótu klawiszowego uruchamianego jednym znakiem. Użytkownik powinien mieć możliwość przypisania skrótu do innej kombinacji klawiszy (np. z 's' na Ctrl+S) lub innego pojedynczego znaku.
3. Aktywne tylko przy fokusie (Active Only on Focus): Skrót klawiszowy uruchamiany jednym znakiem dla elementu interfejsu użytkownika działa tylko wtedy, gdy ten element interfejsu użytkownika ma fokus. Oznacza to, że skrót nie powinien być aktywny globalnie na stronie. Na przykład, jeśli klawisz 'p' pauzuje odtwarzacz multimediów, powinien on działać tylko, gdy odtwarzacz ma fokus. Skróty, które działają wyłącznie wtedy, gdy aktywny jest element nieedytowalny (np. przycisk, link), a nie pola tekstowe, również mogą być zgodne z tym warunkiem.

Spełnienie któregokolwiek z tych trzech warunków jest wystarczające do zapewnienia zgodności z kryterium 2.1.4.

Praktyczne wskazówki dotyczące zgodności

Aby zapewnić zgodność z WCAG 2.1.4, programiści i projektanci powinni przestrzegać następujących wytycznych:

• Unikaj globalnych skrótów jednoznakowych: Najprostszym sposobem na uniknięcie problemów jest w ogóle nie implementowanie skrótów aktywowanych pojedynczymi znakami bez klawiszy modyfikujących, które działają globalnie na stronie.
• Preferuj klawisze modyfikujące: Zamiast 's' dla zapisu, użyj Ctrl+S (lub Cmd+S na macOS). Te kombinacje są standardowe, rzadziej kolidują i są bardziej intuicyjne dla użytkowników.
• Aktywuj skróty tylko wtedy, gdy są potrzebne: Jeśli skrót jednoznakowy jest niezbędny, ogranicz jego działanie do kontekstu, w którym jest faktycznie użyteczny i nie koliduje z innymi funkcjami. Najczęściej oznacza to aktywację tylko, gdy konkretny element interfejsu ma fokus.
• Zapewnij panel ustawień: Jeśli musisz użyć globalnych skrótów jednoznakowych, upewnij się, że użytkownicy mają łatwy dostęp do ustawień, które pozwalają im je wyłączyć lub zmienić. Instrukcje powinny być jasne i łatwe do zrozumienia.
• Testuj z różnymi technologiami wspomagającymi: Zawsze testuj swoje skróty klawiszowe z czytnikami ekranu (np. NVDA, JAWS, VoiceOver) oraz, jeśli to możliwe, z oprogramowaniem do wprowadzania mowy, aby upewnić się, że nie ma konfliktów.

Przykłady implementacji

Przykład nieprawidłowy: Globalny skrót jednoklawiszowy

<!-- HTML -->
<h1>Moja strona</h1&n>
<p>Wpisz swój komentarz:</p>
<textarea id="commentBox"></textarea>
<button>Wyślij</button>
Skopiuj tekst

// JavaScript
document.addEventListener('keydown', (event) => {
  // Problem: aktywuje się nawet podczas pisania w textarea
  if (event.key === 'h' && !event.ctrlKey && !event.altKey && !event.shiftKey) {
    event.preventDefault(); // Zapobiega wpisaniu 'h' do pola tekstowego
    alert('Otworzono pomoc!');
    console.log('Pomoc otwarta globalnie.');
  }
});
Skopiuj tekst

Przykład prawidłowy: Skrót aktywny tylko przy fokusie

<!-- HTML -->
<h1>Moja strona</h1>
<button id="helpButton" aria-label="Otwórz pomoc (klawisz 'h' tylko po fokusie)">Pomoc</button>
<label for="commentBox">Wpisz swój komentarz:</label>
<textarea id="commentBox"></textarea>
Skopiuj tekst

// JavaScript
// Opcja 1: Skrót przypięty bezpośrednio do elementu i aktywny tylko, gdy ten element ma fokus
document.getElementById('helpButton').addEventListener('keydown', (event) => {
  if (event.key === 'h' && !event.ctrlKey && !event.altKey && !event.shiftKey) {
    event.preventDefault();
    alert('Otworzono pomoc (przycisk ma fokus)!');
    console.log('Pomoc otwarta przez przycisk.');
  }
});

// Opcja 2: Skrót globalny, ale aktywny tylko, gdy żaden edytowalny element nie ma fokusu
document.addEventListener('keydown', (event) => {
  const activeElement = document.activeElement;
  const isEditable = activeElement.tagName === 'INPUT' || 
                     activeElement.tagName === 'TEXTAREA' || 
                     activeElement.hasAttribute('contenteditable');

  if (event.key === 's' && !event.ctrlKey && !event.altKey && !event.shiftKey && !isEditable) {
    event.preventDefault();
    alert('Dokument zapisany (brak edytowalnego fokusu)!');
    console.log('Dokument zapisany globalnie, ale bezpiecznie.');
  }
});
Skopiuj tekst

Przykład prawidłowy: Skrót z opcją wyłączenia/modyfikacji

<!-- HTML -->
<h1>Ustawienia dostępności</h1>
<label>
  <input type="checkbox" id="enableShortcutToggle" checked>
  Włącz skrót 'j' do przewijania w dół (jeśli aktywny globalnie)
</label>

<p>Przykładowa treść do przewijania.</p>
<div style="height: 300px; overflow-y: scroll; border: 1px solid #ccc; margin-top: 10px; padding: 10px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... (długa treść)</p>
</div>
Skopiuj tekst

// JavaScript
let isScrollShortcutEnabled = true;

document.getElementById('enableShortcutToggle').addEventListener('change', (event) => {
  isScrollShortcutEnabled = event.target.checked;
  if (isScrollShortcutEnabled) {
    alert("Skrót 'j' do przewijania włączony.");
  } else {
    alert("Skrót 'j' do przewijania wyłączony.");
  }
});

document.addEventListener('keydown', (event) => {
  const activeElement = document.activeElement;
  const isEditable = activeElement.tagName === 'INPUT' || 
                     activeElement.tagName === 'TEXTAREA' || 
                     activeElement.hasAttribute('contenteditable');

  if (isScrollShortcutEnabled && event.key === 'j' && !isEditable && !event.ctrlKey && !event.altKey && !event.shiftKey) {
    event.preventDefault();
    window.scrollBy(0, 100); // Przewiń stronę w dół
    console.log('Przewinięto w dół za pomocą "j".');
  }
});
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Używaj kombinacji klawiszy modyfikujących: Zawsze, gdy to możliwe, projektuj skróty klawiszowe tak, aby wymagały użycia klawiszy modyfikujących (Ctrl, Alt, Shift). Są one znacznie mniej inwazyjne i zazwyczaj nie kolidują z technologiami wspomagającymi ani wprowadzaniem tekstu.
• Zapewnij jasną dokumentację: Jeśli Twoja strona ma skróty klawiszowe, udostępnij listę tych skrótów w łatwo dostępnym miejscu (np. w sekcji pomocy lub ustawień), wyjaśniając ich działanie i sposób wyłączenia/zmiany.
• Testuj użyteczność: Przeprowadzaj testy użyteczności z różnymi grupami użytkowników, w tym z osobami korzystającymi z technologii wspomagających, aby zidentyfikować potencjalne problemy.
• Skróty kontekstowe: Jeśli skrót jest specyficzny dla komponentu (np. 'p' do pauzy w odtwarzaczu), upewnij się, że działa tylko wtedy, gdy ten komponent ma aktywny fokus.

Typowe pułapki:

• Zapominanie o użytkownikach wprowadzających mowę: Jednoznakowe skróty są szczególnie problematyczne dla użytkowników, którzy sterują komputerem za pomocą głosu, ponieważ pojedyncze dźwięki lub sylaby mogą być błędnie interpretowane jako aktywatory skrótów.
• Brak opcji konfiguracji: Brak możliwości wyłączenia lub zmiany skrótów jest najczęstszym błędem i bezpośrednim naruszeniem kryterium 2.1.4.
• Kolidowanie ze skrótami systemowymi/przeglądarkowymi: Projektowanie skrótów, które kolidują ze standardowymi skrótami przeglądarki (np. Ctrl+T dla nowej karty) lub systemu operacyjnego, może prowadzić do frustracji użytkowników i utraty funkcjonalności. Chociaż kryterium 2.1.4 dotyczy głównie skrótów jednoznakowych, jest to ogólna zasada dostępności.
• Niejasne komunikaty: Jeśli skrót jest aktywny, ale nieoczekiwany, brak wizualnej lub dźwiękowej informacji zwrotnej może dezorientować użytkownika.

Podsumowanie

Kryterium WCAG 2.1.4 jest kluczowe dla zapewnienia kontroli i przewidywalności interfejsu dla wszystkich użytkowników, zwłaszcza tych korzystających z technologii wspomagających. Poprzez unikanie globalnych, jednoznakowych skrótów klawiszowych lub zapewnienie mechanizmów ich wyłączania, modyfikacji lub ograniczenia do kontekstu fokusu, możemy znacząco poprawić dostępność i użyteczność naszych stron internetowych. Pamiętaj, że celem jest umożliwienie użytkownikom efektywnej interakcji bez obawy o przypadkowe uruchomienie funkcji czy konflikty z ich preferowanymi metodami wprowadzania danych.