Wybór

Elementy interaktywne, w tym elementy sterujące formularza, linki i przyciski, są domyślnie zaznaczane i można je zaznaczać za pomocą klawisza Tab. Elementy, na których można ustawić fokus, są częścią sekwencyjnej kolejności nawigacji za pomocą fokusu w dokumencie. Pozostałe elementy są bezwładne, co oznacza, że nie są interaktywne. Atrybuty HTML umożliwiają wyłączenie interaktywnych elementów i włączenie interaktywności elementów nieaktywnych.

Domyślnie kolejność fokusu nawigacji jest taka sama jak kolejność wizualna, czyli kolejność kodu źródłowego. Istnieją atrybuty HTML, które mogą zmienić tę kolejność, oraz właściwości CSS, które mogą zmienić wizualną kolejność treści. Zmiana kolejności tabulacji 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 tabulacji za pomocą CSS i HTML. Jak pokazują 2 przykłady poniżej, kolejność kart, która różni się od oczekiwanej wizualnie, jest myląca dla użytkowników i pogarsza ich komfort.

W tym przykładzie wartość atrybutu tabindex spowodowała, że kolejność tabulacji jest chaotyczna:

W tym przykładzie CSS spowodował rozbieżność między kolejnością tabulacji a wizualną kolejnością 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ść tabulacji jest zgodna z kolejnością kodu, która nie odpowiada już kolejności wizualnej, co utrudnia korzystanie z klawiatury.

Umożliwianie interakcji z elementami nieaktywnymi

Atrybuty contenteditable i tabindex, jako atrybuty globalne, można dodać do dowolnego elementu, dzięki czemu można je ustawić jako elementy, na których można skupić uwagę. Elementy, na których można ustawić fokus, można też zaznaczać za pomocą myszy lub wskaźnika, ustawiając atrybut autofocus lub za pomocą skryptu, np. element.focus().

Atrybut tabindex

Atrybut globalny tabindex, wprowadzony w atrybutach, umożliwia uzyskanie fokusu przez elementy, które w innym przypadku nie mogłyby go otrzymać, zwykle za pomocą klawisza Tab, stąd nazwa.

Wartością atrybutu tabindex jest liczba całkowita. Wartość ujemna sprawia, że element jest fokusowalny, ale nie można go wybrać za pomocą klawisza Tab. Wartość tabindex 0 sprawia, że element staje się elementem, na którym można ustawić fokus i do którego można przejść za pomocą klawisza Tab. Dodaje ona element, do którego jest stosowana, do sekwencyjnej kolejności nawigacji za pomocą fokusu w kolejności kodu źródłowego. Wartość 1 lub większa sprawia, że element można zaznaczyć i przejść do niego za pomocą klawisza Tab, ale dodaje go do sekwencji tabulacji o wyższym priorytecie, dlatego należy jej unikać.

Na tej stronie przycisk udostępniania <share-action> jest elementem niestandardowym. Atrybut tabindex="0" dodaje ten element, który zwykle nie jest zaznaczany, do domyślnej kolejności zaznaczania klawiaturą:

<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>

Na tej stronie znajduje się inny element niestandardowy: lokalna nawigacja 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 wybrać za pomocą klawisza Tab. Element może otrzymywać fokus, np. za pomocą HTMLElement.focus(), ale nie jest częścią sekwencyjnej kolejności nawigacji za pomocą fokusu. W przypadku elementów, które nie są dostępne za pomocą klawisza Tab, ale można na nich ustawić fokus, stosuje się konwencję tabindex="-1". Jeśli dodasz atrybut tabindex="-1" do elementu interaktywnego, nie będzie można go już wybierać za pomocą klawisza Tab.

Metody element.focus() można używać do ustawiania fokusu na elementach, które można zaznaczyć. Przeglądarki przewijają zaznaczone elementy, aby były widoczne. Z tego powodu unikaj używania elementuelement.focus({preventScroll:true}), ponieważ skupianie się na niewidocznym elemencie pogarsza wrażenia użytkowników.

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

Elementy z wartością tabindex równą 1 lub większą są uwzględniane w osobnej sekwencji tabulacji. Jak widać w Codepen, tabulacja zaczyna się w osobnej sekwencji, w kolejności od najmniejszej do największej wartości, zanim przejdzie do elementów w zwykłej sekwencji (bez ustawionego atrybutu tabindex lub z atrybutem tabindex="0") w kolejności źródłowej:

tabindex z wartością dodatnią umieszcza element w sekwencji zaznaczania o wyższym priorytecie, co może prowadzić do chaosu w kolejności zaznaczania. Unikaj modyfikowania kolejności elementów DOM za pomocą tabindex. Zmiana kolejności tabulacji nie tylko pogarsza komfort użytkowników, ale też utrudnia deweloperom zarządzanie nią i jej utrzymanie.

Atrybut contenteditable

Atrybut contenteditable został omówiony wcześniej. Ustawienie contenteditable="true" w przypadku dowolnego elementu sprawia, że można go edytować, ustawić na nim fokus i włączyć do kolejności tabulacji. Działanie związane z ogniskowaniem jest podobne do ustawienia tabindex="0", ale nie takie samo. Zagnieżdżone elementy contenteditable można zaznaczyć, ale nie można ich wybrać za pomocą klawisza Tab. Aby element zagnieżdżony contenteditable można było zaznaczyć za pomocą klawisza Tab, dodaj atrybut tabindex="0", który doda go do sekwencyjnej kolejności nawigacji za pomocą fokusu.

Dodawanie autofocus do elementów interaktywnych

