Фокус

Интерактивные элементы, включая элементы управления формами , ссылки и кнопки, по умолчанию поддерживают фокусировку и вкладку. Вкладки с вкладками являются частью последовательного порядка перемещения фокуса по документу. Остальные элементы инертны, то есть неинтерактивны. С помощью HTML-атрибутов можно сделать интерактивные элементы инертными, а инертные — интерактивными.

По умолчанию порядок фокуса навигации совпадает с визуальным порядком, который задан в исходном коде. Существуют HTML-атрибуты, которые могут изменить этот порядок, и CSS-свойства, которые также могут изменить визуальный порядок контента. Изменение порядка вкладок с помощью HTML или порядка визуального отображения с помощью CSS может негативно сказаться на пользовательском опыте.

Не изменяйте воспринимаемый и фактический порядок вкладок с помощью CSS и HTML. Как показывают два следующих примера, порядок вкладок, отличающийся от визуально ожидаемого, сбивает пользователей с толку и ухудшает пользовательский опыт.

В этом примере значение атрибута tabindex сделало порядок табуляции хаотичным:

В этом примере CSS создал расхождение между порядком табуляции и визуальным порядком содержимого:

Объявление flex-flow: row-reverse; изменило визуальный порядок. Кроме того, к шестому слову, «This», было применено свойство CSS order , визуально сдвинув его. Последовательность табуляции — это порядок кода, который больше не соответствует визуальному порядку, создавая помехи для пользователей клавиатуры.

Сделайте инертные элементы интерактивными

Атрибуты contenteditable и tabindex , являясь глобальными, можно добавить к любому элементу, сделав его доступным для фокусировки. Фокусируемые элементы также можно фокусировать с помощью мыши или указателя мыши, установив атрибут autofocus , или с помощью скрипта, например, с помощью element.focus() .

Атрибут tabindex

Глобальный атрибут tabindex , представленный в разделе «Атрибуты» , позволяет элементам, которые в противном случае не смогли бы получить фокус, получать его, обычно с помощью клавиши Tab , отсюда и название.

Атрибут tabindex принимает в качестве своего значения целое число. Отрицательное значение делает элемент доступным для фокусировки, но не допускает нажатия клавиши Tab. Значение tabindex , равное 0 , делает элемент доступным для фокусировки и нажатия клавиши Tab, добавляя элемент, к которому он применён, в последовательный порядок перемещения фокуса в исходном коде. Значение 1 или больше делает элемент доступным для фокусировки и нажатия клавиши Tab, но добавляет его в приоритетную последовательность табуляции, поэтому его следует избегать.

На этой странице кнопка «Поделиться» <share-action> — это пользовательский элемент . Значение tabindex="0" добавляет этот элемент, который обычно не фокусируется, в стандартный порядок табуляции клавиатуры:

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

На этой странице есть еще один пользовательский элемент: локальная навигация имеет пользовательский элемент с отрицательным значением tabindex :

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

Отрицательное значение атрибута tabindex делает элемент доступным для фокусировки, но не допускающим нажатия клавиш. Элемент может получить фокус, например, с помощью HTMLElement.focus() , но не участвует в последовательном порядке навигации с фокусировкой. Для элементов, не допускающих нажатия клавиш, но допускающих фокус, принято использовать tabindex="-1" . Если добавить tabindex="-1" к интерактивному элементу, он перестанет быть доступным для нажатия клавиш.

Метод element.focus() можно использовать для установки фокуса на элементы, которые можно фокусировать. Браузеры прокручивают элементы, находящиеся в фокусе, чтобы они стали видимыми. По этой причине избегайте использования element.focus({preventScroll:true}) , поскольку фокусировка на невидимом элементе негативно сказывается на пользовательском опыте.

Если вы хотите выполнить запрос к документу, чтобы узнать, какой элемент находится в фокусе, используйте свойство Document.activeElement , доступное только для чтения.

Элементы с tabindex , равным 1 или больше, включаются в отдельную последовательность табуляции. Как вы заметите в Codepen, табуляция начинается с отдельной последовательности, от наименьшего значения к наибольшему, а затем проходит по элементам в обычной последовательности (без tabindex или tabindex="0" ) в порядке исходного кода:

Положительное значение tabindex помещает элемент в приоритетную последовательность фокусировки, что может привести к хаосу в порядке фокусировки. Избегайте изменения порядка DOM с помощью tabindex . Изменение порядка табуляции не только может создавать неудобства для пользователей, но и затрудняет управление и поддержку со стороны разработчиков.

Атрибут contenteditable

Атрибут contenteditable уже обсуждался ранее. Установка contenteditable="true" для любого элемента делает его доступным для редактирования, фокусировки и включения в последовательность табуляции. Поведение фокусировки аналогично установке tabindex="0" , но не идентично. Вложенные элементы contenteditable могут фокусироваться, но не могут быть активны табуляцией. Чтобы сделать вложенный элемент contenteditable активным табуляцией, добавьте tabindex="0" , что добавит его в последовательный порядок фокусировки.

Дать autofocus интерактивным элементам

Хотя булевский атрибут autofocus является глобальным и может быть установлен для любого элемента, он не делает инертный элемент интерактивным. При загрузке страницы фокус устанавливается на первый элемент с атрибутами autofocus , если этот элемент отображается и не вложен в <dialog> .

