Fokus

Elementy interaktywne, w tym elementy sterujące formularza, linki i przyciski, są domyślnie możliwe do zaznaczenia i przechodzenia za pomocą klawisza Tab. Elementy, które można zaznaczyć za pomocą klawisza Tab, są częścią sekwencyjnej kolejności zaznaczania w dokumencie. Inne elementy są bierne, co oznacza, że nie są interaktywne. Za pomocą atrybutów HTML można sprawić, że elementy interaktywne będą bierne, a elementy bierne – interaktywne.

Domyślnie kolejność zaznaczania podczas nawigacji jest taka sama jak kolejność wizualna, czyli kolejność w kodzie źródłowym. Istnieją atrybuty HTML, które mogą zmienić tę kolejność, oraz właściwości CSS, które mogą zmienić kolejność wizualną treści. Zmiana kolejności przechodzenia za pomocą klawisza Tab za pomocą kodu HTML lub kolejności renderowania wizualnego za pomocą kodu CSS może pogorszyć wygodę użytkowników.

Nie zmieniaj postrzeganej i rzeczywistej kolejności przechodzenia za pomocą klawisza Tab za pomocą kodu CSS i HTML. Jak pokazują 2 poniższe przykłady, kolejność przechodzenia za pomocą klawisza Tab, która różni się od kolejności wizualnej, dezorientuje użytkowników i pogarsza ich wygodę.

W poniższym przykładzie wartość atrybutu tabindex spowodowała, że kolejność przechodzenia za pomocą klawisza Tab jest chaotyczna:

W tym przykładzie kod CSS spowodował rozbieżność między kolejnością przechodzenia za pomocą klawisza Tab a kolejnością wizualną treści:

Deklaracja flex-flow: row-reverse; odwróciła kolejność wizualną. Dodatkowo do szóstego słowa „This” zastosowano właściwość CSS order, która wizualnie przesunęła to słowo. Kolejność przechodzenia za pomocą klawisza Tab jest zgodna z kolejnością kodu, która nie odpowiada już kolejności wizualnej. Powoduje to rozłączenie dla użytkowników klawiatury.

Niektóre funkcje CSS, w tym flexbox, grid, positioning, transforms, and multi-column, mogą zmienić kolejność wizualną treści. Sprawdź swoje treści, przechodząc przez nie za pomocą klawiatury: użyj kombinacji shift + tab, aby cofać się w treści. Użyj kodu CSS, aby wskazać, który element jest zaznaczony. Nie zmieniaj kolejności elementów, które można zaznaczyć, za pomocą kodu CSS.

Ważne jest, aby zachować logiczną kolejność przechodzenia za pomocą klawisza Tab we wszystkich rozmiarach okna.

Umożliwianie interakcji z elementami biernymi

Atrybuty contenteditable i tabindex, które są atrybutami globalnymi, można dodać do dowolnego elementu, dzięki czemu można go zaznaczyć. Elementy możliwe do zaznaczenia można też zaznaczyć za pomocą myszy lub wskaźnika, ustawiając autofocus atrybut lub za pomocą skryptu, np. za pomocą element.focus().

Atrybut tabindex

Globalny tabindex atrybut, wprowadzony w atrybutach, umożliwia zaznaczanie elementów, które w przeciwnym razie nie mogłyby zostać zaznaczone, zwykle za pomocą klawisza Tab, stąd nazwa.

Atrybut tabindex przyjmuje jako wartość liczbę całkowitą. Wartość ujemna sprawia, że element można zaznaczyć, ale nie można go zaznaczyć za pomocą klawisza Tab. Wartość tabindex równa 0 sprawia, że element można zaznaczyć i zaznaczyć za pomocą klawisza Tab, dodając element, do którego jest stosowany, do sekwencyjnej kolejności zaznaczania w kolejności kodu źródłowego. Wartość 1 lub większa sprawia, że element można zaznaczyć i zaznaczyć za pomocą klawisza Tab, ale dodaje go do kolejności przechodzenia za pomocą klawisza Tab z priorytetem i należy jej unikać.

Na tej stronie przycisk udostępniania, <share-action>, jest elementem niestandardowym. Atrybut tabindex="0" dodaje ten element do domyślnej kolejności przechodzenia za pomocą klawisza Tab:

<share-action authors="@front-end.social/@estellevw" data-action="click"
  data-category="web.dev" data-icon="share" data-label="share, mastodon"
  role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Dodatkowo nawigacja lokalna ma element niestandardowy z ujemną wartością tabindex:

<web-navigation-drawer type="standard" tabindex="-1">

