Koncentracja

Podcast CSS – 018: koncentracja .

Na swojej stronie klikasz link, który przekierowuje użytkownika do głównej treści witryny. Są one często nazywane linkami pomijania lub linkami do kotwicy. Jeśli taki link zostanie aktywowany za pomocą klawiatury, naciskając klawisze Tab i Enter, wokół głównego kontenera treści jest pierścień. Dlaczego?

Dzieje się tak, ponieważ <main> ma wartość atrybutu tabindex="-1", co oznacza, że można skupić się na nich. Gdy kierowanie jest ustawione na <main>, bo #main-content na pasku adresu URL przeglądarki pasuje do id – otrzymuje fokus automatyczny. W takich sytuacjach kuszące jest usunięcie stylów, ale odpowiednie i przemyślane obchodzenie się z nimi pomaga stworzyć i zwiększało wygodę użytkowników. Może to też być świetna okazja do wzbogacenia interakcji.

Dlaczego fokus jest ważny?

Jako programista stron internetowych Twoim zadaniem jest zadbać o to, by strona internetowa była dostępna i przyjazna dla wszystkich. Jednym z elementów tego odpowiedzialności jest tworzenie stanów skupienia z ułatwieniami dostępu za pomocą usług porównywania cen.

Style zaznaczenia pomagają użytkownikom, którzy korzystają z urządzenia takiego jak klawiatura sterowanie przełącznikiem do poruszania się po witrynie i wchodzenia z nią w interakcje. Jeśli element zostanie zaznaczony i nie będzie go widać, użytkownik może utracić ostrość obrazu. Może to powodować problemy z nawigacją, jeśli: na przykład kliknięcie niewłaściwego linku.

Jak zaznaczone są elementy

Niektóre elementy można automatycznie zaznaczyć. to elementy, które akceptują interakcję i dane wejściowe, np. <a>, <button>, <input> i <select>. Krótko mówiąc, wszystkie elementy formularza, przyciski i linki. Zwykle do poruszania się po elementach witryny służy klawisz Tab, a do przechodzenia do przodu – klawisze Shift + Tab.

Istnieje też atrybut HTML o nazwie tabindex, który umożliwia zmianę indeksu tabulacji – kolejność elementów – za każdym razem, gdy ktoś naciśnie klawisz Tab, jest przesuwany po zmianie skrótu w adresie URL lub przez zdarzenie JavaScript. Jeśli tabindex w elemencie HTML ma wartość 0, może zostać zaznaczony za pomocą klawisza tab i będzie honorować globalny indeks kart, która jest definiowana przez kolejność źródeł dokumentów.

Jeśli ustawisz wartość -1 na tabindex, będzie można odbierać fokus tylko automatycznie, czyli tylko wtedy, gdy wystąpi zdarzenie JavaScript lub zmiana skrótu (która pasuje do id elementu w adresie URL). Jeśli ustawisz tabindex jako wartość wyższą niż 0, zostanie usunięta z globalnego indeksu kart, zdefiniowane przez kolejność źródeł dokumentów. Kolejność kart zostanie zdefiniowana przez wartość tabindex, więc element z atrybutem tabindex="1" będzie zaznaczony np. przed elementem z atrybutem tabindex="2".

Zaznaczenie stylu

Domyślnym zachowaniem przeglądarki po zaznaczeniu elementu jest wyświetlanie 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, za pomocą: :focus, :focus-within i :focus-visible pseudozajęć poznanych w pseudozajęć. Ważne jest ustawienie stylu zaznaczenia, który ma kontrast ze stylem domyślnym elementu. Popularnym sposobem jest np. użycie właściwości outline.

a:focus {
  outline: 2px solid slateblue;
}

właściwość outline może się pojawiać zbyt blisko tekstu linku, ale może w tym pomóc właściwość outline-offset, ponieważ dodaje dodatkowy wizualny padding, nie zmieniając rozmiaru geometrycznego, który wypełnia element. Liczba dodatnia dla outline-offset przesuwa kontur na zewnątrz, wartość ujemna spowoduje wciągnięcie obrysu do wewnątrz.

Obecnie w niektórych przeglądarkach jeśli masz ustawiony atrybut border-radius w elemencie i użyjesz outline, nie pasuje – kontur będzie miał ostre rogi. Z tego powodu łatwo jest użyć zdjęcia box-shadow z niewielkim promieniem rozmycia, bo box-shadow dopasuje się do kształtu w imieniu border-radius, ale ten styl nie będzie się wyświetlał w trybie wysokiego kontrastu systemu Windows. To dlatego, że tryb wysokiego kontrastu systemu Windows nie stosuje cieni. i zwykle ignoruje obrazy tła, aby preferować preferowane ustawienia użytkownika.

W skrócie

Stworzenie stanu zaznaczenia kontrastującego ze stanem domyślnym elementu jest niezwykle ważne. Domyślne style przeglądarki robią to za Ciebie, ale jeśli chcesz to zmienić, pamiętaj o tych kwestiach:

• Nie używaj właściwości outline: none w przypadku elementu, który może być zaznaczony za pomocą klawiatury.
• Nie zastępuj stylów elementu outline elementami box-shadow. ponieważ nie pojawiają się w trybie wysokiego kontrastu systemu Windows.
• Ustaw wartość dodatnią tabindex w elemencie HTML tylko wtedy, gdy jest to absolutnie konieczne.
• Upewnij się, że stan skupienia jest bardzo jasny w porównaniu z stanem domyślnym.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę