Фокус

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

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

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

В следующем примере значение атрибута tabindex привело к хаотичному порядку перехода по вкладкам:

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

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

Некоторые возможности CSS, включая flexbox , grid , positioning , transforms и multi-column , могут изменять визуальный порядок контента. Проверьте свой контент, перемещаясь по нему с помощью клавиши Tab: Shift + Tab для перемещения назад по контенту. Используйте CSS для указания того, какой элемент находится в фокусе. Не меняйте порядок элементов, находящихся в фокусе, с помощью CSS.

Важно сохранять логичный порядок перехода по вкладкам при всех размерах области просмотра.

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

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

Атрибут tabindex

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

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

На этой странице кнопка «Поделиться», <share-action> , является пользовательским элементом . tabindex="0" добавляет этот элемент в порядок перехода по клавише 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>

Кроме того, локальная навигация содержит пользовательский элемент с отрицательным значением 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 .

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

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

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

Те же элементы, которые поддерживают disabled также могут быть использованы с псевдоклассами :disabled и :enabled . Элементы, отключенные с помощью атрибута disabled , обычно оформляются светло-серым цветом в соответствии со стилем пользовательского агента, даже если задан 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.

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

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

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