Автоматическая установка фокуса на контент может сбивать с толку. Установка autofocus на элементе управления формы означает, что элемент управления формы прокручивается в область просмотра при загрузке страницы. Все ваши пользователи, включая пользователей программ чтения с экрана и пользователей с небольшими областями просмотра, могут не «видеть» инструкции к форме, возможно, даже прокручивая дальше видимой метки элемента управления формы. Атрибут autofocus не изменяет порядок последовательной навигации по фокусу в документе. Элементы в последовательности, предшествующие элементу с автофокусом, пропускаются. По этим причинам не рекомендуется включать атрибут autofocus .

Исключением из рекомендации «не использовать autofocus » является добавление атрибута autofocus в элементы <dialog> . При открытии диалогового окна браузер автоматически фокусируется на первом интерактивном элементе внутри <dialog> , доступном для фокусировки, что означает отсутствие необходимости добавлять autofocus к элементу. Если вы хотите быть уверены, что фокус будет на определённом интерактивном элементе в диалоговом окне при его открытии, добавьте атрибут autofocus к этому элементу.

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

Атрибут autofocus , установленный для кнопки закрытия <button> позволяет ей получать фокус при открытии диалогового окна. Будучи первым элементом диалогового окна, она бы получила фокус в любом случае. По умолчанию при открытии диалогового окна фокус получает первый фокусируемый элемент в нём, если только атрибут autofocus не установлен для другого элемента в этом же окне.

Сделать интерактивные элементы инертными

Существуют также HTML-атрибуты, которые могут исключать интерактивные элементы из последовательности табуляции. Добавление отрицательного tabindex к фокусируемым элементам, добавление атрибута disabled к поддерживающим элементам формы и добавление глобального атрибута inert к контейнеру — всё это делает элементы непереключаемыми. Эти три атрибута НЕ являются взаимозаменяемыми.

Отрицательное значение tabindex

Отрицательное значение атрибута tabindex делает элемент доступным для фокусировки, но не для переключения с помощью табуляции. Добавление tabindex="0" к элементу, доступному для фокусировки по умолчанию, включая ссылки, кнопки, элементы управления формами и элементы, доступные contenteditable , не является обязательным; однако включение tabindex с отрицательным значением исключает элементы, доступные для переключения с помощью табуляции, из последовательного порядка перемещения по фокусу.

Отрицательное значение tabindex не позволяет пользователям с клавиатурой фокусироваться на интерактивных элементах, но не отключает сам элемент. Пользователи с указателем по-прежнему могут фокусироваться на элементе. Чтобы отключить элемент, используйте атрибут disabled .

Неполноценный

Булевский атрибут disable делает элементы управления формы, к которым он применён, и их потомки, если таковые имеются, нефокусируемыми. Отключённые элементы управления формы не могут быть сфокусированы, не получают события нажатия и не отправляются при отправке формы.

Атрибут disabled не является глобальным. Он применяется к <button> , <input> , <optgroup> , <option> , <select> , <textarea> , пользовательским элементам, связанным с формой, и <fieldset> . При установке для <optgroup> или <fieldset> все дочерние элементы управления формы отключаются, за исключением содержимого первого <legend> элемента <fieldset> .

Те же элементы, которые поддерживают disabled , также доступны для нацеливания с помощью псевдоклассов :disabled и :enabled . Элементы, отключенные с помощью атрибута disabled , обычно оформляются светло-серым цветом в таблице стилей user-agent, даже если задан accent-color .

Поскольку атрибут является логическим, его наличие отключает включённый элемент; его нельзя установить в false . Чтобы снова включить отключённый элемент, атрибут необходимо удалить, обычно с помощью Element.removeAttribute('disabled') .

Свойство HTMLInputElement.disabled позволяет проверить, отключен ли элемент ввода. Поскольку disabled не является глобальным атрибутом, оно не наследуется от HTMLElement, но каждый поддерживающий интерфейс элемента, например HTMLSelectElement и HTMLTextareaElement , имеет такое же свойство, доступное только для чтения.

Атрибут disabled не применяется к элементам, которые обычно являются inert и которым можно сделать фокусируемыми с помощью tabindex или contenteditable , а также к элементу <form> . Чтобы отключить эти элементы, можно использовать глобальный атрибут inert .

inert атрибут

При добавлении к элементу глобального логического атрибута inert этот элемент и весь вложенный в него контент становятся недоступными, то есть на них нельзя кликнуть или перейти с помощью Tab. Они также удаляются из дерева доступности. Хотя inert можно применить к любому элементу, обычно он используется для фрагментов контента, например, закадрового или скрытого.

При применении атрибута disabled к элементам управления формы браузер использует стили по умолчанию, которые можно задать с помощью псевдокласса :disabled . Атрибут inert не имеет визуальных индикаторов и не имеет соответствующего псевдокласса (хотя селектор атрибута [inert] соответствует).

Использование inert для видимого контента без указания стилей может привести к ухудшению пользовательского опыта. Поскольку инертный контент недоступен для пользователей программ чтения с экрана, это может привести к путанице, когда зрячие пользователи видят на экране контент, недоступный для инструментов доступности. Сделайте инертность очевидной с помощью CSS.

Убедитесь, что фокус никогда не переходит на невидимый контент. Всё, что отображается за пределами экрана и не появляется автоматически при фокусировке, следует сделать инертным . Если контент скрыт, но появляется при фокусировке, например, ссылка «Перейти к контенту» , его не нужно делать инертным.

Проверьте свое понимание

Проверьте свои знания о фокусировке.