Как настроить видимый focus для кнопок и ссылок в Elementor

Что такое focus и зачем он нужен

Фокус — это состояние элемента, который сейчас готов принять действие с клавиатуры. Например, после нажатия Tab фокус переходит на кнопку, ссылку, поле формы или пункт меню. Пользователь может нажать Enter или пробел и выполнить действие без мыши.

Визуально фокус обычно обозначают обводкой, изменением цвета, тенью или другим заметным маркером. Если такого маркера нет, навигация превращается в поиск элемента наугад. Это создаёт трудности не только для людей с нарушениями зрения, но и для тех, кто работает на ноутбуке без мыши или использует сайт в неудобных условиях.

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

• Tab перемещает фокус вперёд между доступными элементами.
• Shift + Tab перемещает фокус назад.
• Enter активирует ссылку или кнопку.
• Пробел активирует кнопку и некоторые элементы управления.

Как добавить focus-visible в Elementor Pro

В Elementor Pro CSS можно добавить на уровне кнопки, ссылки, виджета или контейнера через поле Custom CSS на вкладке Advanced. Точный вид панели может отличаться в зависимости от версии Elementor и типа выбранного элемента, поэтому ориентируйтесь на поле Custom CSS в настройках нужного компонента.

Кнопка Elementor обычно реализована как ссылка a, поэтому используйте селектор selector a. Если внутри выбранного виджета находится настоящая HTML-кнопка, сработает selector button. Добавьте следующий код:

• Откройте страницу в Elementor.
• Выберите кнопку, ссылку или контейнер, для которого нужно настроить фокус.
• Перейдите в Advanced → Custom CSS, если эта возможность доступна в вашей версии Elementor Pro.
• Вставьте CSS и сохраните страницу.
• Очистите кеш сайта и браузера, если старые стили продолжают отображаться.

selector a:focus-visible,
selector button:focus-visible {
  outline: 3px solid #ffb400;
  outline-offset: 4px;
  border-radius: 4px;
}

Если фокус должен быть на самом элементе

В большинстве виджетов Elementor интерактивной частью является дочерняя ссылка, поэтому selector a — практичный вариант. Однако иногда фокус получает сам корневой элемент или другая HTML-структура. В такой ситуации можно проверить вариант с selector:focus-visible или изучить структуру элемента с помощью инструментов разработчика браузера.

• Если обводка не появляется, проверьте, какой именно HTML-элемент получает фокус.
• Не добавляйте одновременно несколько конфликтующих правил outline для одного компонента.
• Селектор selector работает в Custom CSS Elementor как ссылка на текущий элемент или виджет.

selector:focus-visible {
  outline: 3px solid #ffb400;
  outline-offset: 4px;
  border-radius: 4px;
}

Как выбрать цвет, толщину и отступ обводки

Фокус должен быть заметен не только на белом фоне в редакторе, но и на реальном сайте. Оранжевая обводка хорошо работает на многих светлых поверхностях, однако на жёлтом, оранжевом или пёстром фоне может теряться. Для тёмного дизайна часто лучше подходят светлые или двойные контрастные стили.

Свойство outline не изменяет размеры элемента и обычно не сдвигает соседний контент. outline-offset создаёт промежуток между обводкой и кнопкой, благодаря чему фокус легче распознать. Значения 3 px для толщины и 4 px для отступа можно использовать как отправную точку, но их стоит проверить на конкретном дизайне.

При проверке оцените, отличается ли индикатор от фона и соседних цветов. Для важных интерфейсов ориентируйтесь на требования доступности к контрасту индикатора фокуса, а не только на собственное визуальное восприятие.

• Проверьте обводку на светлом, тёмном и цветном фоне.
• Не используйте слишком тонкую линию, которую сложно увидеть на экране ноутбука.
• Следите, чтобы outline не обрезался контейнером с overflow: hidden.
• При необходимости используйте цвет, соответствующий брендбуку, но не жертвуйте контрастом.
• Убедитесь, что обводка не сливается с активным, hover- или disabled-состоянием.

Чем :focus-visible отличается от :focus

Псевдокласс :focus применяется каждый раз, когда элемент получает фокус. Это может произойти после нажатия Tab, клика мышью или другого взаимодействия. Поэтому правило для :focus иногда оставляет яркую обводку после клика, даже когда она не нужна пользователю.

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

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

• Не заменяйте :focus-visible удалением фокуса через outline: none.
• Если нужна поддержка определённых старых браузеров, протестируйте fallback-стили отдельно.
• Проверяйте поведение не только в редакторе Elementor, но и на опубликованной странице.

Как проверить навигацию с клавиатуры на странице

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

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

• Начните с верхней части страницы и проверьте порядок перехода с помощью Tab.
• Убедитесь, что фокус не исчезает за пределами экрана или под фиксированной шапкой.
• Проверьте открытие меню, аккордеонов, попапов и форм с клавиатуры.
• Убедитесь, что после закрытия модального окна фокус возвращается к логичному элементу.
• Протестируйте страницу в нескольких браузерах и на разных фонах.

Распространённые ошибки при настройке focus

Самая частая ошибка — глобальное правило outline: none без замены. Его могут добавлять тема, плагин, сброс стилей или собственный CSS. Найдите такие правила в стилях сайта и проверьте их на вкладке Computed или Styles в инструментах разработчика.

Другая проблема — неправильный селектор. Если CSS добавлен к контейнеру, но фокус получает ссылка внутри другого виджета, правило может не сработать. Кроме того, обводка иногда незаметна из-за низкого контраста, перекрывается псевдоэлементом или обрезается родительским блоком.

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

• Не используйте outline: none без полноценной и заметной альтернативы.
• Не проверяйте доступность только в режиме редактирования Elementor.
• Не считайте достаточным одно изменение цвета текста без чёткого визуального маркера.
• Не ограничивайте фокус одной главной CTA-кнопкой, если другие кнопки и ссылки также доступны с клавиатуры.
• Не забывайте о мобильных меню и элементах, которые появляются динамически.