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 o użytkownikach 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 (mysz, klawiatura, rysik itp.) oraz metody użytej do zaznaczenia elementu. Na przykład poniższy element <div> zawiera element tabindex, który umożliwia jego zaznaczenie. Ma też styl niestandardowy dla stanu :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Niezależnie od tego, czy klikniesz myszą, czy klawiszem Tab, aby wyświetlić element za pomocą klawisza Tab, element <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 klikniesz ikonę <button> za pomocą myszy w Chrome na urządzeniu z macOS, zobaczysz niestandardowy styl zaznaczenia. 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, dlatego 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 staje się aktywny, a przeglądarka określa na podstawie heurystyki, że wyświetlenie wskaźnika aktywacji byłby przydatny dla użytkownika. W szczególności jeśli ostatnia interakcja użytkownika miała miejsce za pomocą klawiatury, a naciśnięcie klawisza nie zawierało meta, klawisza ALT / OPTION ani klawisza CONTROL, dopasowanie :focus-visible.
Przycisk w przykładzie poniżej będzie selektywnie 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 ma się wyświetlać wskaźnik ostrości
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 ekranem 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 naprawdę bardzo mylący. Zmiana wyglądu elementu <button> za pomocą CSS lub nadanie elementowi atrybutu 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 rozwiązanie tego problemu jest użycie kombinacji kodu :focus i kodu polyfill :focus-visible. 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 {
…
}