Подкаст 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>Какое из следующих устройств ввода может устанавливать фокус?