WCAG 2.4.11 Фокус не перекрито (мінімальні вимоги)

Критерій успіху 2.4.11 новий у WCAG 2.2 (в оригіналі — Focus Not Obscured (Minimum)). Він потрібен для того, щоб користувачі клавіатури справді бачили елемент, до якого перейшли, а фокус не зникав за закріпленою шапкою, кнопкою чату чи банером cookie. Це рівень AA, і він входить до EN 301 549 (пункт 9.2.4.11; в Україні — ДСТУ EN 301 549:2022).

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

Коли компонент інтерфейсу користувача отримує фокус клавіатури, він не прихований повністю через вміст, створений автором.

Ключові моменти від W3C:

• на рівні AA часткове перекриття допустиме — елемент не може бути прихований повністю. Рівень AAA (2.4.12 «Фокус не перекрито (розширені вимоги)») вимагає, щоб не було приховано жодної частини;
• коли користувач може переміщувати вміст (наприклад, перетягувати панель інструментів), враховується лише початкове положення цього вмісту;
• вміст, відкритий користувачем, може закривати елемент у фокусі; якщо користувач може його відкрити без переміщення фокуса клавіатури (наприклад, закривши спливне вікно клавішею Esc), він не вважається прихованим.

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

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

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

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

Вручну: у вікні розміру ноутбука, а потім при масштабі 200 %, пройдіть клавішею Tab усю сторінку з відкритим банером cookie, а потім ще раз — після його закриття. Стежте за закріпленою шапкою, закріпленими панелями «Додати в кошик» і плаваючими кнопками. Щоразу, коли фокус потрапляє на елемент, має бути видно принаймні його частину. Зверніть увагу на форму оформлення замовлення і футер.

Як виправити

• Додайте до контейнера прокрутки scroll-padding-top (і scroll-padding-bottom), що дорівнює висоті закріплених панелей, щоб елементи у фокусі прокручувалися у вільну область.
• Зробіть банер cookie модальним (фокус переходить у нього й залишається, доки не зроблено вибір) або розмістіть його так, щоб він не закривав вміст.
• Зменшуйте закріплені елементи на малих екранах і при збільшенні.
• Дайте користувачам змогу закривати плаваючі віджети клавішею Esc і з клавіатури.

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

• 2.4.7 Видимий фокус — індикатор фокуса має бути видимим.
• 2.4.3 Порядок переміщення фокуса — фокус має рухатися в логічному порядку.
• Чек-лист WCAG 2.2 — що ще нового у WCAG 2.2.

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

Чи порушує закріплена шапка WCAG 2.4.11?

Лише якщо вона повністю закриває елемент у фокусі. Якщо частину елемента видно, 2.4.11 (AA) виконано; критерій рівня AAA 2.4.12 вимагає, щоб не було приховано жодної частини. Зазвичай це виправляє CSS scroll-padding.

Чи порушує 2.4.11 банер cookie?

Немодальний банер cookie, що повністю ховає елемент, який отримує фокус, — порушення. W3C описує, як цього уникнути: зробити банер модальним, щоб він забирав фокус, використати scroll padding, щоб елементи у фокусі не потрапляли під нього, або закривати банер, коли фокус його покидає.

Чи 2.4.11 новий у WCAG 2.2?

Так. «Фокус не перекрито (мінімальні вимоги)» додано у WCAG 2.2 на рівні AA разом із «Фокус не перекрито (розширені вимоги)» на рівні AAA.