Koncentracja

Elementy interaktywne, w tym elementy sterujące formularza, linki i przyciski, są: domyślnie można zaznaczyć i zaznaczyć klawisz Tab. Elementy wyświetlane na kartach są częścią kolejności sekwencyjnej nawigacji w dokumencie. Inne elementy są bezczynne, co oznacza, że nie są interaktywne. Atrybuty HTML umożliwiają przekształcanie elementów interaktywnych w bezwładne elementy interaktywne.

Domyślnie kolejność elementów nawigacyjnych jest taka sama jak kolejność wizualna, czyli porządek kodu źródłowego. Istnieją HTML które mogą zmieniać tę kolejność oraz właściwości CSS, które mogą zmieniać wizualną kolejność treści. Zmienianie kart zamówienia z kolejnością renderowania HTML lub wizualnego w CSS, mogą negatywnie wpływać na wrażenia użytkownika.

Nie zmieniaj postrzeganej i rzeczywistej kolejności znaków tabulacji za pomocą arkuszy CSS i HTML. Jak widać w 2 przykładach poniżej, kolejność kart różniące się od oczekiwanej kolejności, są mylące dla użytkowników i wpływają negatywnie na wrażenia użytkowników.

W tym przykładzie wartość atrybutu tabindex sprawił, że kolejność kart jest chaotyczna:

W tym przykładzie usługa porównywania cen spowodowała rozbieżność między kolejnością tabulacji a wizualną kolejnością treści:

Deklaracja flex-flow: row-reverse; odwróciła kolejność wizualną. Ponadto właściwość order CSS została zastosowana do szóstego słowa („This”), co wizualnie przeniosło go jedno słowo. Sekwencja tabulacji to kolejność kodów, która nie odpowiada już kolejności wizualnej, co powoduje odłączenie. dla użytkowników klawiatury.

Interaktywne elementy obojętne

Atrybuty contenteditable i tabindex, które są atrybutami globalnymi, można dodać do dowolnego elementu, dzięki czemu będzie można je zaznaczyć. cały proces. Elementy, które można zaznaczyć, można też zaznaczać myszką lub wskaźnikiem za pomocą ikony autofocus lub za pomocą skryptu, np. element.focus().

Atrybut tabindex

Globalny atrybut tabindex wprowadzony w atrybuty, umożliwia wskazywanie elementów, które w innym przypadku nie zostałyby zaznaczone zaznaczenie, zwykle klawiszem Tab, z czego pochodzi nazwa.

Atrybut tabindex przyjmuje wartość będącą liczbą całkowitą. Wartość ujemna powoduje, że element można zaznaczyć, ale nie można go aktywować za pomocą klawisza Tab. O Wartość tabindex właściwości 0 sprawia, że element można zaznaczyć i kliknąć klawisz Tab, dodając element, w którym jest stosowany do sekwencyjnego zaznaczenie kolejności nawigacji w kolejności kodu źródłowego. Wartość 1 lub większa sprawia, że element można zaznaczyć i kliknąć klawisz Tab, ale dodaje ją do priorytetowej sekwencji tabulacji i jak widzimy powyżej, należy jej unikać.

Na tej stronie przycisk udostępniania <share-action> jest elementem niestandardowym. tabindex="0" dodaje te elementy, których nie można zwykle zaznaczyć w domyślnej kolejności klawiszy tabulacji:

<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 jeszcze jeden element niestandardowy: lokalna nawigacja zawiera element niestandardowy element o ujemnej 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 aktywować za pomocą klawisza Tab. Element może otrzymywać fokus, np. przez HTMLElement.focus(), ale nie jest jego częścią kolejności sekwencyjnej nawigacji. W przypadku elementów, których nie można zaznaczyć, których nie można ustawić, zgodnie z konwencją należy używać elementu tabindex="-1". Pamiętaj, że jeśli dodasz do elementu interaktywnego tabindex="-1", nie będzie już można przechodzić do niego za pomocą klawisza Tab.

