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, wokół kontenera głównej treści pojawia się pierścień. Dlaczego?
Dzieje się tak, ponieważ element <main> ma wartość atrybutu tabindex="-1", co oznacza, że można go skoncentrować za pomocą kodu.
Gdy kierujesz reklamy na <main>, ponieważ #main-content na pasku adresu przeglądarki pasuje do id, reklamy te są objęte automatyzacją.
W takich sytuacjach może pojawić się pokusa usunięcia stylów fokusa, ale odpowiednie i ostrożne zarządzanie fokusem pomaga zapewnić użytkownikom dobre i dostępne wrażenia.
Może to być też świetne miejsce na urozmaicenie interakcji.
Dlaczego skupienie uwagi jest ważne?
Jako deweloper witryn internetowych masz za zadanie uczynić je dostępnymi i włączającymi dla wszystkich. Tworzenie dostępnych stanów fokusa za pomocą CSS jest częścią tej odpowiedzialności.
Style fokusowania pomagają osobom, które używają urządzenia, np. klawiatury lub przełącznika, do nawigacji po witrynie i interakcji z nią. Jeśli element zostanie zaznaczony, a nie będzie żadnego wizualnego wskazania, użytkownik może utracić orientację, co jest zaznaczone. Może to powodować problemy z nawigacją i niepożądane działanie, jeśli np. klikniesz niewłaściwy link.
Jak elementy są zaznaczane
Niektóre elementy są automatycznie zaznaczane. Są to elementy, które umożliwiają interakcję i wprowadzanie danych, takie jak <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, oraz 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 zaznaczenie zostanie przeniesione przez zmianę 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 uwzględniać 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 programu, co oznacza, że stanie się tak tylko wtedy, gdy nastąpi zdarzenie JavaScript lub zmiana hasha (odpowiadająca wartości id elementu w adresie URL).
Jeśli ustawisz wartość tabindex na większą niż 0,
zostanie ona usunięta z globalnego indeksu kart,
zdefiniowanego według 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, aby ustawić styl fokusu, który różni się od domyślnego stylu 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 rozmiar geometryczny 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 mogą ustawiać fokus?