WCAG 2.4.7 Видимий фокус

Критерій успіху 2.4.7 потрібен для того, щоб користувачі клавіатури бачили, де вони на сторінці. Без видимого індикатора фокуса натискати Tab — це як рухати мишу з невидимим курсором: зрячі користувачі клавіатури — люди з порушеннями моторики, багато людей зі слабким зором, досвідчені користувачі — не можуть зрозуміти, яке посилання чи кнопка відреагує. Це рівень AA, і він входить до EN 301 549 (пункт 9.2.4.7; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Будь-який інтерфейс користувача, яким можна керувати з клавіатури, має режим роботи, у якому індикатор фокуса клавіатури видимий.

На практиці: щоразу, коли елемент отримує фокус із клавіатури, є видимий індикатор — стандартний контур браузера або власний стиль. Задокументовані порушення:

• стилі, що прибирають чи приховують індикатор фокуса (outline: none, outline: 0 або рамка, яка його ховає), без видимої заміни;
• скрипти, що знімають фокус з елемента, щойно він його отримує.

У WCAG 2.2 також додано 2.4.13 «Вигляд фокуса» на рівні AAA з правилами щодо розміру й контрастності індикатора; на рівні AA вимагається лише видимість.

Типові помилки в інтернет-магазині

• скидання стилів у темі з *:focus { outline: none; }, щоб приховати «негарну» рамку після кліків мишею;
• кнопки й зразки кольорів із власним стилем, який у фокусі лише ледь змінює колір;
• рамка фокуса того самого кольору, що й фірмовий фон, тож вона зникає на кольорових банерах;
• власні прапорці й перемикачі, де справжнє поле приховано, а його фокус не показано на візуальній заміні;
• картки товарів, де фокус потрапляє на невидиме посилання-накладку.

Як перевірити

Автоматично: для цього критерію немає правила axe-core. Чи видно фокус, залежить від того, що змінюється на екрані, коли елемент отримує фокус, а axe цього не порівнює, тож потрібна ручна перевірка.

Вручну: пройдіть клавішею Tab усю сторінку, зокрема шапку, мегаменю, фільтри, варіанти товару, бічну панель кошика, форми й футер. На кожній зупинці ви маєте чітко бачити, який елемент у фокусі. Перевірте на світлому й темному фоні та в спливних вікнах. Якщо індикатор зникає, пошукайте в CSS правила outline: none чи :focus.

Як виправити

• Ніколи не прибирайте контур без заміни. Використовуйте :focus-visible, щоб показувати чітку рамку для користувачів клавіатури, а кліки мишею залишати чистими.
• Надійний стиль: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } або двоколірна рамка, що працює на будь-якому фоні.
• Показуйте фокус на видимій частині власних елементів керування (наприклад, на стилізованому зразку кольору, а не на прихованому полі).
• Прагніть контрастності 3:1 відносно сусідніх кольорів, щоб рамку було легко побачити.

Пов'язані критерії

• 2.4.11 Фокус не перекрито (мінімальні вимоги) — елемент у фокусі не може бути прихований за іншим вмістом.
• 1.4.11 Контраст нетекстових елементів — візуальним частинам елементів керування потрібна контрастність 3:1.
• 2.4.3 Порядок переміщення фокуса — фокус має рухатися в логічному порядку.

Часті запитання

Чи є outline: none порушенням WCAG?

Це порушує 2.4.7, коли прибирає індикатор фокуса і більше ніщо не показує, де фокус. Прибрати стандартний контур можна, якщо замінити його чітко помітним власним стилем.

Чим 2.4.7 «Видимий фокус» відрізняється від 2.4.13 «Вигляд фокуса»?

2.4.7 (рівень AA) вимагає лише, щоб індикатор фокуса було видно. 2.4.13 «Вигляд фокуса» (рівень AAA, новий у WCAG 2.2) задає мінімальний розмір індикатора і зміну контрастності 3:1.

Чи потрібна індикатору фокуса мінімальна контрастність?

Не за самим 2.4.7. Але рамка фокуса — це візуальна частина елемента керування, тож важливий 1.4.11 «Контраст нетекстових елементів» (3:1), а індикатор, якого на практиці ніхто не бачить, не робить фокус видимим.