Widoczny focus w CSS na przyciskach i linkach

W skrócie: Widoczny focus w CSS dodaje czytelny obrys linkom, przyciskom i polom formularza, gdy użytkownik porusza się po stronie klawiaturą. Wystarczy użyć selektora :focus-visible, który pomaga w dostępności bez dokładania JavaScriptu i bez psucia wyglądu po kliknięciu myszką.

Widoczny focus w CSS rozwiązuje prosty, ale częsty problem: użytkownik przechodzi po stronie klawiaturą i nie widzi, gdzie aktualnie jest. Dotyczy to linków w menu, przycisków „Kup teraz”, pól formularza kontaktowego i filtrów w sklepie. Na wielu firmowych stronach focus został przypadkiem ukryty przez outline: none, bo „brzydko wyglądał”.

To błąd. Focus nie jest ozdobą, tylko informacją nawigacyjną. Dobrze ustawiony obrys poprawia dostępność, UX i zwykłą wygodę korzystania ze strony.

Widoczny focus w CSS: gotowe rozwiązanie

Najprościej dodaj jeden wspólny styl dla elementów interaktywnych. W WordPressie możesz wkleić go w „Dodatkowy CSS”, w motywie potomnym albo w swoim pliku stylów.

:root {
  --focus-ring: #005fcc;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

Kolor --focus-ring ustaw pod identyfikację wizualną marki. Dla lokalnej firmy usługowej ze Świebodzina, sklepu z rękodziełem albo strony fundacji warto wybrać kolor kontrastowy wobec tła, niekoniecznie główny kolor logo.

Jak działa ten kod

Ten kod pokazuje focus tylko wtedy, gdy jest potrzebny, czyli głównie przy obsłudze klawiaturą.

:root zapisuje zmienną z kolorem obrysu, dzięki czemu zmieniasz go w jednym miejscu.
:where(...) wybiera najczęstsze elementy interaktywne: linki, przyciski, pola formularza i summary w rozwijanych sekcjach.
:focus-visible uruchamia styl focusa wtedy, gdy przeglądarka uzna, że użytkownik powinien go zobaczyć, na przykład po użyciu klawisza Tab.
outline dodaje wyraźną ramkę bez przesuwania układu strony.
outline-offset odsuwa ramkę od elementu, żeby nie zlewała się z przyciskiem ani tekstem.

Jeśli dopiero porządkujesz użyteczność strony, zobacz też nasz wpis o tym, czym jest UX i dlaczego wpływa na sprzedaż. Focus to mały detal, ale właśnie takie detale decydują, czy strona jest wygodna.

Wsparcie przeglądarek

:focus-visible jest funkcją Baseline i według MDN jest szeroko wspierany od marca 2022 roku. Szczegóły techniczne znajdziesz w dokumentacji MDN dla selektora :focus-visible.

W praktyce oznacza to, że możesz bezpiecznie używać tego rozwiązania w nowych stronach firmowych i sklepach. W bardzo starych przeglądarkach reguła może zostać pominięta, dlatego nie chowaj domyślnego focusa globalnym outline: none.

Wariant i typowy błąd

Typowy błąd to usunięcie obrysu, bo projekt wygląda „czyściej” na makiecie. Na prawdziwej stronie użytkownik może wtedy utknąć w menu, formularzu albo koszyku, bo nie wie, który element jest aktywny.

Jeśli masz przyciski na ciemnym tle, zmień tylko zmienną --focus-ring na jasny kolor. Jeśli obrys jest ucinany, sprawdź, czy rodzic elementu nie ma overflow: hidden. To częste przy kartach produktów, sliderach i kafelkach ofertowych.

Przy większych zmianach warto spojrzeć na całą stronę, nie tylko na jeden przycisk — o tym pisaliśmy w poradniku o stronie firmowej, która budzi zaufanie.

Biznesowo taki drobiazg poprawia czytelność, dostępność i szansę na dokończenie kontaktu lub zakupu; jeśli nie chcesz robić tego sam, zrobimy to za Ciebie w ramach strony, sklepu albo opieki WordPress.