WCAG 3.2.1 Перебування у фокусі

Критерій успіху 3.2.1 (в оригіналі — On Focus, тобто «при отриманні фокуса») робить навігацію з клавіатури передбачуваною. Люди, які користуються клавіатурою, кнопковим пристроєм чи програмою зчитування з екрана, рухаються сторінкою, переводячи фокус з одного елемента на інший. Якщо фокус на елементі раптом відкриває нову сторінку чи перекидає курсор кудись інде, вони губляться. Це рівень A, і він входить до EN 301 549 як пункт 9.3.2.1 (в Україні — ДСТУ EN 301 549:2022).

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

Коли будь-який компонент інтерфейсу користувача отримує фокус, він не повинен ініціювати зміну контексту. WCAG визначає зміни контексту як суттєві зміни, що можуть дезорієнтувати користувачів, якщо відбуваються без їхнього відома: зміни браузера, вікна перегляду, фокуса чи вмісту, що змінює зміст сторінки. Приклади — відкриття нового вікна, переміщення фокуса на інший компонент і перехід на нову сторінку.

Зміна вмісту — не завжди зміна контексту. Розгорнути меню, показати підказку чи підсвітити поле при фокусі дозволено. Інших винятків немає.

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

• спливне вікно розсилки чи довідки відкривається і забирає фокус, щойно користувач клавіатури переходить у поле форми;
• фокус на категорії в меню одразу переводить на сторінку категорії;
• фокус на мініатюрі товару відкриває вікно галереї;
• скрипт знімає фокус із поля, щойно воно його отримує, тож користувач не може в нього вводити;
• перехід клавішею Tab на перемикач мови чи валюти перезавантажує сторінку.

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

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

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

Як виправити

• Запускайте перехід і діалоги при активації (клік, Enter, пробіл), а не на подіях focus чи focusin.
• Показуйте довідку вбудованим текстом чи підказкою, яка не забирає фокус.
• У мегаменю за бажання відкривайте підменю при фокусі, але не переходьте на нову сторінку, доки посилання не активовано.
• Приберіть скрипти, що викликають blur() для елементів керування у фокусі.

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

• 3.2.2 Під час введення — те саме правило для зміни значення.
• 2.4.3 Порядок переміщення фокуса — фокус рухається в осмисленому порядку.
• Чек-лист WCAG 2.2 — усі критерії A і AA одним поглядом.

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

Що таке зміна контексту у WCAG?

Суттєва зміна, яка може дезорієнтувати користувача, що її не очікував: відкриття нового вікна чи сторінки, переміщення фокуса на інший компонент або зміна вмісту, що змінює зміст сторінки.

Чи дозволено за 3.2.1 показувати підказку чи випадний список при фокусі?

Так, якщо це лише зміна вмісту. Меню, що розгортається, чи підказка, що з'являється, — нормально; фокус, що перескакує, нова сторінка чи нове вікно — ні.

Чи може автоматичний інструмент перевірити 3.2.1?

Ні. Чи змінюється щось, коли елемент отримує фокус, залежить від скриптів, і це треба перевіряти вручну, проходячи сторінку клавішею Tab.