WCAG 2.4.7: Widoczny fokus

WCAG 2.4.7: Widoczny fokus (Focus Visible)

Kryterium sukcesu WCAG 2.4.7, oznaczone jako poziom AA, wymaga, aby interfejs użytkownika zapewniał wskaźnik wizualny, gdy element otrzymuje fokus. Innymi słowy, gdy użytkownik nawiguje po stronie za pomocą klawiatury lub innych urządzeń wejściowych, musi być jasno widoczne, który element jest aktualnie aktywny i gotowy do interakcji. Jest to fundamentalne dla zapewnienia dostępności i użyteczności strony.

Dlaczego widoczny fokus jest ważny?

Widoczny fokus ma kluczowe znaczenie dla wielu grup użytkowników, wpływając bezpośrednio na ich zdolność do efektywnej interakcji ze stroną internetową. Brak wyraźnego wskaźnika fokusu może uniemożliwić lub znacząco utrudnić korzystanie z witryny.

Wpływ na dostępność i grupy użytkowników:

• Użytkownicy klawiatury: Osoby, które nie mogą lub nie chcą używać myszy (np. ze względu na urazy, upośledzenia ruchowe, preferencje), polegają wyłącznie na klawiaturze do nawigacji. Widoczny fokus jest ich jedynym sposobem na śledzenie, gdzie aktualnie znajdują się na stronie. Bez niego, nawigacja staje się niemożliwa, a użytkownik może utknąć w pętli lub nie wiedzieć, który element ma zamiar aktywować.
• Osoby z niepełnosprawnościami ruchowymi: Użytkownicy ci często korzystają z wyspecjalizowanych urządzeń wejściowych (np. przełączników, myszy sterowanych wzrokiem, alternatywnych klawiatur), które emulują naciśnięcia klawiszy. Im również potrzebny jest jasny wizualny wskaźnik fokusu.
• Osoby z niepełnosprawnościami poznawczymi: Widoczny fokus pomaga im w utrzymaniu orientacji na stronie, redukując obciążenie poznawcze i frustrację wynikającą z zagubienia się w interfejsie.
• Osoby słabowidzące: Potrzebują wyraźnego i kontrastowego wskaźnika, który łatwo zauważą, nawet jeśli powiększają stronę lub korzystają z niestandardowych schematów kolorów. Domyślne cienkie obramowania mogą być dla nich niewystarczające.
• Wszyscy użytkownicy: Nawet osoby bez zdiagnozowanych niepełnosprawności odczuwają korzyści z widocznego fokusu, np. w sytuacjach, gdy mysz jest niedostępna lub gdy wolą używać skrótów klawiaturowych.

Wymagania kryterium sukcesu 2.4.7

Główne wymaganie tego kryterium jest proste: gdy jakikolwiek element interaktywny (link, przycisk, pole formularza itp.) otrzymuje fokus, musi być to w sposób wizualny sygnalizowane użytkownikowi. Oznacza to, że:

• Wskaźnik fokusu musi być widoczny. Nie może być ukryty, zbyt subtelny ani mieć zbyt niskiego kontrastu.
• Musi być wyraźny i odróżniać się od normalnego wyglądu elementu oraz od stanu najechania myszą (hover).
• Zazwyczaj domyślny wskaźnik fokusu przeglądarki jest wystarczający, o ile nie zostanie usunięty lub zmodyfikowany w sposób uniemożliwiający jego percepcję.

Praktyczne wytyczne dotyczące zgodności

Aby zapewnić zgodność z WCAG 2.4.7, należy pamiętać o kilku kluczowych zasadach podczas projektowania i implementowania interfejsu użytkownika:

• Nie usuwaj domyślnego wskaźnika fokusu: Najczęstszym błędem jest całkowite usunięcie domyślnego obramowania (outline) za pomocą outline: none; w CSS bez zapewnienia alternatywnego, wyraźnego wskaźnika.
• Zawsze zapewnij zamiennik: Jeśli domyślny wskaźnik jest usuwany lub modyfikowany ze względów estetycznych, zawsze należy go zastąpić niestandardowym stylem, który jest równie lub bardziej wyraźny.
• Użyj odpowiednich właściwości CSS: Do stylizacji fokusu najlepiej nadają się właściwości takie jak outline, box-shadow, border lub zmiana koloru tła/tekstu.
• Zadbaj o kontrast: Wskaźnik fokusu musi mieć wystarczający kontrast z otaczającym tłem i elementem, aby był łatwo zauważalny. WCAG 2.1 rozszerza to wymaganie dla komponentów interfejsu (WCAG 1.4.11 Non-text Contrast).
• Odpowiednia grubość i kolor: Wskaźnik powinien być wystarczająco gruby i w kolorze, który wyróżnia go spośród innych elementów. Cienkie, słabo widoczne obramowania mogą być niewystarczające.
• Odpowiedni offset: Użycie outline-offset może pomóc w umieszczeniu wskaźnika fokusu poza krawędzią elementu, co czyni go bardziej widocznym i zapobiega nakładaniu się na inne style (np. border).
• Testowanie klawiaturą: Regularnie testuj całą stronę za pomocą klawiatury (klawisz Tab, Shift+Tab, Enter, Spacja), aby upewnić się, że fokus jest zawsze widoczny i logicznie się przesuwa.
• Rozważ :focus-visible: Nowoczesna pseudoklasa CSS :focus-visible pozwala na wyświetlanie wskaźnika fokusu tylko wtedy, gdy element otrzymuje fokus za pomocą klawiatury (lub innego urządzenia nie-wskaźnikowego), a nie myszy, co może poprawić doświadczenie użytkownika dla osób używających myszy, nie usuwając korzyści dla użytkowników klawiatury.

