Koncentracja

Podcast o CSS – 018: koncentracja

Na stronie internetowej klikasz link, który przenosi użytkownika do głównej treści witryny. Są one często nazywane linkami pomijania lub zakotwiczonymi linkami. Po aktywowaniu tego linku za pomocą klawiatury za pomocą klawiszy Tab i Enter wokół głównego kontenera treści pojawi się pierścień zaznaczenia. Dlaczego?

Wynika to z faktu, że <main> ma wartość atrybutu tabindex="-1", co oznacza, że można go określić automatycznie. Gdy celem kierowania jest kierowanie na element <main> (ponieważ #main-content na pasku adresu przeglądarki jest zgodny z id), element jest aktywny w sposób zautomatyzowany. W takich sytuacjach kuszące jest usunięcie stylów ostrości, ale należy je traktować z rozwagą, aby wrażenia użytkowników były łatwo i przyjemne. Może to też być świetny sposób na zwiększenie zainteresowania interakcjami.

Dlaczego koncentracja jest ważna?

Jako programista stron internetowych Twoim zadaniem jest sprawienie, by strona była przystępna i promowała integrację społeczną. Odpowiedzialność za tworzenie dostępnych stanów skupienia jest częścią tych zadań.

Style ostrości pomagają użytkownikom poruszać się po stronie i wchodzić z nią w interakcje za pomocą urządzeń takich jak klawiatura lub przełącznik. Jeśli jakiś element zostanie zaznaczony, a nie ma wizualnego wskaźnika, użytkownik może stracić ostrość. Może to powodować problemy z nawigacją, a w rezultacie spowodować niepożądane zachowanie, np. w przypadku kliknięcia niewłaściwego linku.

Jak wybierane są elementy

Niektóre elementy można automatycznie zaznaczyć. Są to elementy, które przyjmują interakcję i wprowadzanie danych wejściowych, np. <a>, <button>, <input> i <select>. Krótko mówiąc, są to wszystkie elementy formularzy, przyciski i linki. Po elementach witryny, które można zaznaczyć, możesz zazwyczaj poruszać się po klawiszu Tab, aby przejść do następnego elementu, lub Shift + Tab, aby się cofnąć.

Dostępny jest też atrybut HTML o nazwie tabindex, który umożliwia zmianę indeksu tabulacji (czyli kolejności, w jakiej zaznaczone są elementy) za każdym razem, gdy użytkownik naciśnie klawisz Tab lub gdy zaznaczenie zostanie przeniesione wraz ze zmianą skrótu w adresie URL bądź przez zdarzenie JavaScript. Jeśli tabindex w elemencie HTML ma wartość 0, może on być aktywny za pomocą klucza Tab i będzie uwzględniać globalny indeks tabulacji, który jest zdefiniowany przez kolejność źródeł dokumentów.

Jeśli ustawisz tabindex na -1, może on skupić się tylko w sposób zautomatyzowany, czyli tylko wtedy, gdy nastąpi zdarzenie JavaScript lub nastąpi zmiana skrótu (dopasowanie do id elementu w adresie URL). Jeśli ustawisz tabindex na wartość wyższą niż 0, zostanie ona usunięta z globalnego indeksu kart zdefiniowanego według kolejności źródeł dokumentów. Kolejność znaków tabulacji będzie teraz określana przez wartość tabindex, więc element z atrybutem tabindex="1" zostanie zaznaczony przed elementem z atrybutem tabindex="2", np. przed elementem z atrybutem tabindex="2".

Skoncentrowany styl

Domyślnym działaniem przeglądarki po zaznaczeniu elementu jest pokazanie pierścienia ostrości. 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, korzystając z pseudoklas :focus, :focus-within i :focus-visible opisanych w pseudozajęciach. Ważne jest, aby ustawić styl zaznaczenia, który ma kontrast z domyślnym stylem elementu. Typowym podejściem jest np. stosowanie właściwości outline.

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

Właściwość outline może wydawać się zbyt blisko tekstu linku, ale właściwość outline-offset może w tym pomóc, ponieważ dodaje dodatkowe wizualne właściwości padding bez wpływu na rozmiar geometryczny wypełnianego elementu. Wartość dodatnia w polu outline-offset spowoduje wypchnięcie obrysu na zewnątrz, a ujemna – do wewnątrz.

Obecnie w niektórych przeglądarkach, jeśli w elemencie masz ustawiony atrybut border-radius i używasz atrybutu outline, nie uda się go dopasować – kontur będzie miał ostre rogi. Z tego powodu warto użyć elementu box-shadow z niewielkim promieniem rozmycia, bo box-shadow przycina kształt na cześć border-radius, ale ten styl nie wyświetli się w trybie wysokiego kontrastu systemu Windows. Dzieje się tak, ponieważ tryb wysokiego kontrastu systemu Windows nie stosuje cieni i w większości przypadków ignoruje obrazy tła, aby preferować ustawienia preferowane przez użytkownika.

W skrócie

Utworzenie stanu, który kontrastuje z domyślnym stanem elementu, jest niezwykle ważne. Domyślne style przeglądarki już to zrobią, ale jeśli chcesz zmienić to działanie, pamiętaj o tych kwestiach:

  • Unikaj używania outline: none w elementach, które mogą korzystać z klawiatury.
  • Unikaj zastępowania stylów outline elementem box-shadow. ponieważ nie są one wyświetlane w trybie wysokiego kontrastu systemu Windows.
  • Ustaw wartość dodatnią dla tabindex w elemencie HTML tylko wtedy, gdy jest to absolutnie konieczne.
  • Sprawdź, czy stan zaznaczenia jest bardzo jasny, a nie domyślny.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o koncentracji

Które z tych elementów to elementy, które można zaznaczyć automatycznie?

<a>
🎉
<p>
Spróbuj jeszcze raz.
<button>
🎉
<input>
🎉
<output>
Spróbuj jeszcze raz.
<select>
🎉

Które z tych urządzeń wejściowych mogą ustawiać ostrość?

Pad do gier
Pady do gier często wysyłają zdarzenia klawiatury po naciśnięciu przycisków.
Klawiatura
Niewątpliwie powoduje skupienie przy przeglądaniu sieci.
Mysz
Mysz wymaga wzroku i nie skupia się już na używanych elementach. Dawniej wszystkie przeglądarki koncentrowały się na elementach takich jak przyciski po kliknięciu, ale to się zmieniło.
Technologie wspomagające osoby z niepełnosprawnością (czytnik ekranu, przełącznik itp.)
Niewątpliwie powoduje skupienie przy przeglądaniu sieci.
Ziemniak
Ziemniak może służyć jako wskaźnik na ekranach dotykowych, ale nie powoduje on zaznaczenia po interakcji z wejściami na ekranie.