Подкаст CSS – 018: Фокус
На своей веб-странице вы нажимаете ссылку, которая переводит пользователя к основному содержимому веб-сайта. Их часто называют ссылками пропуска или якорными ссылками. Когда эта ссылка активируется с помощью клавиатуры с помощью клавиш Tab и Enter , вокруг основного контейнера содержимого появляется кольцо фокусировки. Почему это?
Это связано с тем, что <main>
имеет значение атрибута tabindex="-1"
, что означает, что его можно сфокусировать программно. Когда <main>
является целевым — поскольку #main-content
в строке URL-адреса браузера соответствует id
— он получает программный фокус. В таких ситуациях возникает соблазн удалить стили фокуса, но правильное и осторожное обращение с фокусом помогает создать хороший, доступный пользовательский интерфейс. Это также может быть отличным местом, чтобы добавить интереса к взаимодействию.
Почему важна концентрация внимания?
Ваша задача как веб-разработчика — сделать веб-сайт доступным и инклюзивным для всех. Создание доступных состояний фокуса с помощью CSS является частью этой ответственности.
Стили фокуса помогают людям, использующим такие устройства, как клавиатура или переключатель, для навигации и взаимодействия с веб-сайтом. Если элемент получает фокус и нет визуальной индикации, пользователь может потерять представление о том, что находится в фокусе. Это может создать проблемы с навигацией и привести к нежелательному поведению, если, скажем, перейти по неправильной ссылке.
Как элементы получают фокус
Некоторые элементы автоматически фокусируются; это элементы, которые принимают взаимодействие и ввод, такие как <a>
, <button>
, <input>
и <select>
. Короче говоря, все элементы формы, кнопки и ссылки. Обычно вы можете перемещаться по фокусируемым элементам веб-сайта, используя клавишу Tab для перемещения вперед по странице и клавишу SHIFT + Tab для перемещения назад.
Существует также HTML-атрибут tabindex
, который позволяет вам изменять индекс табуляции (то есть порядок, в котором фокусируются элементы) каждый раз, когда кто-то нажимает клавишу табуляции или фокус перемещается с помощью изменения хеша в URL-адресе или с помощью JavaScript. событие. Если для tabindex
элемента HTML установлено значение 0
, он может получить фокус с помощью клавиши табуляции и будет учитывать глобальный индекс табуляции, который определяется порядком источника документа.
Если вы установите tabindex
значение -1
, он сможет получать фокус только программно, то есть только тогда, когда происходит событие JavaScript или происходит изменение хеша (соответствующее id
элемента в URL-адресе). Если вы установите для tabindex
значение выше 0
, оно будет удалено из глобального индекса вкладок, определенного порядком источника документа. Порядок табуляции теперь будет определяться значением tabindex
, поэтому, например, элемент с tabindex="1"
получит фокус перед элементом с tabindex="2"
.
Стильный фокус
Поведение браузера по умолчанию, когда элемент получает фокус, представляет собой кольцо фокусировки. Кольцо фокусировки различается в зависимости от браузера и операционной системы.
Это поведение можно изменить с помощью CSS, используя псевдоклассы :focus
, :focus-within
и :focus-visible
, о которых вы узнали в уроке о псевдоклассах . Важно установить стиль фокуса, который контрастирует со стилем элемента по умолчанию. Например, распространенным подходом является использование свойства outline
.
a:focus {
outline: 2px solid slateblue;
}
Свойство outline
может оказаться слишком близким к тексту ссылки, но свойство outline-offset
может помочь в этом, поскольку оно добавляет дополнительное визуальное padding
, не влияя на геометрический размер, который заполняет элемент. Положительное числовое значение для outline-offset
выдвинет контур наружу, отрицательное значение — внутрь.
В настоящее время в некоторых браузерах, если для вашего элемента установлен border-radius
и вы используете outline
, он не будет совпадать — контур будет иметь острые углы. В связи с этим возникает соблазн использовать box-shadow
с небольшим радиусом размытия, поскольку box-shadow
обрезается по форме, соблюдая border-radius
, но этот стиль не будет отображаться в режиме высокой контрастности Windows . Это связано с тем, что режим высокой контрастности Windows не применяет тени и в основном игнорирует фоновые изображения в пользу предпочтительных настроек пользователя.
В итоге
Создание состояния фокуса, контрастирующего с состоянием элемента по умолчанию, невероятно важно. Стили браузера по умолчанию уже делают это за вас, но если вы хотите изменить это поведение, помните следующее:
- Избегайте использования
outline: none
для элемента, который может получать фокус клавиатуры. - Избегайте замены стилей
outline
наbox-shadow
. поскольку они не отображаются в режиме высокой контрастности Windows. - Устанавливайте положительное значение
tabindex
для HTML-элемента только в том случае, если это абсолютно необходимо. - Убедитесь, что состояние фокуса очень четко отличается от состояния по умолчанию.
Проверьте свое понимание
Проверьте свои знания о фокусе
Что из перечисленного является автоматически фокусируемым элементом?
<a>
<p>
<button>
<input>
<output>
<select>
Какое из следующих устройств ввода может устанавливать фокус?