Користувачі, які не можуть або не хочуть працювати з мишею, переміщуються сайтом за допомогою клавіші Tab. Щоб така навігація була зрозумілою, активне посилання, кнопка чи інший інтерактивний елемент повинні мати помітний візуальний стан фокусу.
Проблема виникає, коли тема або стилі Elementor прибирають стандартний outline через правило outline: none. У результаті клавіатурний користувач натискає Tab, але не бачить, де саме перебуває фокус. Нижче розберемо, як додати охайний focus-visible у Elementor, де розміщувати CSS і як перевірити результат.
Що таке 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, якщо інші кнопки та посилання також доступні з клавіатури.
- Не забувайте про мобільні меню та елементи, які з’являються динамічно.
Поширені запитання
Чи потрібно додавати focus-visible до кожної кнопки окремо?
Не обов’язково. Якщо у вашій версії Elementor і темі доступний глобальний CSS, можна створити єдине правило для посилань і кнопок. Якщо стилі мають діяти лише в конкретному віджеті, додайте їх через Custom CSS цього елемента або контейнера.
Чому CSS selector a:focus-visible не працює?
Перевірте, чи отримує фокус саме посилання a, чи не button або інший елемент. Також перевірте, чи CSS доданий у правильне поле Elementor, чи не перекривається іншим правилом і чи не обрізає обводку батьківський контейнер.
Чи можна залишити стандартний outline браузера?
Так. Стандартний outline кращий, ніж повна відсутність фокусу. Власний стиль потрібен тоді, коли стандартна обводка має слабкий контраст або не відповідає дизайну, але заміна повинна залишатися чітко видимою.
Чи показується :focus-visible після кліку мишкою?
Зазвичай браузер не показує такий стан після звичайного кліку мишкою, але конкретна поведінка залежить від браузера та типу елемента. У будь-якому разі перевірте сценарії з Tab, Enter, пробілом і мишкою.
Чи достатньо додати обводку лише до головної кнопки?
Ні. Усі доступні з клавіатури посилання, кнопки та елементи керування повинні мати зрозумілий стан фокусу. Особливо важливо перевірити навігацію, форми, меню, попапи та інтерактивні картки.
Висновок
Видимий клавіатурний фокус — невелика CSS-зміна, яка суттєво покращує зрозумілість інтерфейсу в Elementor. Псевдоклас :focus-visible допомагає показувати обводку під час навігації клавіатурою без зайвого візуального ефекту після звичайного кліку.
Додайте помітний outline, перевірте його контраст на всіх фонах і пройдіть сторінку лише клавішею Tab. Головне — не прибирати стандартний фокус без якісної заміни та перевіряти не окрему кнопку, а всю послідовність взаємодії з сайтом.