Фокус

Подкаст 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-элемента только в том случае, если это абсолютно необходимо.
• Убедитесь, что состояние фокуса очень четко отличается от состояния по умолчанию.

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

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