Koncentracja

Elementy interaktywne, w tym elementy sterujące formularza, linki i przyciski, domyślnie można zaznaczyć i kliknąć za pomocą klawisza Tab. Elementy możliwe do wyboru są częścią sekwencyjnej nawigacji fokusu w dokumencie. Pozostałe elementy są obojętne, czyli nie są interaktywne. Atrybuty HTML umożliwiają obróbkę elementów interaktywnych w sposób bezwładny.

Domyślnie kolejność fokusów w nawigacji jest taka sama jak kolejność elementów wizualnych, która jest kolejnością kodu źródłowego. Istnieją atrybuty HTML, które mogą zmieniać tę kolejność, a właściwości CSS – wizualny porządek treści. Zmiana kolejności tabulatorów na podstawie kodu HTML lub kolejności renderowania wizualnego w CSS może mieć negatywny wpływ na wrażenia użytkownika.

Nie zmieniaj widocznej i rzeczywistej kolejności tabulatorów za pomocą arkuszy CSS i HTML. Jak widać na 2 przykładach, kolejność kart różniąca się od oczekiwanej kolejności wizualnej może wprowadzać użytkowników w błąd i niekorzystnie wpływać na ich wygodę.

W tym przykładzie wartość atrybutu tabindex sprawiła, że kolejność tabulatorów jest chaotyczna:

W tym przykładzie CSS stworzyła rozbieżność między kolejnością tabulacji a wizualną kolejnością treści:

Deklaracja flex-flow: row-reverse; odwróciła porządek wizualny. Dodatkowo do szóstego słowa „This” (to), które je przesunęło się, zastosowano właściwość CSS order. Ta sekwencja jest ułożona w kodzie w postaci kodu, który nie odpowiada już wizualnej kolejności, co powoduje rozłączenie użytkowników klawiatury.

Nadawanie elementom bezwładnym treści interaktywnych

Atrybuty contenteditable i tabindex to atrybuty globalne, które można dodawać do dowolnego elementu, dzięki czemu można je zaznaczyć. Elementy, które można zaznaczyć, można też zaznaczać za pomocą myszy lub wskaźnika, ustawiając atrybut autofocus lub używając skryptu, np. za pomocą element.focus().

Atrybut tabindex

Wprowadzony w atrybutach globalny atrybut tabindex umożliwia uaktywnienie elementów, które w innym przypadku nie zostałyby zaznaczone, aby je aktywować. Zwykle za pomocą klawisza Tab – stąd nazwa.

Wartość atrybutu tabindex jest liczbą całkowitą. Wartość ujemna sprawia, że element można zaznaczyć, ale nie można go nacisnąć klawiszem Tab. Wartość tabindex wynosząca 0 sprawia, że element można zaznaczyć i wybrać klawisz Tab, dodając element, do którego jest on stosowany, do kolejności sekwencyjnej nawigacji z fokusem w kolejności kodu źródłowego. Wartość 1 lub większa sprawia, że element można zaznaczyć i kliknąć klawisz Tab, ale dodaje go do sekwencji tabulatorów z priorytetem. Jak już wspomnieliśmy, należy tego unikać.

Przycisk udostępniania <share-action> jest na tej stronie elementem niestandardowym. tabindex="0" dodaje ten element, którego nie można zwykle zaznaczyć, do domyślnej kolejności tabulacji na klawiaturze:

<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 jest też 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 nacisnąć klawiszem Tab. Ten element może być aktywny, na przykład przez HTMLElement.focus(), ale nie należy on do kolejności sekwencyjnej nawigacji zaznaczenia. W przypadku elementów, które nie są możliwe do zaznaczenia, obowiązuje konwencja tabindex="-1". Pamiętaj, że jeśli dodasz do elementu interaktywnego pole tabindex="-1", nie będzie można go już używać klawiszem Tab.

Metoda element.focus() może służyć do ustawiania zaznaczenia elementów z możliwością zaznaczenia. Zwróć uwagę, że przeglądarki przewijają zaznaczone elementy, aby były widoczne. Dlatego unikaj stosowania właściwości element.focus({preventScroll:true}), ponieważ skupienie się na niewidocznym elemencie może źle wpłynąć na wrażenia użytkowników.

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

