The CSS Podcast - 018: Focus
Na stronie klikasz link, który przenosi użytkownika do głównej zawartości witryny. Są one często nazywane linkami do pominięcia lub linkami kotwicznymi. Gdy link jest aktywowany za pomocą klawiatury, za pomocą klawiszy Tab i Enter, kontener główny jest otoczony pierścieniem fokusu. Dlaczego?
Wynika to z faktu, że <main> ma wartość atrybutu tabindex="-1", co oznacza, że można skupić się na niej automatycznie.
Gdy kierujesz reklamy na <main>, ponieważ #main-content na pasku adresu przeglądarki pasuje do id, reklamy te są objęte automatyzacją.
Usunięcie stylów zaznaczenia w takich sytuacjach jest kuszące, ale odpowiednie i ostrożne obchodzenie się z treścią pomaga uzyskać pozytywne i przystępne wrażenia użytkownika.
Może to być też świetne miejsce na urozmaicenie interakcji.
Dlaczego fokus jest ważny?
Jako deweloper witryn internetowych musisz zadbać o to, aby była ona dostępna i w pełni przyjazna dla wszystkich. Tworzenie dostępnych stanów fokusa za pomocą CSS jest częścią tej odpowiedzialności.
Style fokusowania pomagają osobom, które korzystają z urządzenia, np. klawiatury lub przełącznika, w nawigowaniu po witrynie i interakcjach z nią. Jeśli element zostanie zaznaczony i nie będzie wizualnego wskaźnika, użytkownik może stracić wzrok. Może to powodować problemy z nawigacją i niepożądane działanie, jeśli np. klikniesz niewłaściwy link.
Jak zaznaczone są elementy
Niektóre elementy można zaznaczyć automatycznie. Są to elementy, które wymagają interakcji i wprowadzania danych, np. <a>, <button>, <input> i <select>.
Krótko mówiąc, wszystkie elementy formularzy, przyciski i linki.
Zazwyczaj możesz poruszać się po elementach, które można aktywować na stronie, za pomocą klawisza Tab (aby przejść dalej) i Shift + Tab (aby się cofnąć).
Istnieje też atrybut HTML o nazwie tabindex, który umożliwia zmianę indeksu tabulacji (czyli kolejności, w której elementy są zaznaczane), za każdym razem, gdy ktoś naciśnie klawisz Tab lub gdy nastąpi zmiana hasha w adresie URL lub zdarzenie JavaScript.
Jeśli tabindex w elemencie HTML ma wartość 0, może ono zostać skoncentrowane za pomocą klawisza tab i będzie stosować globalny indeks karty, który jest zdefiniowany przez kolejność źródeł dokumentu.
Jeśli ustawisz wartość tabindex na -1, element może zostać skoncentrowany tylko w ramach działania programu, co oznacza, że stanie się tak tylko wtedy, gdy wystąpi zdarzenie JavaScript lub nastąpi zmiana hasha (odpowiadająca wartości id elementu w adresie URL).
Jeśli ustawisz wartość tabindex na wyższą niż 0, zostanie ona usunięta z globalnego indeksu kart, zdefiniowanego na podstawie kolejności źródeł dokumentu.
Kolejność przełączania się kart będzie teraz określana przez wartość atrybutu tabindex,
więc element z wartością tabindex="1" będzie otrzymywał fokus przed elementem z wartością tabindex="2".
Stylizacja
Domyślne zachowanie przeglądarki, gdy element zostanie zaznaczony, to wyświetlenie pierścienia zaznaczenia. Ten pierścień ostrości różni się w zależności od przeglądarki i systemu operacyjnego.
To zachowanie można zmienić za pomocą CSS, używając pseudoklas :focus, :focus-within i :focus-visible, o których mowa w lekcji o pseudoklasach.
Ważne jest ustawienie stylu zaznaczenia, który ma kontrast ze stylem domyślnym elementu.
Typowym podejściem jest na przykład wykorzystanie właściwości outline.
a:focus {
outline: 2px solid slateblue;
}
Właściwość outline może być wyświetlana zbyt blisko tekstu linku, ale można temu zaradzić, dodając właściwość outline-offset, która dodaje dodatkowy wizualny element padding bez wpływu na geometryczny rozmiar elementu.
Dodatnia wartość parametru outline-offset spowoduje przesunięcie konturu na zewnątrz, a ujemna – do wewnątrz.
Obecnie w niektórych przeglądarkach, jeśli masz w elemencie ustawiony border-radius i używasz outline, nie będzie to pasować – zarys będzie miał ostre rogi.
W związku z tym może kusić użycie box-shadow z małym promieniem zamglenia, ponieważ box-shadow przycina kształt, uwzględniając border-radius, ale ten styl nie będzie widoczny w trybie wysokiego kontrastu w systemie Windows.
Dzieje się tak, ponieważ tryb wysokiego kontrastu w Windows nie stosuje cieni i w większości ignoruje obrazy tła, aby preferować ustawienia użytkownika.
W skrócie
Utworzenie stanu skupienia, który kontrastuje z domyślnym stanem elementu, jest niezwykle ważne. Domyślne style przeglądarki już to robią, ale jeśli chcesz zmienić to zachowanie, pamiętaj o tych kwestiach:
- Unikaj używania
outline: nonew przypadku elementów, które mogą być zaznaczane za pomocą klawiatury. - Unikaj zastępowania stylów
outlinestylamibox-shadow. nie są one widoczne w trybie wysokiego kontrastu w systemie Windows. - Wartość dodatnią dla atrybutu
tabindexw elemencie HTML należy ustawiać tylko wtedy, gdy jest to konieczne. - Upewnij się, że stan ostrości jest bardzo wyraźny w porównaniu ze stanem domyślnym.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o fokusowaniu
Które z tych elementów można automatycznie ustawić w centrum uwagi?
<a><p><button><input><output><select>Które z tych urządzeń wejściowych może ustawić fokus?