Wskaźnik ostrości (często oznaczony „pierścieniem ostrości”) wskazuje aktualnie zaznaczony element na stronie. W przypadku osób, które nie mogą używać myszy, jest niezwykle ważny, ponieważ zastępuje kursorem myszy.
Jeśli domyślny wskaźnik ostrości przeglądarki koliduje z projektem, możesz użyć CSS, by zmienić jej styl. Pamiętaj tylko o użytkownikach klawiatury!
Używaj :focus, aby zawsze wyświetlać wskaźnik ostrości
:focus
pseudoklasa jest stosowana za każdym razem, gdy element jest zaznaczony, niezależnie od danych wejściowych
urządzenie (mysz, klawiatura, rysik itp.) lub metoda użyta do ustawienia ostrości. Przykład:
<div> poniżej ma element tabindex, który umożliwia jego zaznaczenie. Oferuje również
styl niestandardowy dla stanu :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Niezależnie od tego, czy klikasz ją myszką, czy klawiaturą,
klikasz ją za pomocą klawiatury,
<div> zawsze będzie wyglądać tak samo.
Niestety przeglądarki mogą różnić się od sposobu ustawiania ostrości. Określa, czy może zależeć od przeglądarki i systemu operacyjnego, systemu.
Na przykład poniższy <button> ma również styl niestandardowy dla: :focus
stanu.
button:focus {
outline: 4px dashed orange;
}
Jeśli w Chrome w systemie macOS klikniesz ikonę <button> za pomocą myszy,
jej niestandardowy styl
fokusu. Niestandardowy styl ostrości nie będzie jednak widoczny, jeśli
kliknij <button> w przeglądarce Safari w systemie macOS. To dlatego, że w
Safari element nie jest zaznaczany po jego kliknięciu.
Funkcja ostrości działa niespójnie, więc może to wymagać przeprowadzenia pewnych testów na różnych urządzeniach, aby styl skupienia był akceptowalny dla użytkowników.
Użyj funkcji :focus-visible, aby selektywnie wyświetlać wskaźnik ostrości
Nowy
:focus-visible
pseudoklasa jest stosowana za każdym razem, gdy element zostanie zaznaczony, a
za pomocą heurystyki przeglądarka określa, że wyświetlenie wskaźnika ostrości
korzyści dla użytkownika. Zwłaszcza, jeśli ostatnia interakcja użytkownika
było wykonywane za pomocą klawiatury, a naciśnięcie klawisza nie zawierało meta, ALT / OPTION,
lub CONTROL, klucz :focus-visible zostanie dopasowany.
Na przycisku w przykładzie poniżej będzie wyselekcjonowany wskaźnik ostrości. Jeśli po kliknięciu myszą wyniki są inne niż w przypadku aby przejść do niej klawiszem Tab.
button:focus-visible {
outline: 4px dashed orange;
}
Użyj :focus-within, aby określić styl elementu nadrzędnego zaznaczonego elementu
:focus-within
pseudoklasa jest stosowana do elementu, gdy sam go otrzyma
lub gdy inny element wewnątrz tego elementu zostanie zaznaczony.
Można go wykorzystać do podświetlenia fragmentu strony, aby pokazać większą uwagę użytkownika na tym obszarze. Na przykład poniższy formularz jest zaznaczony zarówno po zaznaczeniu samego formularza oraz gdy dowolny z jego przycisków zaznaczono.
form:focus-within {
background: #ffecb3;
}
Kiedy ma się wyświetlać wskaźnik ostrości
Warto zadać sobie pytanie: „Jeśli użytkownik kliknął ten element sterujący, korzysta z urządzenia mobilnego, spodziewasz się, że będzie wyświetlać klawiaturę?”
Jeśli odpowiedź brzmi „tak”, element sterujący powinien prawdopodobnie zawsze wskazywać
niezależnie od urządzenia wejściowego użytego do ustawienia ostrości. Dobrym przykładem jest
element <input type="text">. Użytkownik musi przesłać dane wejściowe do
element za pomocą klawiatury niezależnie od pierwotnie odebranego elementu wejściowego
ostrość, dlatego dobrze jest zawsze wyświetlać wskaźnik ostrości.
Jeśli odpowiedź brzmi „nie”, Element sterujący może wyświetlać selektywny obraz
wskaźnik. Dobrym przykładem jest element <button>. Jeśli użytkownik kliknie reklamę z
mysz lub ekran dotykowy, działanie zostało zakończone, a wskaźnik ostrości może
być konieczne. Jeśli jednak użytkownik porusza się za pomocą klawiatury,
wyświetlać wskaźnik skupienia, aby użytkownik mógł zdecydować, czy chce
kliknij element sterujący za pomocą klawiszy ENTER lub SPACE.
Unikaj: outline: none
Szczerze mówiąc, sposób, w jaki przeglądarki decyduje, kiedy wyświetlić wskaźnik ostrości,
są niejasne. Zmienianie wyglądu elementu <button> za pomocą CSS lub przekazywania
element tabindex będzie powodował, że domyślny pierścień zaznaczenia w przeglądarce będzie
w piłce nożnej.
Bardzo często stosowanym antywzorcem jest usuwanie wskaźnika ostrości za pomocą elementów CSS, takich jak:
/* Don't do this!!! */
:focus {
outline: none;
}
Lepszym sposobem rozwiązania tego problemu jest użycie kombinacji funkcji :focus i
kod polyfill :focus-visible. Pierwszy blok kodu poniżej pokazuje,
Polyfill działa, a przykładowa aplikacja poniżej zawiera przykład użycia
kod polyfill pozwala zmienić wskaźnik ostrości na 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 {
…
}