Wartość logiczna autofocus jest atrybutem globalnym, który można ustawić w dowolnym elemencie, ale nie sprawia, że element bezwładny staje się interaktywny. Po wczytaniu strony fokus otrzymuje pierwszy element, który można zaznaczyć i który ma atrybuty autofocus, o ile jest on wyświetlany i nie jest zagnieżdżony w elemencie <dialog>.

Automatyczne ustawianie fokusu na treści może być mylące. Ustawienie autofocus w przypadku elementu sterującego formularza oznacza, że element sterujący formularza jest widoczny po wczytaniu strony. Wszyscy użytkownicy, w tym osoby korzystające z czytników ekranu i użytkownicy urządzeń z małymi obszarami wyświetlania, mogą nie „widzieć” instrukcji dotyczących formularza, a nawet przewijać element sterujący formularza, który zwykle ma widoczną etykietę. Atrybut autofocus nie zmienia kolejności nawigacji po dokumencie za pomocą klawisza Tab. Elementy w sekwencji poprzedzające element automatycznie ustawiany jako aktywny są pomijane. Z tych powodów nie zalecamy uwzględniania atrybutu autofocus.

Wyjątkiem od zalecenia „nie używaj atrybutu autofocus” jest umieszczenie atrybutu autofocus w elementach <dialog>. Gdy otworzysz okno, przeglądarka automatycznie ustawi fokus na pierwszym interaktywnym elemencie, na którym można ustawić fokus, w obrębie elementu <dialog>. Oznacza to, że nie musisz dodawać atrybutu autofocus do elementu. Jeśli chcesz mieć pewność, że po otwarciu okna określony element interaktywny w nim otrzyma fokus, dodaj do tego elementu atrybut autofocus.

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

Atrybut autofocus ustawiony na elemencie zamykającym <button> umożliwia mu otrzymanie fokusu po otwarciu okna. Jako pierwszy element okna dialogowego i tak zostałby aktywowany. Domyślnie po otwarciu okna dialogowego zaznaczany jest pierwszy element, na którym można ustawić fokus, chyba że inny element w tym oknie ma ustawiony atrybut autofocus.

Ustawianie elementów interaktywnych jako nieaktywnych

Istnieją też atrybuty HTML, które mogą usuwać elementy interaktywne z sekwencji tabulacji. Dodanie ujemnej wartości tabindex do elementów, na których można ustawić fokus, dodanie atrybutu disabled do pomocniczych elementów sterujących formularza i dodanie globalnego atrybutu inert do kontenera sprawiają, że elementy nie mogą być wybierane za pomocą klawisza Tab. Te 3 atrybuty 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 atrybutu tabindex="0" do elementu, który domyślnie może być zaznaczany, 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 zwykle można zaznaczyć za pomocą klawisza Tab, z sekwencyjnej kolejności nawigacji za pomocą klawisza Tab.

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

Wyłączono

Atrybut logiczny disabled uniemożliwia zaznaczenie elementów formularza, do których jest zastosowany, oraz ich elementów podrzędnych, jeśli takie istnieją. Wyłączone elementy sterujące formularza nie mogą być aktywne, nie otrzymują zdarzeń kliknięcia i nie są przesyłane po przesłaniu formularza.

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

Te same elementy, które obsługują disabled, można też kierować za pomocą pseudoklas :disabled i :enabled. Elementy wyłączone za pomocą atrybutu disabled są zwykle stylizowane jako jasnoszare w arkuszu stylów klienta użytkownika, nawet jeśli ustawiono accent-color.

Jest to atrybut logiczny, więc jego obecność wyłącza element, który w przeciwnym razie byłby włączony. Nie można ustawić wartości false. Aby ponownie włączyć wyłączony element, musisz usunąć atrybut, zwykle za pomocą kodu Element.removeAttribute('disabled').

Właściwość HTMLInputElement.disabled umożliwia sprawdzenie, czy dane wejściowe są wyłączone. Atrybut disabled nie jest atrybutem globalnym, więc nie jest dziedziczony z interfejsu HTMLElement, ale każdy obsługujący go interfejs elementu, np. HTMLSelectElement, HTMLTextareaElement, ma tę samą właściwość tylko do odczytu.

Atrybut disabled nie ma zastosowania do zwykłych elementów inert, które można zaznaczyć za pomocą atrybutów 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 inert globalny atrybut logiczny, ten element i wszystkie zagnieżdżone treści zostaną wyłączone, co oznacza, że nie będzie można ich kliknąć ani wybrać za pomocą klawisza Tab. Są one też usuwane z drzewa ułatwień dostępu. Atrybut inert można zastosować do dowolnego elementu, ale zwykle jest on używany w przypadku sekcji treści, np. treści poza ekranem lub w inny sposób ukrytych.

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

Używanie atrybutu inert w widocznych treściach bez stylów wskazujących na ich bezwładność może pogorszyć wrażenia użytkowników. Treści nieaktywne nie są dostępne dla użytkowników czytników ekranu, co może być mylące, gdy osoby korzystające z czytników ekranu widzą na ekranie treści, które nie są dostępne dla narzędzi ułatwień dostępu. Spraw, aby stan bezwładności był bardzo widoczny dzięki CSS.

Upewnij się, że zaznaczenie nigdy nie przechodzi do niewidocznych treści. Wszystkie elementy renderowane poza ekranem, które nie pojawiają się automatycznie po ustawieniu na nich fokusu, powinny być nieaktywne. Jeśli treść jest ukryta, ale staje się widoczna po ustawieniu na niej fokusu, np. link „Przejdź do treści”, nie trzeba jej uaktywniać.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ostrości.