Metody element.focus() można użyć do ustawienia zaznaczenia na elementy, które można zaznaczyć. Pamiętaj, że przeglądarki przewijają zaznaczone elementy, aby je zobaczyć. Z tego powodu unikaj stosowania element.focus({preventScroll:true}), ponieważ skupienie się na niewidocznym elemencie negatywnie wpływa na wrażenia użytkowników.

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

Elementy z wartością tabindex o wartości 1 lub większej znajdują się w osobnej sekwencji kart. Jak zauważysz w Codepen, użycie klawisza Tab rozpoczyna się w osobnej sekwencji, w kolejności od najniższej do najwyższej wartości, przed przejściem przez pozostałe wartości w sekwencji standardowej. (nie ustawiono tabindex lub tabindex="0") w kolejności źródłowej:

Funkcja tabindex z wartością dodatnią umieszcza element w sekwencji zaznaczenia według priorytetu, co może prowadzić do chaosu w kolejności zaznaczenia. Unikaj modyfikowania kolejności DOM za pomocą typu tabindex. Zmienione zamówienia za pomocą tabulatora nie tylko mogą prowadzić do złośliwych użytkowników nie są łatwe w obsłudze dla programistów.

Atrybut contenteditable

Atrybut contenteditable został omówiony wcześniej. Ustawienie contenteditable="true" dla dowolnego elementu powoduje, że można go edytować. i znajdować się w kolejności kart. Ustawianie ostrości jest podobne do ustawienia tabindex="0", ale nie takie samo. Zagnieżdżone Elementy contenteditable można zaznaczyć, ale nie można ich aktywować za pomocą klawisza Tab. Aby zagnieżdżony element contenteditable był dostępny za pomocą klawisza Tab, dodaj tabindex="0", co spowoduje dodanie go do kolejności sekwencyjnej nawigacji.

Podkreślenie elementów interaktywnych

Atrybut autofocus

Z kolei wartość logiczna autofocus jest atrybutem globalnym. , który można ustawić na dowolnym elemencie, nie sprawia, że element obojętny jest interaktywny. Po wczytaniu strony pierwszy element, który można zaznaczyć, z ustawionym atrybutem autofocus będzie zaznaczony, o ile ten element będzie wyświetlany i nie będzie zagnieżdżony w <dialog>.

Automatyczne ustawianie ostrości na treści może być mylące. Ustawienie autofocus elementu sterującego formularza oznacza, że element sterujący formularza przewinie się tak, że będzie widoczne podczas wczytywania strony. Wszyscy użytkownicy, w tym użytkownicy czytników ekranu i użytkownicy z małymi widocznymi obszarami, mogą „zobacz” instrukcji dotyczących formularza, a nawet przewinięcie jej poza zwykle widoczną etykietę elementu sterującego formularza. autofocus nie zmienia kolejności sekwencyjnej nawigacji w dokumencie. Elementy w sekwencji poprzedzające tag jest po prostu pomijany. Z tego względu nie zalecamy dodawania atrybutu autofocus.

Wyjątkiem od reguły „nie używaj autofocus” rekomendacja uwzględnia atrybut autofocus w elementach <dialog>. Po otwarciu okna przeglądarka automatycznie zaznacza pierwszy element interaktywny w elemencie <dialog>, który można zaznaczyć. co oznacza, że element autofocus nie jest konieczny. Jeśli chcesz mieć pewność, że określony element interaktywny w oknie otrzyma zaznacz, gdy otworzy się okno, dodaj do tego elementu atrybut autofocus.

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

Atrybut autofocus ustawiony dla elementu zamykania <button> zapewnia fokus po otwarciu okna dialogowego. Jako pierwszy element w oknie dialogowym, w każdym przypadku zostałby zaznaczony. Domyślnie po otwarciu okna dialogowego pierwszy element, który można zaznaczyć, okno zostanie zaznaczone, chyba że inny element w nim ma ustawiony atrybut autofocus.

Wprowadzanie elementów interaktywnych w bezwładność

Istnieją też atrybuty HTML, które mogą usuwać elementy interaktywne z sekwencji tabulacji. Uwzględniając ujemną wartość tabindex do elementów, które można zaznaczyć, dodaj atrybut disabled do dodatkowych elementów sterujących formularza oraz globalny atrybut inert w kontenerze sprawia, że nie można korzystać z tablicy. Te 3 atrybuty NIE są wymienne.

