Wskaźnik ostrości (często określany przez „pierścień ostrości”) wskazuje element, który aktualnie jest aktywny na stronie. Dla użytkowników, którzy nie mogą korzystać z myszy, ten wskaźnik jest niezwykle ważny, ponieważ działa jako zastępczy wskaźnik myszy.
Jeśli domyślny wskaźnik zaznaczenia w przeglądarce koliduje z Twoim projektem, możesz zmienić jego styl za pomocą CSS. Pamiętaj tylko o użytkownikach klawiatury.
Aby zawsze pokazywać wskaźnik ostrości, użyj aplikacji :focus
Pseudoklasa :focus jest stosowana za każdym razem, gdy element jest zaznaczony, niezależnie od urządzenia wejściowego (myszy, klawiatury, rysika itp.) czy metody zaznaczenia tego elementu. Na przykład element <div> poniżej zawiera element tabindex, który umożliwia zaznaczenie. Ma też styl niestandardowy na potrzeby stanu :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
Niezależnie od tego, czy klikniesz za pomocą myszy, czy za pomocą klawiatury, <div> będzie zawsze wyglądać tak samo.
Sposób określania ostrości w przeglądarkach może być niespójny. To, czy dany element zostanie zaznaczony, może zależeć od przeglądarki i systemu operacyjnego.
Na przykład <button> poniżej również ma własny styl dla stanu :focus.
button:focus {
outline: 4px dashed orange;
}
Jeśli klikniesz <button> za pomocą myszy w Chrome w systemie macOS, powinien wyświetlić się niestandardowy styl ostrości. Niestandardowy styl zaznaczenia nie wyświetli się jednak po kliknięciu <button> w Safari w systemie macOS. Powodem jest to, że w Safari po kliknięciu tego elementu nie jest zaznaczone.
Ponieważ sposób skupienia jest niespójny, może być konieczne przeprowadzenie testów na różnych urządzeniach, aby upewnić się, że style skupienia są akceptowalne dla użytkowników.
Użyj aplikacji :focus-visible, aby wybiórczo wyświetlać wskaźnik ostrości
Nowa pseudoklasa :focus-visible jest stosowana za każdym razem, gdy element jest zaznaczony, a przeglądarka na podstawie heurystyki określa, że wyświetlenie wskaźnika zaznaczenia jest korzystne dla użytkownika. Jeśli ostatnia interakcja z użytkownikiem miała miejsce przy użyciu klawiatury, a naciśnięcie klawisza nie zawierało klawisza meta, ALT / OPTION ani CONTROL, dopasuje się wartość :focus-visible.
Przycisk na przykładzie poniżej będzie selektywnie wyświetlać wskaźnik ostrości. Wyniki, które klikasz myszą, są inne niż w przypadku użycia klawisza Tab po raz pierwszy.
button:focus-visible {
outline: 4px dashed orange;
}
Użyj :focus-within, aby określić styl elementu nadrzędnego zaznaczonego elementu
Pseudoklasa :focus-within jest stosowana do elementu, gdy aktywny jest ten element lub inny element wewnątrz tego elementu.
Pozwala zaznaczyć obszar strony, aby zwrócić na niego uwagę użytkownika. Na przykład poniższy formularz jest aktywny zarówno po zaznaczeniu go, jak i po wybraniu któregokolwiek z przycisków opcji.
form:focus-within {
background: #ffecb3;
}
Kiedy wyświetlać wskaźnik ostrości
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 odpowiedź to „tak”, element sterujący powinien prawdopodobnie zawsze pokazywać wskaźnik zaznaczenia, niezależnie od urządzenia wejściowego używanego do ustawiania ostrości. Dobrym przykładem jest element <input type="text">. Użytkownik będzie musiał przekazywać tekst za pomocą klawiatury, niezależnie od tego, w jaki sposób element wprowadzania tekstu został wcześniej zaznaczony, dlatego warto zawsze wyświetlać wskaźnik zaznaczenia.
Jeśli odpowiedź to „nie”, element sterujący może wyświetlać wybrany wskaźnik zaznaczenia. Dobrym przykładem jest element <button>. Jeśli użytkownik kliknie ją za pomocą myszy lub ekranu dotykowego, czynność zostanie zakończona, a wskaźnik ostrości może nie być konieczne. Jeśli jednak użytkownik porusza się za pomocą klawiatury, warto wyświetlić wskaźnik zaznaczenia, który pozwoli mu zdecydować, czy chce kliknąć element sterujący przy użyciu klawiszy ENTER lub SPACE.
Unikaj: outline: none
Sposób, w jaki przeglądarki decydują, kiedy wskazać wskaźnik fokusu, jest, szczerze mówiąc, bardzo mylący. Zmiana wyglądu elementu <button> za pomocą CSS lub podanie elementu tabindex spowoduje, że domyślny pierścień fokusu w przeglądarce będzie się uruchamiał.
Bardzo często używany jest sposób usuwania wskaźnika ostrości za pomocą kodu CSS, takiego jak:
/* Don't do this!!! */
:focus {
outline: none;
}
Lepszym sposobem rozwiązania tego problemu jest użycie kombinacji kodu :focus i kodu polyfill :focus-visible. Pierwszy blok poniżej pokazuje, jak działa kod polyfill, a w przykładowej aplikacji poniżej znajduje się przykład użycia tego kodu do zmiany wskaźnika zaznaczenia 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 {
…
}