blog na temat dostępności stron internetowych

Przejdź do głównej treści

Wskaźnik fokusa

W poprzednim artykule opisałam, dlaczego ważne jest upewnienie się, że każdy interaktywny komponent strony internetowej jest dostępny z klawiatury. Wiemy już, że każdy z tych elementów musi otrzymywać fokus oraz że musi być możliwe użycie go przy pomocy klawiatury. Nie są to jednak jedyne kryteria związane z dostępnością treści internetowych dla użytkowników posługujących się klawiaturą. Dla osób widzących, które nie korzystają z myszy, istotne jest również zapewnienie dobrze widocznego wskaźnika fokusa (kryterium sukcesu WCAG 2.0 “2.4.7 Widoczny fokus”).

Co to jest wskaźnik fokusa?

Wskaźnik fokusa jest to wizualne oznacznienie elementu interaktywnego (takiego jak odnośnik czy przycisk), który w danym momencie posiada fokus. Na ogół wskaźnik fokusa ma postać ramki otaczającej dany komponent.

Dlaczego wskaźnik ten jest istotny?

Osoby korzystające z klawiatury muszą wiedzieć, gdzie znajduje sie fokus, by móc zorientować się, który element jest w danym momencie aktywny i może być obsłużony z klawiatury. Jeśli np. fokus znajduje się na odnośniku do strony “Kontakt”, naciśnięcie klawisza Enter spowoduje, że użytkownik zostanie przeniesiony na tę stronę.
Bez wskaźnika fokusa nawet jeśli możliwe jest przeniesienie fokusa do każdego interaktywnego elementu na stronie, nawigowanie przy pomocy klawiatury jest praktycznie niemożliwe dla osób widzących. Wskaźnik fokusa klawiatury pełni taką samą rolę jak wskaźnik myszy – można sobie wyobrazić jak trudne byłoby korzystanie z myszy, gdyby wskaźnik ten był niewidoczny!

Jak upewnić się, że każdy interaktywny komponent posiada wskaźnik fokusa?

Przede wszystkim należy unikać stosowania właściwości "outline: none" w celu usunięcia domyślnego wskaźnika stosowanego przez przeglądarki. Jak jednak dobrze wiemy, wielu projektantom stron internetowych nie podoba się domyślny wskaźnik fokusa. Jeśli zatem usunięcie go jest nie do uniknięcia, należy koniecznie zapewnić dobrze widoczne alternatywne rozwiązanie. Na przykład, w wypadku przycisku wskaźnik fokusa może mieć postać grubej ramki, bądź też zamiany koloru tekstu i tła (np. czarny przycisk z żółtym napisem może zmienić się w żółty przycisk z czarnym napisem, gdy przycisk ten posiada fokus):

button {
  color: #FFF200;
  background: #000;
  border: 3px solid #000;
}

button:focus {
  color: #000;
  background: #FFF200;
}

Nawet jeśli nie usuwamy domyślnego wskaźnika fokusa, zaleca się wzmocnienie go poprzez zapewnienie dodatkowego efektu wizualnego. Domyślny wskaźnik, choć z reguły dobrze widoczny na jasnym tle, może być trudny do zauważenia na stronie stosującej ciemniejsze kolory.

Przykłady

Na początek dwa poprawne przykłady stosowania wskaźnika fokusa klawiatury:

  • strona Prezydenta RP stosuje dobrze widoczny domyślny wskaźnik fokusa:
    fragment nawigacji strony Prezydenta RP z odnośnikiem 'Dla Mediów' otoczonym przerywana linią

  • na blogu “Internet bez barier” odnośniki z fokusem zmieniają kolor teksu i tła, na którym są wyświetlone:
    fragment tekstu z różowym odnośnikiem wyświetlonym na białym tle, oraz ten sam fragment tekstu z odnośnikiem posiadającym fokus. Tym razem tekst odnośnika jest wyświetlony na biało na różowym tle

A teraz czas na zły przykład.
Deweloperzy, którzy stworzyli serwis internetowy producenta obuwia “Ryłko” usunęli domyślny wskaźnik fokusa (:focus {outline: 0 none; }), i niestety nie zastąpili go żadnym innym oznaczeniem. W rezultacie strona ta jest praktycznie niedostępna dla osób, które nie korzystają z myszy. Pomimo że elementy interaktywne otrzymują fokus, osoby widzące nie są w stanie stwierdzić, gdzie się on w danym momencie znajduje.
I w ten sposób jedna linia kodu zupełnie niepotrzebnie uniemożliwia dostęp do treści serwisu wielu potencjalnym użytkownikom.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>