Wartość ujemna tabindex

Jak dowiedzieliśmy się powyżej, atrybut tabindex z wartością ujemną sprawia, że element można zaznaczyć, ale nie można na nim korzystać za pomocą klawisza Tab. Podczas dodawania 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ą oznaczone jako contenteditable nie jest konieczne. włącznie z tabindex z wartością ujemną powoduje usunięcie z fokusu sekwencyjnego elementów, które normalnie można wyświetlić za pomocą tabulatora; kolejność nawigacji.

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

Wyłączono

Atrybut wartość logiczna wyłączony powoduje, że elementy sterujące formularza są włączone. oraz jego elementy podrzędne, o ile takie istnieją, niezaznaczone. Wyłączone elementy sterujące formularza nie mogą zostać zaznaczone, nie będą otrzymywać zdarzeń kliknięcia i nie są przesyłane po przesłaniu formularza. Uwaga: disabled nie jest atrybutem globalnym. Dotyczy tych usług: <button>, <input>, <optgroup>, <option>, <select>, <textarea>, elementy niestandardowe związane z formularzem oraz <fieldset>. Jeśli ustawisz wartość <optgroup> lub <fieldset>, wszystkie elementy sterujące formularza podrzędnego będą wyłączone, z wyjątkiem zawartości pierwszego elementu <legend> w elemencie <fieldset>.

Te same elementy, które obsługują disabled, można również kierować za pomocą komponentu :disabled. i pseudoklasy :enabled. Elementy, które zostały wyłączone za pomocą tagu W arkuszu stylów klienta użytkownika styl atrybutu disabled jest zwykle jasnoszary, nawet jeśli atrybut accent-color jest ustawiony.

Jeśli atrybut jest atrybutem logicznym, jego obecność wyłącza element, który byłby w przeciwnym razie włączony. nie możesz ustawić go na false. Aby ponownie włączyć wyłączony element, trzeba usunąć atrybut, zwykle za pomocą Element.removeAttribute('disabled').

Właściwość HTMLInputElement.disabled umożliwia sprawdzenie, jeśli dane wejściowe są wyłączone. disabled nie jest atrybutem globalnym, więc nie jest dziedziczony z elementu HTMLElement, a wszystkie uzupełniające interfejsu z elementami, np. HTMLSelectElement, HTMLTextareaElement ma tę samą właściwość tylko do odczytu.

Atrybut disabled nie ma zastosowania do normalnie elementów inert, które można zaznaczyć za pomocą elementów tabindex lub contenteditable. Nie dotyczy też samego elementu <form>. Aby je wyłączyć, możesz użyć globalnego atrybutu inert.

Atrybut inert

Gdy do elementu zostanie dodany globalny atrybut wartości logicznej inert, ten element i cała zagnieżdżona treść zostaną wyłączone – ani czy klikalny, ani nie można użyć klawisza Tab, i jest usunięty z drzewa ułatwień dostępu. Metodę inert można stosować do dowolnego elementu, ale zwykle używany do tworzenia sekcji treści, np. poza ekranem lub w inny sposób ukryty.

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

Używanie właściwości inert w przypadku widocznych treści bez stylów wskazujących na bezwładność może negatywnie wpłynąć na wrażenia użytkownika. Jako treść bezczynna jest niedostępna dla użytkowników czytników ekranu, dlatego może powodować dezorientację, gdy widzą oni treści na ekranie. niedostępne dla narzędzi ułatwień dostępu. Daj się wyraźnie zauważyć dzięki CSS.

Upewnij się, że zaznaczenie nigdy nie przechodzi na niewidoczne treści. wszystko renderowane poza ekranem, które nie jest automatycznie nie są widoczne, kiedy zaznaczenie powinno zostać ustawione jako bezczynne. Jeśli treść jest ukryta, ale pojawia się po zaznaczeniu, jak np. link pomiń do treści na tej stronie, nie musi być on bezczynny.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę.