Wróć do wszystkich kryteriów

2.4.7 Widoczny fokus (ang.) Focus Visible

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Formularze
  • Linki
  • Nawigacja
  • Przyciski i kontrolki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Głównym założeniem tego kryterium sukcesu jest zagwarantowanie, że użytkownik poruszający się po serwisie za pomocą klawiatury bądź innego interfejsu klawiatury zawsze precyzyjnie wie, który komponent jest aktualnie aktywny.

    Gdy dowolny element interaktywny otrzymuje fokus, system musi wyświetlić jednoznaczny wskaźnik wizualny. Dzięki temu osoba obsługująca stronę bez użycia myszy komputerowej nie musi domyślać się swojej pozycji i może bez przeszkód wchodzić w bezpieczną interakcję z obiektami interfejsu.

    Wytyczna ta stanowi absolutny filar dostępności cyfrowej. Brak widocznego punktu odniesienia sprawia, że nawigacja staje się całkowicie losowa, chaotyczna i uniemożliwia jakąkolwiek pracę z systemem.

    Definicja w j. angielskim

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

    Definicja w j. polskim

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

    Słownik pojęć

    Fokus (ang.) focus
    –

    stan aktywnego wyróżnienia elementu interfejsu (takiego jak odnośnik, przycisk czy pole formularza), który wskazuje gotowość komponentu na przyjęcie akcji lub danych wprowadzanych przez użytkownika.

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

    • Użytkownicy klawiatury: Osoby, które z powodu ograniczeń sprawności ruchowej, kontuzji lub własnych upodobań nawigują po stronach wyłącznie za pomocą klawisza Tab. Wizualny wskaźnik to dla nich jedyna metoda śledzenia bieżącego położenia w strukturze dokumentu.
    • Osoby z niepełnosprawnościami motorycznymi: Pamiętaj, że użytkownicy alternatywnych urządzeń wskazujących, takich jak przełączniki, systemy sterowania wzrokiem czy specjalistyczne klawiatury, polegają na emulacji poleceń klawiaturowych. Brak wskaźnika odbiera im szansę na obsługę witryny.
    • Osoby słabowidzące: Zastosowanie wyraźnego wyróżnienia pozwala im natychmiastowo zlokalizować aktywny element, nawet przy korzystaniu z dużego powiększenia ekranu lub niestandardowych schematów kolorów. Domyślne, bardzo cienkie obramowania przeglądarek są dla nich często zupełnie niewidoczne.
    • Użytkownicy z zaburzeniami poznawczymi: Jasno określony punkt skupienia uwagi ułatwia orientację w układzie strony, drastycznie zmniejsza zmęczenie psychiczne oraz eliminuje frustrację wywołaną zagubieniem się w layout’cie.
    • Wszyscy użytkownicy: Zyskują wyższy komfort i ergonomię pracy w sytuacjach, gdy standardowa mysz ulegnie awarii lub gdy preferują szybkie zarządzanie formularzami za pomocą skrótów.

    Zasady wdrażania i wymagania techniczne

    • Zachowanie wskaźnika przeglądarki: Najprostszą i domyślnie rekomendowaną ścieżką jest nieingerowanie w fabryczne ustawienia przeglądarek internetowych. Są one uznawane za w pełni wystarczające, o ile style projektu ich nie wyczyszczą ani nie osłabią ich widoczności.
    • Projektowanie unikalnych stylów: Jeśli względy estetyczne wymagają modyfikacji domyślnego wyglądu, musisz zastąpić go autorskim rozwiązaniem w kaskadowych arkuszach stylów CSS. Wykorzystaj do tego celu właściwości takie jak outline, box-shadow lub border.
    • Zróżnicowanie stanów interfejsu: Zadbaj o to, aby wygląd elementu z fokuem wyraźnie różnił się od jego standardowej formy oraz od stanu najechania myszą hover. Te dwa stany powinny mieć odrębne, łatwo rozpoznawalne sygnatury wizualne.
    • Kontrast i wyrazistość: Zadbaj o to, by wskaźnik drastycznie odróżniał się od standardowego wyglądu elementu oraz od stanu najazdu myszą ( hover). Powinien mieć optymalną grubość (rekomendowane 2-3 piksele) oraz wysoki kontrast w stosunku do otaczającego go tła (1.4.11 Kontrast elementów nietekstowych).
    • Zastosowanie outline-offset: Używaj właściwości outline-offset, aby odsunąć ramkę fokusu na zewnątrz komponentu. Zapobiegnie to nakładaniu się linii na treść lub inne style graniczne.
    • Implementacja :focus-visible: Rozważ zastosowanie nowoczesnej pseudoklasy :focus-visible. Pozwala ona na wyświetlanie intensywnego wskaźnika tylko wtedy, gdy użytkownik nawiguje urządzeniem nie-wskaźnikowym (np. klawiaturą). Poprawia to doświadczenie użytkownika UX osób korzystających z myszy, nie odbierając korzyści tym, którzy potrzebują dostępności.

    Wyjątki i sytuacje szczególne

    W ramach tego kryterium nie przewidziano formalnych wyjątków zwalniających z obowiązku prezentacji fokusu. Domyślny wskaźnik systemowy przeglądarki internetowej uznaje się za spełniający wymagania, pod warunkiem, że autorzy kodu nie nadpisali go ani nie zablokowali w arkuszach stylów.

    Przykłady implementacji

    Najczęstsze błędy

    • F78: Sytuacja, w której autorzy kodu stosują w arkuszach stylów zapis outline: none; lub outline: 0; dla stanu :focus, nie oferując w zamian żadnego alternatywnego wyróżnienia wizualnego. To najpoważniejsze uchybienie całkowicie odcinające użytkowników klawiatury od nawigacji.
    • F55: Polega na używaniu skryptów JavaScript, które automatycznie wywołują metodę odbierania fokusu (np. this.blur()) natychmiast po jego otrzymaniu przez element. Powoduje to, że użytkownik klawiatury traci punkt orientacyjny i nie może aktywować elementu.
    • Niewystarczający poziom kontrastu: Tworzenie autorskich wskaźników fokusu, których kolorystyka zlewa się z tłem witryny lub kolorem samego komponentu (np. jasnoszara, cienka obwódka na białym tle), co uniemożliwia ich dostrzeżenie osobom słabowidzącym.
    • Identyczny wygląd dla focus i hover: Zrównanie stylów dla najechania myszą i aktywacji klawiaturą. Użytkownik musi precyzyjnie identyfikować stan, w jakim znajduje się dany komponent interfejsu.
    • Pominięcie niestandardowych komponentów: Ograniczenie widoczności fokusu tylko do domyślnych znaczników odnośników, przy jednoczesnym zignorowaniu pól formularzy, rozwijanych list, zakładek czy innych zaawansowanych elementów sterujących wyposażonych w atrybut tabindex.
    • Zasłanianie fokusu przez elementy pływające: Sytuacja, w której wskaźnik fokusu aktywuje się na elemencie ukrytym pod przyklejonym nagłówkiem, stopką lub banerem (ang.) sticky, przez co staje się niewidoczny dla użytkownika.

    Najlepsze praktyki

    • Myślenie o klawiaturze w pierwszej kolejności: Traktuj nawigację klawiszową jako podstawową i równorzędną metodę interakcji z interfejsem podczas całego procesu projektowania.
    • Weryfikacja międzyprzeglądarkowa: Pamiętaj, że fabryczne style fokusu różnią się w zależności od przeglądarki. Zawsze sprawdzaj, czy Twoje niestandardowe reguły działają spójnie i stabilnie na różnych silnikach renderujących.
    • Wyrazistość bez kompromisów: Celuj w projektowanie rozwiązań, które są intuicyjne i od razu rzucają się w oczy, dbając o odpowiednią grubość i ostrość linii.
    • Kompleksowe testowanie: Wykorzystuj wbudowane funkcje narzędzi deweloperskich do symulacji i stałego monitorowania widoczności fokusu na każdym, nawet najmniejszym komponencie strony.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Uruchom inspektora kodu i włącz wymuszenie stanu :focus lub :focus-visible dla wybranego elementu w drzewie DOM. Zweryfikuj, czy przypisane style nie ukrywają obramowania oraz czy właściwości nie są nadpisane przez reguły czyszczące wskaźnik.
    • Testowanie manualne: Odłącz mysz komputerową i przejdź całą stronę wyłącznie za pomocą klawisza Tab (oraz Shift+Tab do poruszania się w tył). Obserwuj uważnie ruch punktu zaznaczenia i oceń, czy w każdym momencie jesteś w stanie bezbłędnie wskazać aktualnie aktywny element.
    • (ang.) WAVE Evaluation Tool: Użyj narzędzia audytowego do wykrycia ewentualnych błędów w strukturze elementów interaktywnych oraz sprawdzenia, czy skrypty nie manipulują dostępnością focusowania komponentów interfejsu.
    • (ang.) WCAG Color contrast checker: Wykorzystaj próbnik do zbadania poziomu kontrastu Twojego autorskiego wskaźnika fokusu względem kolorystyki tła, na którym się wyświetla, aby upewnić się, że spełnia wymagania dla elementów nietekstowych.
    • NVDA: Uruchom czytnik ekranu i przemieszczaj się po stronie za pomocą klawiatury. Upewnij się, że komunikaty głosowe precyzyjnie współgrają z wyraźną zmianą wizualną na ekranie monitora.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 interaktywnych przycisków. Twoim zadaniem jest ocenić, czy w każdym z przypadków nawigacja klawiaturą zapewnia czytelny, jasny sygnał wizualny o tym, gdzie aktualnie znajduje się Twój punkt skupienia.

    Jak to sprawdzić?

    1. Zamiast używać myszki, zacznij naciskać na klawiaturze przycisk Tab.
    2. Obserwuj bacznie obszar „Strefy Audytu”. Czy wiesz dokładnie, który przycisk jest w danym ułamku sekundy aktywny?
    3. Zwróć uwagę, czy obwódki fokusu odróżniają się od tła, oraz czy w ogóle się pojawiają na ekranie.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura (Tab, Enter, Spacja)

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

    #1 BŁĄD

    Problem: Zastosowanie w arkuszach stylów CSS zapisu outline: none bez wdrożenia alternatywnego sygnału wizualnego.
    Dlaczego: To najgorszy z możliwych błędów, wywołujący zjawisko techniki F78. Użytkownik nawigujący po witrynie wciska Tab, jego system zatrzymuje się na przycisku i czeka na akcję, ale na ekranie absolutnie nic się nie zmienia. Wywołuje to frustrację i poczucie zagubienia.
    Naprawa: Nigdy nie używaj globalnego outline: none, chyba że natychmiast zamienisz obramowanie np. na właściwość box-shadow, zmianę tła, lub grubszy border.

    #2 DOBRZE

    Dlaczego: Zastosowano wyraźny obrys wokół przycisku za pomocą komendy outline: 3px solid #3498db; oraz dodano margines odsuwający ją od obiektu (outline-offset: 3px;). Daje to pewny, ostry i natychmiastowy sygnał potwierdzający stan gotowości elementu.

    #3 DOBRZE

    Dlaczego: Użyto nowoczesnej pseudoklasy :focus-visible. W przeciwieństwie do tradycyjnego :focus, wskaźnik ten aktywuje się wyłącznie wtedy, gdy użytkownik nawiguje klawiaturą (np. Tabulatorem). Gdy klikniesz przycisk myszką, nie pojawi się obwódka. Jest to dziś „Złoty Standard” we frontendzie – doskonały kompromis pomiędzy czystym designem dla użytkowników myszy (brak trwałej ramki po kliknięciu), a pełną dostępnością i wymogami WCAG dla osób korzystających z klawiatury!

    #4 BŁĄD

    Problem: Kolor zastosowanej ramki fokusu zlewa się z kolorem tła całej sekcji witryny.
    Dlaczego: Ramka fokusu technicznie istnieje w CSS, ale zastosowano na niej niemal biały kolor na bardzo jasnoszarym tle sekcji (#fdfdfd na #fdfdfd). Użytkownicy, zwłaszcza ci niedowidzący oraz pracujący w złym oświetleniu słonecznym, zupełnie tego nie zauważą. Wskaźniki muszą spełniać kryteria kontrastu nietekstowego, aby uznano je za „widoczne”.
    Naprawa: Zastosuj mocno kontrastujący z tłem podłoża kolor wskaźnika (np. czerń, granat).

    #5 DOBRZE

    Dlaczego: Przykład dowodzi, że widoczny fokus nie musi polegać tylko na ramkach („outline”). Dozwolone jest zastosowanie zapisu outline: none o ile zastąpimy je od razu wyraźną inwersją! Tu przycisk zmienia kompletnie swoje tło i kolor tekstu na przeciwne. Sygnał wizualny jest ogromny, zgodny z WCAG i bardzo designerski.

    #6 BŁĄD

    Problem: Wskaźnik fokusu na przycisku jest „odcięty” i niewidoczny z powodu nadrzędnego kontenera narzucającego maskowanie.
    Dlaczego: Sam element <button> ma zdefiniowaną grubą ramkę obrysu. Ponieważ jednak otaczający go kontener (<div>) używa właściwości overflow: hidden i ściśle przylega do krawędzi przycisku, wskaźnik (rysowany domyślnie na zewnątrz bryły) ląduje „poza” dopuszczalnym widokiem. Dla użytkownika tabulatora to wygląda, jakby wskaźnik zniknął (problem z dokumentacji).
    Naprawa: Unikaj stosowania overflow: hidden tuż na interaktywnych komponentach (lub zachowuj spory margines – margin/padding). Jeżeli maskowanie na kontenerze jest nieuniknione, upewnij się, że wskaźnik fokusu dla takich obiektów rysuje się do środka elementu, na przykład przy użyciu box-shadow: inset 0 0 0 3px #3498db;.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów