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

Интерактивные HTML-элементы

Интерактивные элементы будут выполнять некоторые действия при взаимодействии с пользователем, такие как ввод, выбор, флажок, кнопки и ссылки. Каждая интерактивная часть ведет себя по-разному, но обычно меняет свое состояние при взаимодействии с пользователем. И вы можете переходить к интерактивным элементам с помощью клавиатуры, нажимая клавишу Tab, если для ее атрибута tabindex не установлено значение -1.

Ниже показано, как четкий индикатор фокуса может помочь пользователю узнать свое местоположение и перемещаться по странице, используя только клавиатуру.

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

Понимание фокусных псевдоклассов

По умолчанию браузер предоставляет схему, когда элемент находится в режиме фокуса, вызванном действиями пользователя. Однако часто мы хотим переопределить этот стиль по умолчанию или добавить дополнительные стили и обеспечить лучший UX для пользователей. В таких случаях мы можем использовать следующие псевдоклассы CSS: focus и focus-visible.

Давайте рассмотрим разницу между ними и когда их использовать.

Использование: фокус

:focus — это псевдокласс CSS, который указывает, находится ли интерактивный элемент в режиме фокуса. Режим фокусировки возникает, когда пользователь щелкает вкладку, чтобы выбрать или изменить…