Atrybut tabindex z wartością ujemną sprawia, że element można zaznaczyć, ale nie można go zaznaczyć za pomocą klawisza Tab. Element może zostać zaznaczony, np. za pomocą HTMLElement.focus(), ale nie jest częścią sekwencyjnej kolejności zaznaczania. Konwencja dotycząca elementów, których nie można zaznaczyć za pomocą klawisza Tab, ale można je zaznaczyć, polega na użyciu tabindex="-1". Jeśli dodasz tabindex="-1" do elementu interaktywnego, nie będzie można go już zaznaczyć za pomocą klawisza Tab.

Metody element.focus() można użyć do ustawienia zaznaczenia na elementach, które można zaznaczyć. Przeglądarki przewijają zaznaczone elementy do widoku. Z tego powodu unikaj używania element.focus({preventScroll:true}), ponieważ zaznaczanie niewidocznego elementu pogarsza wygodę użytkowników.

Jeśli chcesz wysłać zapytanie do dokumentu, aby sprawdzić, który element jest zaznaczony, użyj właściwości tylko do odczytu Document.activeElement.

Elementy z atrybutem tabindex o wartości 1 lub większej są uwzględniane w osobnej kolejności przechodzenia za pomocą klawisza Tab. Jak w poniższym Codepen, przechodzenie za pomocą klawisza Tab zaczyna się w osobnej kolejności, w kolejności od najmniejszej do największej wartości, zanim przejdzie do elementów w zwykłej kolejności (bez ustawionego atrybutu tabindex lub z atrybutem tabindex="0") w kolejności kodu źródłowego:

Atrybut tabindex z wartością dodatnią umieszcza element w kolejności zaznaczania z priorytetem, co może prowadzić do chaosu w kolejności zaznaczania. Unikaj modyfikowania kolejności DOM za pomocą tabindex. Zmieniona kolejność przechodzenia za pomocą klawisza Tab może pogorszyć wygodę użytkowników i jest trudna w utrzymaniu.

Atrybut contenteditable

Atrybut contenteditable został omówiony wcześniej. Ustawienie contenteditable="true" w dowolnym elemencie sprawia, że można go edytować, zaznaczać i uwzględniać w kolejności przechodzenia za pomocą klawisza Tab. Zachowanie zaznaczenia jest podobne do ustawienia tabindex="0", ale nie takie samo. Zagnieżdżone elementy contenteditable można zaznaczyć, ale nie można ich zaznaczyć za pomocą klawisza Tab. Aby zagnieżdżony element contenteditable można było zaznaczyć za pomocą klawisza Tab, dodaj tabindex="0", który dodaje go do sekwencyjnej kolejności zaznaczania.

Ustawianie atrybutu autofocus w elementach interaktywnych

Chociaż atrybut logiczny autofocus jest atrybutem globalnym, który można ustawić w dowolnym elemencie, nie sprawia on, że element bierny staje się interaktywny. Po wczytaniu strony zaznaczenie otrzymuje pierwszy element, który można zaznaczyć, z atrybutami autofocus o ile ten element jest wyświetlany i nie jest zagnieżdżony w <dialog>.

Automatyczne ustawianie zaznaczenia na treści może dezorientować użytkowników. Gdy ustawisz autofocus w elemencie sterującym formularza, ten element sterujący formularza zostanie przewinięty do widoku po wczytaniu strony. Użytkownicy, w tym użytkownicy czytnika ekranu i użytkownicy z małymi oknami, mogą nie zauważyć instrukcji formularza lub nawet etykiety elementu sterującego formularza. Ponadto atrybut autofocus nie zmienia sekwencyjnej kolejności zaznaczania w dokumencie. Elementy w kolejności, które występują przed elementem z automatycznym zaznaczeniem, są pomijane. Z tych powodów należy unikać używania atrybutu autofocus.

Wyjątkiem od zalecenia „nie używaj autofocus” jest umieszczenie atrybutu autofocus w elementach <dialog>. Gdy otworzy się okno dialogowe, przeglądarka automatycznie zaznacza pierwszy element interaktywny, który można zaznaczyć, w obrębie <dialog>, co oznacza, że nie trzeba dodawać autofocus do elementu. Jeśli chcesz mieć pewność, że po otwarciu okna dialogowego zaznaczenie otrzyma określony element interaktywny w oknie dialogowym, dodaj do tego elementu atrybut autofocus.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Atrybut autofocus ustawiony w przycisku zamykania <button> umożliwia zaznaczenie go po otwarciu okna dialogowego. Jako pierwszy element w oknie dialogowym w każdym przypadku otrzymałby zaznaczenie. Domyślnie po otwarciu okna dialogowego zaznaczenie otrzymuje pierwszy element, który można zaznaczyć, w oknie dialogowym, chyba że inny element w oknie dialogowym ma ustawiony atrybut autofocus.

Ustawianie elementów interaktywnych jako biernych

Istnieją też atrybuty HTML, które mogą usuwać elementy interaktywne z kolejności przechodzenia za pomocą klawisza Tab. Dodanie ujemnej wartości tabindex do elementów, które można zaznaczyć, dodanie atrybutu disabled do obsługiwanych elementów sterujących formularza i dodanie globalnego atrybutu inert do kontenera sprawiają, że elementy nie mogą być zaznaczane za pomocą klawisza Tab. Te 3 atrybuty są całkowicie oddzielne i nie są zamienne.

Ujemna wartość tabindex

Atrybut tabindex z wartością ujemną sprawia, że element można zaznaczyć, ale nie można go zaznaczyć za pomocą klawisza Tab. Dodawanie tabindex="0" do elementu, który można zaznaczyć domyślnie, w tym linków, przycisków, elementów sterujących formularza i elementów, które są contenteditable nie jest konieczne. Dodanie atrybutu tabindex z wartością ujemną usuwa elementy, które można zaznaczyć za pomocą klawisza Tab, z sekwencyjnej kolejności zaznaczania.

Ujemna wartość tabindex uniemożliwia użytkownikom klawiatury zaznaczanie elementów interaktywnych, ale nie wyłącza elementu. Użytkownicy wskaźnika nadal mogą zaznaczać element. Aby wyłączyć element, użyj atrybutu disabled.

Wyłączono

Atrybut logiczny disabled sprawia, że elementy sterujące formularza, do których jest stosowany, i ich elementy podrzędne, jeśli istnieją, nie mogą być zaznaczane. Wyłączonych elementów sterujących formularza nie można zaznaczyć, nie otrzymują zdarzeń kliknięcia i nie są przesyłane po przesłaniu formularza.

disabled nie jest atrybutem globalnym. Dotyczy elementów <button>, <input>, <optgroup>, <option>, <select>, <textarea>, elementów niestandardowych powiązanych z formularzem i <fieldset>. Gdy jest ustawiony w <optgroup> lub <fieldset>, wszystkie elementy sterujące formularza podrzędnego są wyłączone, z wyjątkiem zawartości pierwszego elementu <fieldset>'s first <legend>.

Te same elementy, które obsługują disabled, można też kierować za pomocą :disabled i :enabled pseudoklas. Elementy wyłączone za pomocą atrybutu disabled są zwykle stylizowane na jasnoszary kolor za pomocą arkusza stylów agenta użytkownika, nawet jeśli ustawiony jest accent-color.

Atrybut logiczny, obecność atrybutu wyłącza element, który w przeciwnym razie byłby włączony. Nie można ustawić go na false. Aby ponownie włączyć wyłączony element, należy usunąć atrybut, zwykle za pomocą Element.removeAttribute('disabled').

Właściwość HTMLInputElement.disabled umożliwia sprawdzenie, czy pole input jest wyłączone. Ponieważ disabled nie jest atrybutem globalnym, nie jest dziedziczony z HTMLElement, ale każdy interfejs elementu obsługującego, taki jak HTMLSelectElement, HTMLTextareaElement, ma tę samą właściwość tylko do odczytu.

Atrybut disabled nie ma zastosowania do elementów domyślnie inert, które można zaznaczyć za pomocą atrybutu tabindex lub contenteditable, ani do elementu <form>. Aby wyłączyć te elementy, można użyć globalnego atrybutu inert.

Atrybut inert

Gdy do elementu zostanie dodany globalny atrybut logiczny inert, ten element i cała zagnieżdżona treść zostaną wyłączone, co oznacza, że nie można ich kliknąć ani zaznaczyć za pomocą klawisza Tab. Zostaną też usunięte z drzewa ułatwień dostępu. Chociaż atrybut inert można zastosować do dowolnego elementu, jest on zwykle używany w przypadku sekcji treści, takich jak treści poza ekranem lub w inny sposób ukryta treść.

Gdy do elementów sterujących formularza zastosujesz atrybut disabled, przeglądarka zastosuje domyślny styl i można go stylizować za pomocą :disabled pseudoklasy. Atrybut inert nie zawiera żadnych wskaźników wizualnych i nie ma pasującej pseudoklasy (chociaż pasuje selektor atrybutu [inert] ).

Używanie atrybutu inert w widocznych treściach bez stylów wskazujących na bierność może pogorszyć wygodę użytkowników. Ponieważ treści bierne nie są dostępne dla użytkowników czytnika ekranu, może to powodować dezorientację, gdy użytkownicy czytnika ekranu widzą na ekranie treści, które nie są dostępne dla narzędzi ułatwień dostępu. Spraw, aby bierność była bardzo widoczna za pomocą kodu CSS.

Upewnij się, że zaznaczenie nigdy nie przechodzi do niewidocznych treści. Wszystkie elementy renderowane poza ekranem, które nie pojawiają się automatycznie w widoku po zaznaczeniu, powinny być bierne inert. Jeśli treść jest ukryta ale pojawia się w widoku po zaznaczeniu, np. link „Przejdź do treści”, nie trzeba jej ustawiać jako biernej.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat zaznaczenia.