Zarządzanie fokusem użytkownika za pomocą :focus-visible

To będzie drugi post z małej serii poświęconej dostępności formularzy. Jeśli przegapiłeś pierwszy post, zajrzyj Dostępne formularze z pseudoklasami. W tym poście przyjrzymy się usłudze :focus-visible i sposobom jej wykorzystania w witrynach internetowych!

Skup się na punkcie dotykowym

Zanim przejdziemy dalej :focus-visible, przyjrzyjmy się jeszcze raz, jak to zrobić :focus działa w twoim CSS. Fokus to wizualny wskaźnik interakcji z elementem za pomocą klawiatury, myszy, gładzika lub technologii wspomagającej. Niektóre elementy, np. łącza, przyciski i elementy formularzy, mają charakter naturalnie interaktywny. Chcemy mieć pewność, że nasi użytkownicy wiedzą, gdzie się znajdują i jakie interakcje podejmują.

Pamiętaj, nie rób tego w swoim CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Kiedy usuniesz fokus, usuniesz go dla WSZYSCY! Chcemy mieć pewność, że utrzymamy koncentrację.

Jeśli z jakiegoś powodu musisz usunąć fokus, upewnij się, że istnieje również opcja rezerwowa :focus style dla Twoich użytkowników. Ta wersja zastępcza może pasować do kolorów Twojej marki, ale upewnij się, że te kolory są również dostępne. Jeśli marketing, projektowanie lub branding nie podobają się domyślnym stylom pierścienia ostrości, nadszedł czas, aby rozpocząć rozmowy i współpracować z nimi w sprawie najlepszego sposobu ponownego dodania go.

Co to jest focus-visible?

Pseudoklasa, :focus-visible, jest taki sam jak nasz domyślny :focus pseudoklasa. Daje użytkownikowi wskaźnik, że coś jest skupione na stronie. Sposób w jaki piszesz :focus-visible jest cięty i suszony:

:focus-visible {
  /* ... */
}

Podczas używania :focus-visible w przypadku określonego elementu składnia wygląda mniej więcej tak:

.your-element:focus-visible {
  /*...*/
}

Świetna rzecz w używaniu :focus-visible czy możesz wyróżnić swój element, jasne i odważne! Nie musisz się martwić, że pokaże, czy element został kliknięty/dotknięty. Jeśli zdecydujesz się nie implementować tej klasy, domyślnym będzie pierścień fokusowy agenta użytkownika, co dla niektórych jest niepożądane.

Historia z focus-visible

Zanim mieliśmy :focus-visible, zastosowany zostanie styl agenta użytkownika :focus do większości elementów na stronie; przyciski, łącza itp. Spowoduje to zastosowanie konturu lub „pierścienia ostrości” do elementu, na którym można ustawić ostrość. Uznano to za brzydkie, większości nie podobał się domyślny pierścień ostrości udostępniany przez przeglądarkę. Ponieważ pierścień ostrości był niekorzystny dla oka, większość autorów usunęła go… bez zmiany. Pamiętaj, kiedy będziesz usuwać :focus, zmniejsza to użyteczność i sprawia, że ​​korzystanie z niej staje się niedostępne dla użytkowników klawiatury.

W obecnym stanie sieci przeglądarka nie wskazuje już w widoczny sposób skupienia na różnych elementach, gdy są one aktywne. Zamiast tego przeglądarka korzysta z różnych heurystyk, aby określić, kiedy może pomóc użytkownikowi, zapewniając w zamian pierścień fokusu. Według Khan Academy, heurystyka to, „technika, która kieruje algorytmem w celu znalezienia dobrych wyborów”.

Oznacza to, że przeglądarka może wykryć, czy użytkownik korzysta z interfejsu za pomocą klawiatury, myszy lub gładzika, i na podstawie tego typu danych wejściowych dodaje lub usuwa pierścień ostrości. Przykład w tym poście ilustruje interakcję wejściową.

Na początku dni :focus-visible używaliśmy A Wypełnienie do obsługi pierścienia ostrości stworzonego przez Alice Boxhall i Briana Kardella, Mozilla również wyszła z własną pseudoklasą, :moz-focusring, przed oficjalną specyfikacją. Jeśli chcesz dowiedzieć się więcej o początkach pierścienia ostrości, zajrzyj tutaj Odlewy A11y z Robem Dodsonem.