Elementy z atrybutem tabindex o wartości co najmniej 1 są uwzględnione w oddzielnej sekwencji kart. Jak zauważysz w Codepen, tabulator zaczyna się w osobnej kolejności od najniższej do najwyższej wartości, a następnie przechodzi przez kolejne elementy w zwykłej kolejności (bez ustawionego zbioru tabindex, lub tabindex="0") w kolejności źródłowej:

tabindex z wartością dodatnią powoduje, że element znajduje się w pierwszej kolejności w sekwencji fokusu, co może prowadzić do chaosu w kolejności fokusu. Unikaj modyfikowania kolejności DOM za pomocą tabindex. Zmienione zamówienia kart nie tylko źle wpływają na wrażenia użytkowników, ale też trudno jest nimi zarządzać.

Atrybut contenteditable

Atrybut contenteditable został omówiony wcześniej. Ustawienie contenteditable="true" dla dowolnego elementu umożliwia jego edytowanie i zaznaczanie oraz umożliwia zmianę kolejności kart. Działanie jest podobne do ustawienia tabindex="0", ale nie jest takie samo. Zagnieżdżone elementy contenteditable można zaznaczyć, ale nie można ich naciskać Tab. Aby umożliwić korzystanie z zagnieżdżonego elementu contenteditable za pomocą klawisza Tab, dodaj element tabindex="0", który doda go do sekwencyjnej kolejności nawigacji po zaznaczeniu.

Skupianie się na elementach interaktywnych

Atrybut autofocus

Wartość logiczna autofocus to atrybut globalny, który można ustawić dla dowolnego elementu, ale nie sprawia, że element bezwładny jest interaktywny. Po załadowaniu strony aktywny jest pierwszy element, który można zaznaczyć i ma ustawiony atrybut autofocus, o ile jest on wyświetlany, a nie zagnieżdżony w elemencie <dialog>.

Automatyczne ustawianie ostrości treści może być mylące. Ustawienie autofocus w elemencie sterującym formularza oznacza, że element sterujący formularza będzie się wyświetlał po wczytaniu strony. Wszyscy użytkownicy, w tym użytkownicy czytników ekranu i użytkownicy z małym widocznym obszarem, mogą nie „zobaczyć” instrukcji dotyczących formularza. Może nawet nie przejść poza normalnie widoczną etykietę elementu sterującego formularza. Atrybut autofocus nie zmienia kolejności sekwencyjnej nawigacji fokusu w dokumencie. Elementy w sekwencji poprzedzające element z autofokusem są po prostu pomijane. Z tego powodu nie zalecamy dodawania atrybutu autofocus.

Wyjątkiem od rekomendacji „nie używaj: autofocus” jest podawanie atrybutu autofocus w elementach <dialog>. Po otwarciu okna przeglądarka automatycznie ustawi w <dialog> pierwszy element interaktywny, który można zaznaczyć. Oznacza to, że użycie właściwości autofocus do elementu nie jest konieczne. Jeśli chcesz mieć pewność, że po otwarciu okna określony element interaktywny w oknie zostanie zaznaczony, dodaj do niego atrybut autofocus.

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

Atrybut autofocus ustawiony w momencie zamknięcia <button> sprawia, że jest on aktywny po otwarciu okna. Jako pierwszy element w oknie, i tak został zaznaczony. Domyślnie po otwarciu okna dialogowego zostanie zaznaczony pierwszy możliwy do zaznaczenia element, chyba że inny element w tym oknie ma ustawiony atrybut autofocus.

Zniekształcenie elementów interaktywnych

Istnieją też atrybuty HTML, które mogą usuwać interaktywne elementy z sekwencji tabulatorów. Użycie wykluczającego elementu tabindex w elementach, które można zaznaczyć, użycie atrybutu disabled do dodatkowych elementów sterujących formularza i dodanie globalnego atrybutu inert do kontenera sprawia, że elementy nie da się aktywować. Te trzy atrybuty NIE są wymienne.

Ujemna wartość: tabindex