Przykłady implementacji

Poprawne implementacje

<button>Przycisk z domyślnym fokuem</button>
<a href="#">Link z domyślnym fokusem</a>
Skopiuj tekst

<style>
  .custom-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
  }
  .custom-button:focus {
    outline: 3px solid #ffcc00; /* Gruby, kontrastowy outline */
    outline-offset: 2px; /* Dystans od elementu */
    box-shadow: 0 0 0 5px rgba(255, 204, 0, 0.5); /* Dodatkowy efekt cienia */
  }
  /* Alternatywnie, użyj :focus-visible dla lepszego UX */
  .custom-button:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 204, 0, 0.5);
  }
</style>
<button class="custom-button">Przycisk z niestandardowym fokusem</button>
Skopiuj tekst

<style>
  /* ZŁA PRAKTYKA: Usuwa fokus dla wszystkich elementów */
  *:focus {
    outline: none; 
  }
  /* ZŁA PRAKTYKA: Usuwa fokus dla konkretnego elementu */
  .no-focus-button:focus {
    outline: none;
  }
</style>
<button class="no-focus-button">Przycisk bez fokusu</button>
Skopiuj tekst

<style>
  .subtle-focus-link {
    color: blue;
    text-decoration: underline;
  }
  /* ZŁA PRAKTYKA: Fokus jest prawie niewidoczny */
  .subtle-focus-link:focus {
    outline: 1px dotted rgba(0,0,0,0.2); /* Bardzo cienki, mało kontrastowy */
    border: 1px solid #ffffff; /* Biała ramka na białym tle */
  }
</style>
<a href="#" class="subtle-focus-link">Link z subtelnym fokusem</a>
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Zawsze myśleć o użytkowniku klawiatury: Traktuj nawigację klawiaturą jako podstawową metodę interakcji, nie tylko jako alternatywę.
• Testować na różnych przeglądarkach: Domyślne style fokusu mogą się nieco różnić między przeglądarkami. Upewnij się, że twoje niestandardowe style działają spójnie.
• Używać outline-offset: To pomaga utrzymać fokus poza wizualnym obszarem elementu, zapobiegając problemom z grafiką lub innymi obramowaniami.
• Zapewnić wystarczającą widoczność: Celuj w wyraźny wskaźnik, który rzuca się w oczy, ale nie jest przytłaczający. Dobrą zasadą jest, aby wskaźnik zajmował co najmniej 2-3 piksele grubości i miał wyraźny kontrast.
• Korzystać z narzędzi deweloperskich: Przeglądarki oferują tryby symulacji nawigacji klawiaturowej, co ułatwia testowanie.

Typowe pułapki:

• Całkowite usunięcie outline: To najgorszy błąd, który całkowicie blokuje dostępność dla użytkowników klawiatury.
• Stylizacja fokusu w taki sam sposób jak :hover: Użytkownik musi odróżniać, czy element jest najeżdżany myszą, czy ma aktywny fokus klawiatury. Style powinny być odrębne.
• Niewystarczający kontrast: Wskaźnik fokusu o kolorze zbyt zbliżonym do tła lub elementu będzie niewidoczny dla wielu użytkowników.
• Ukrycie fokusu przez inne elementy: Niekiedy niestandardowe style CSS lub nakładające się elementy mogą zasłonić wskaźnik fokusu.
• Zapominanie o wszystkich interaktywnych elementach: Nie tylko linki i przyciski, ale także pola formularzy, niestandardowe komponenty UI (np. rozwijane listy, zakładki), czy elementy z atrybutem tabindex muszą mieć widoczny fokus.

Zapewnienie widocznego fokusu to jeden z filarów dostępności, który znacząco poprawia doświadczenie użytkownika dla szerokiej gamy osób. Pamiętając o tych wytycznych, możemy tworzyć strony, które są bardziej inkluzywne i użyteczne dla każdego.