Skoncentruj się na znaczeniu

Istnieje wiele powodów, dla których skupienie jest ważne w Twojej aplikacji. Po pierwsze, jak wspomniałem powyżej, my, jako ambasadorzy sieci, musimy upewnić się, że zapewniamy najlepsze i dostępne doświadczenia, jakie tylko możemy. Nie chcemy, aby którykolwiek z naszych użytkowników zgadywał, gdzie się znajduje, podczas nawigacji po witrynie.

Przykładem, który zawsze przychodzi na myśl, jest tzw Strona internetowa Dwóch Niewidomych Braci. Jeśli wejdziesz na stronę i klikniesz/dotkniesz (działa to na telefonie komórkowym), zamknięte oko w lewym dolnym rogu, zobaczysz otwarte oko i rozpocznie się symulacja. U obu braci, Bradforda i Bryana Manningów, w młodym wieku zdiagnozowano chorobę Stargardta. Choroba Stargardta jest formą zwyrodnienia plamki oka. Z czasem obaj bracia całkowicie oślepną. Odwiedź witrynę i kliknij oko, aby zobaczyć, jak widzą.

Gdybyś był na ich miejscu i musiałbyś poruszać się po stronie, chciałbyś mieć pewność, że dokładnie wiesz, gdzie jesteś przez cały czas trwania doświadczenia. Pierścień ostrości daje Ci tę moc.

Demo

Poniższe demo pokazuje, jak to zrobić :focus-visible działa po dodaniu do CSS. Pierwsza część filmu przedstawia nawigację za pomocą myszy, druga przedstawia nawigację za pomocą samej klawiatury. Nagrałem też siebie, żeby pokazać, że faktycznie przerzuciłem się z myszy na klawiaturę.

Przeglądarka przewiduje, co zrobić z pierścieniem ostrości na podstawie moich danych wejściowych (klawiatura/mysz), a następnie dodaje pierścień ostrości do tych elementów. W tym przypadku, gdy nawiguję po tym przykładzie za pomocą klawiatury, wszystko jest skupione. Podczas korzystania z myszy fokus jest ustawiany tylko na wprowadzanych danych, a przyciski nie. Jeśli usuniesz :focus-visible, przeglądarka zastosuje domyślny pierścień ostrości.

Poniższy kod ma zastosowanie :focus-visible do elementów, na których można ustawić ostrość.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Jeśli chcesz określić label lub przycisk odbierania :focus-visible po prostu przygotuj zajęcia z input or button odpowiednio.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Wsparcie

Jeśli przeglądarka nie obsługuje :focus-visible możesz mieć rezerwę, aby poradzić sobie z interakcją. Poniższy kod pochodzi z Plac zabaw MDN. Możesz użyć @wspiera z reguły lub „zapytanie o funkcję” aby sprawdzić wsparcie. Należy pamiętać o jednej rzeczy: regułę należy umieścić na górze kodu lub zagnieździć w innej grupie at-rule.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Dalsze obawy dotyczące dostępności

Kwestie związane z dostępnością, o których należy pamiętać podczas tworzenia doświadczenia:

• Upewnij się, że kolory wybrane dla wskaźnika ostrości, jeśli w ogóle, są nadal dostępne, zgodnie z informacjami udokumentowanymi w dokumencie Kontrast nietekstowy WCAG 2.2 (poziom AA)
• Przeciążenie poznawcze może powodować niepokój użytkownika. Pamiętaj o zachowaniu spójności stylów różnych elementów interaktywnych

Wsparcie dla przeglądarki

Linki

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• PlatoData.Network Pionowe generatywne AI. Wzmocnij się. Dostęp tutaj.
• PlatoAiStream. Inteligencja Web3. Wiedza wzmocniona. Dostęp tutaj.
• PlatonESG. Węgiel Czysta technologia, Energia, Środowisko, Słoneczny, Gospodarowanie odpadami. Dostęp tutaj.
• Platon Zdrowie. Inteligencja w zakresie biotechnologii i badań klinicznych. Dostęp tutaj.
• Źródło: https://css-tricks.com/managing-user-focus-with-focus-visible/