Wskaźnik fokusu, często oznaczony „pierścieniem fokusu”, wskazuje element, na którym skupia się uwaga na stronie. Dla użytkowników, którzy nie mogą lub nie chcą używać myszy, ten wskaźnik jest niezwykle ważny, ponieważ zastępuje wskaźnik myszy.
Jeśli domyślny wskaźnik fokusu przeglądarki nie pasuje do Twojego projektu, możesz zmienić jego styl za pomocą CSS. Pamiętaj o użytkownikach.
Używaj :focus, aby zawsze wyświetlać wskaźnik zaznaczenia
Klasa pseudoelementu :focus jest stosowana do elementów, które są aktywne, niezależnie od używanej metody wprowadzania danych lub urządzenia (np. myszy, klawiatury lub rysika).
Na przykład ten element <div> ma element tabindex, który umożliwia ustawienie na nim fokusu, oraz niestandardowy styl dla stanu :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Niezależnie od tego, jakiego urządzenia używasz, <div> wygląda tak samo po ustawieniu ostrości.
Niestety przeglądarki mogą w różny sposób stosować fokus. To, czy element zostanie zaznaczony, może zależeć od przeglądarki i systemu operacyjnego.
Na przykład ten <button> ma niestandardowy kod CSS dla swojego :focus
stanu.
button:focus {
outline: 4px dashed orange;
}
Jeśli w Chrome na macOS klikniesz <button> myszą, powinien być widoczny niestandardowy styl zaznaczenia. Jeśli jednak klikniesz <button> w Safari na macOS, nie zobaczysz niestandardowego stylu zaznaczenia. Dzieje się tak, ponieważ w Safari element nie jest zaznaczany po kliknięciu.
Zachowanie fokusu jest niespójne. Przetestuj stronę na różnych urządzeniach i z różnymi danymi wejściowymi, aby upewnić się, że style fokusu są akceptowalne dla użytkowników.
Używanie :focus-visible do selektywnego wyświetlania wskaźnika zaznaczenia
Klasa pseudo :focus-visible jest stosowana, gdy element zostaje zaznaczony, a przeglądarka (na podstawie heurystyki) stwierdzi, że wyświetlenie wskaźnika zaznaczenia będzie korzystne dla użytkownika. W szczególności, jeśli ostatnia interakcja użytkownika miała miejsce przy użyciu klawiatury, a naciśnięty klawisz nie był klawiszem meta, ALT, OPTION ani CONTROL, to :focus-visible będzie pasować.
Przycisk w poniższym przykładzie wybiórczo wyświetla wskaźnik fokusu. Jeśli klikniesz myszą, wyniki będą inne niż w przypadku, gdy najpierw użyjesz klawiatury, aby przejść do tego elementu.
button:focus-visible {
outline: 4px dashed orange;
}
Używanie selektora :focus-within do określania stylu elementu nadrzędnego zaznaczonego elementu
Klasa
:focus-within
pseudo jest stosowana do elementu, gdy sam element otrzymuje fokus lub gdy fokus otrzymuje element podrzędny. Może służyć do wyróżniania regionu strony, aby zwrócić uwagę użytkownika na ten obszar.
Na przykład formularz jest aktywny, gdy jest zaznaczony sam formularz, a także gdy jest zaznaczony dowolny z jego przycisków opcji.
form:focus-within {
background: #ffecb3;
}
Kiedy wyświetlać wskaźnik zaznaczenia
Warto zadać sobie pytanie: „Czy po kliknięciu tego elementu sterującego na urządzeniu mobilnym spodziewasz się, że wyświetli się klawiatura?”.
- Jeśli tak: element sterujący powinien zawsze wyświetlać wskaźnik fokusu niezależnie od urządzenia wejściowego. Na przykład prawie zawsze dotyczy to elementu
<input type="text">. Użytkownik musi wysłać dane wejściowe do elementu za pomocą klawiatury, niezależnie od tego, jak element wejściowy uzyska fokus. - Jeśli nie: element może selektywnie wyświetlać wskaźnik zaznaczenia. Na przykład gdy użytkownik kliknie
<button>myszą lub na ekranie dotykowym, działanie zostanie wykonane. Wskaźnik zaznaczenia może być niepotrzebny. Jeśli jednak użytkownik porusza się po stronie za pomocą klawiatury, warto wyświetlić wskaźnik fokusu, aby mógł zdecydować, czy chce aktywować element sterujący za pomocą klawisza ENTER lub SPACE.
Unikaj outline: none
Sposób, w jaki przeglądarki decydują, kiedy narysować wskaźnik zaznaczenia, jest szczerze mówiąc bardzo
mylący. Zmiana wyglądu elementu <button> za pomocą CSS lub nadanie elementowi atrybutu tabindex powoduje włączenie domyślnego zachowania pierścienia fokusu w przeglądarce.
Czasami deweloperzy usuwają wskaźnik fokusu za pomocą CSS:
/* Don't do this!!! */
:focus {
outline: none;
}
Lepszym sposobem na obejście tego problemu jest połączenie :focus i :focus-visible polyfill. Pierwszy blok kodu pokazuje, jak działa polyfill, a przykładowa aplikacja poniżej zawiera przykład użycia polyfill do zmiany wskaźnika fokusu na przycisku.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows 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 {
...
}