Wskaźnik fokusu (często oznaczany przez „pierścień fokusu”) wskazuje element, na którym jest obecnie skupiona uwaga. W przypadku użytkowników, którzy nie mogą korzystać z myszy, ten wskaźnik jest bardzo ważny, ponieważ zastępuje kursor myszy.
Jeśli domyślny wskaźnik fokusu przeglądarki koliduje z Twoim projektem, możesz zmienić jego styl za pomocą CSS. Pamiętaj tylko, aby uwzględnić użytkowników klawiatury.
Naciśnij :focus, aby zawsze wyświetlać wskaźnik ostrości
Pseudoklasa :focus jest stosowana za każdym razem, gdy element jest zaznaczony, niezależnie od urządzenia wejściowego (myszy, klawiatury, rysika itp.) lub metody zastosowanej do zaznaczenia. Na przykład <div> poniżej ma tabindex, dzięki któremu można ją zaznaczyć. Ma też styl niestandardowy dla stanu :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Niezależnie od tego, czy klikniesz go myszką czy przejdziesz do niego za pomocą klawiatury, <div> zawsze będzie wyglądać tak samo.
Niestety przeglądarki mogą stosować skupienie w niespójny sposób. To, czy element zostanie zaznaczony, może zależeć od przeglądarki i systemu operacyjnego.
Na przykład <button> poniżej ma też niestandardowy styl w stanie :focus.
button:focus {
outline: 4px dashed orange;
}
Jeśli w Chrome na macOS klikniesz <button> myszką, zobaczysz niestandardowy styl fokusowania. Nie zobaczysz jednak niestandardowego stylu fokusa, jeśli klikniesz <button> w Safari na komputerze Mac. Dzieje się tak, ponieważ w Safari element nie staje się aktywny po kliknięciu.
Zachowanie fokusa jest niespójne, więc może wymagać przetestowania na różnych urządzeniach, aby upewnić się, że styl fokusa jest akceptowalny dla użytkowników.
Aby wybrać, kiedy ma być widoczny wskaźnik ostrości, naciśnij :focus-visible.
Nowa pseudoklasa :focus-visible jest stosowana za każdym razem, gdy element zostanie zaznaczony, a przeglądarka za pomocą heurystyki określi, że wyświetlenie wskaźnika zaznaczenia będzie korzystne dla użytkownika. Jeśli ostatnia interakcja użytkownika odbywała się za pomocą klawiatury, a wciśnięcie klawisza nie zawierało meta, ALT / OPTION ani CONTROL, :focus-visible zostanie dopasowane.
Przycisk w przykładzie poniżej będzie wybiórczo wyświetlał wskaźnik fokusu. Jeśli klikniesz go myszką, wyniki będą inne niż w przypadku użycia klawiatury.
button:focus-visible {
outline: 4px dashed orange;
}
Użyj elementu :focus-within, aby nadać styl elementowi nadrzędnemu względem zaznaczonego elementu
Pseudoklasa :focus-within jest stosowana do elementu, gdy sam element lub inny element wewnątrz niego zostanie zaznaczony.
Można go użyć do podświetlenia wybranego obszaru strony, aby zwrócić na niego uwagę użytkownika. Na przykład formularz poniżej jest aktywny zarówno wtedy, gdy jest zaznaczony, jak i gdy zaznaczysz dowolny z opcji.
form:focus-within {
background: #ffecb3;
}
Kiedy wyświetlać wskaźnik skupienia
Dobrą zasadą jest zadać sobie pytanie: „Czy po kliknięciu tego elementu sterowania na urządzeniu mobilnym oczekuję wyświetlenia klawiatury?”.
Jeśli odpowiedź brzmi „tak”, kontroler powinien zawsze wyświetlać wskaźnik fokusu, niezależnie od urządzenia wejściowego, którego użyto do ustawienia fokusu. Dobrym przykładem jest element <input type="text">. Użytkownik musi przesłać dane wejściowe do elementu za pomocą klawiatury niezależnie od tego, jak pierwotnie został on zaznaczony. Dlatego warto zawsze wyświetlać wskaźnik zaznaczenia.
Jeśli odpowiedź brzmi „nie”, element sterujący może wybrać wyświetlanie wskaźnika ostrości. Dobrym przykładem jest element <button>. Jeśli użytkownik kliknie go myszką lub palcem na ekranie dotykowym, działanie zostanie wykonane i wskaźnik fokusu może nie być potrzebny. Jeśli jednak użytkownik przechodzi za pomocą klawiatury, warto wyświetlić wskaźnik zaznaczenia, aby mógł zdecydować, czy chce kliknąć element sterujący za pomocą klawiszy ENTER lub SPACE.
Unikaj outline: none
Sposób, w jaki przeglądarki decydują, kiedy wyświetlić wskaźnik zaznaczenia, jest bardzo mylący. Zmiana wyglądu elementu <button> za pomocą CSS lub dodanie do elementu tabindex spowoduje włączenie domyślnego zachowania pierścienia fokusa przeglądarki.
Bardzo częstym wzorcem antyspamowym jest usuwanie wskaźnika fokusu za pomocą CSS, np.:
/* Don't do this!!! */
:focus {
outline: none;
}
Lepszym sposobem na obejście tego problemu jest użycie kombinacji :focus i :focus-visible polyfill. Pierwszy blok kodu poniżej pokazuje, jak działa polyfill, a umieszczona pod nim przykładowa aplikacja zawiera przykład użycia polyfill do zmiany wskaźnika fokusu przycisku.
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}