Jak dowiedzieliśmy się powyżej, atrybut tabindex z wartością ujemną sprawia, że element można zaznaczyć, ale nie można go otworzyć za pomocą klawisza Tab. Dodanie elementu tabindex="0" do elementu domyślnego możliwego do zaznaczenia w przypadku linków, przycisków, elementów sterujących formularza i elementów, które mają wartość contenteditable, nie jest konieczne. Dodanie operatora tabindex z wartością ujemną powoduje usunięcie elementów, które można zwykle aktywować za pomocą klawisza Tab, z kolejności fokusu w sekwencji.

Wartość ujemna tabindex uniemożliwia użytkownikom klawiatury skupienie się na elementach interaktywnych, ale nie wyłącza tego elementu. Użytkownicy mogą nadal skupić się na elemencie. Aby wyłączyć element, użyj atrybutu disabled.

Wyłączono

Atrybut boolean Disable (wyłączone) sprawia, że elementy sterujące formularza, do których jest on stosowany, oraz ich elementy podrzędne (jeśli występują) nie mogą być aktywne. Wyłączonych elementów sterujących formularza nie można zaznaczyć, nie rejestrują zdarzeń kliknięcia ani nie są przesyłane po przesłaniu formularza. Uwaga disabled nie jest atrybutem globalnym. Obowiązuje w przypadku <button>, <input>, <optgroup>, <option>, <select>, <textarea>, elementów niestandardowych powiązanych z formularzem oraz <fieldset>. Jeśli zasada jest ustawiona na <optgroup> lub <fieldset>, wszystkie elementy podrzędne formularza są wyłączone z wyjątkiem zawartości pierwszego elementu <legend> <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 oznaczone jako jasnoszary na podstawie arkusza stylów klienta użytkownika, nawet jeśli ustawiono atrybut accent-color.

Obecność atrybutu, która jest atrybutem wartości logicznej, wyłącza element, który w przeciwnym razie jest włączony. Nie możesz go ustawić na wartość false. Aby ponownie włączyć wyłączony element, musisz usunąć atrybut, zwykle za pomocą metody Element.removeAttribute('disabled').

Właściwość HTMLInputElement.disabled pozwala sprawdzić, czy dane wejściowe są wyłączone. disabled nie jest atrybutem globalnym, więc nie jest dziedziczony z elementu HTMLElement, ale każdy interfejs elementu pomocniczego, np. HTMLSelectElement czy 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ą tabindex lub contenteditable. Nie dotyczy też samego elementu <form>. Aby je wyłączyć, można użyć globalnego atrybutu inert.

Atrybut inert

Po dodaniu do elementu globalnego atrybutu wartości logicznej inert ten element oraz cała zagnieżdżona zawartość zostają wyłączone (nie można ich kliknąć ani używać tabulacji) i zostaną usunięte z drzewa ułatwień dostępu. Atrybut inert można zastosować do dowolnego elementu, ale zwykle stosuje się go w sekcji treści, np. poza ekranem lub w inny sposób ukryty.

Gdy stosujesz atrybut disabled do elementów sterujących formularza, przeglądarka określa styl domyślny, a jego styl można określać za pomocą pseudoklasy :disabled. Atrybut inert nie ma żadnych wskaźników wizualnych ani pasującej pseudoklasy (chociaż selektor atrybutów [inert] jest taki sam).

Używanie atrybutu inert w przypadku widocznych treści, które nie zawierają stylów wskazujących na bezwładność, może negatywnie wpłynąć na wrażenia użytkowników. Niewłaściwe treści nie są dostępne dla użytkowników czytników ekranu, co może dezorientować, gdy widzą oni na ekranie treści niedostępne dla narzędzi ułatwień dostępu. Wyraźnie wyraź obojętność za pomocą CSS.

Zadbaj o to, aby zaznaczenie nigdy nie znalazło się w treści niewidocznej. Wszystko, co renderowane poza ekranem, które nie jest automatycznie widoczne po zaznaczeniu, należy ustawić jako neutralne. Jeśli treść jest ukryta, ale wyświetla się po zaznaczeniu (np. po kliknięciu linku do treści na tej stronie), nie trzeba jej zmieniać.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę dotyczącą koncentracji.