WCAG 1.4.13 Вміст під час наведення курсора чи встановлення фокуса

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

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

Коли наведення курсора або фокус клавіатури спричиняє появу і зникнення додаткового вмісту (власні підказки, підменю, мегаменю, спливні вікна попереднього перегляду), мають виконуватися всі три умови:

• Можна закрити: є спосіб закрити вміст без переміщення курсора чи фокуса, зазвичай клавіша Escape, — хіба що вміст повідомляє про помилку введення або не закриває й не замінює інший вміст;
• Можна навести: якщо вміст з'являється від наведення, курсор можна перемістити на додатковий вміст, і він не зникне;
• Стійкий: вміст залишається видимим, доки не прибрано тригер, користувач не закрив його або його інформація не втратила актуальність.

Виняток: вміст, візуальне подання якого контролює браузер і автор не змінював, як-от підказки з атрибута title.

Не охоплено: модальні діалоги (вони мають забирати фокус) та елементи, які самі з'являються при фокусі, як-от посилання для пропуску блоків.

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

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

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

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

Вручну: для кожного елемента, що показує додатковий вміст при наведенні чи фокусі: (1) наведіть на нього курсор, потім перемістіть мишу на спливне вікно — воно має залишитися; (2) при відкритому вікні натисніть Escape, не рухаючи мишу й фокус, — воно має закритися; (3) зачекайте — воно не повинно зникати за таймером; (4) повторіть із клавіатури клавішею Tab. Зробіть це також при масштабі 200 %.

Як виправити

• Закривайте спливні вікна від наведення і фокуса клавішею Escape.
• Розміщуйте тригер і спливне вікно впритул або додайте невелику затримку перед закриттям, щоб курсор встиг переміститися.
• Приберіть таймери, які автоматично ховають підказки.
• Відкривайте той самий вміст при фокусі клавіатури або натисканням для користувачів сенсорних екранів.
• Для великих меню й міні-кошиків надавайте перевагу кнопкам, що розкривають вміст натисканням.

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

• 1.4.10 Прокрутка в кількох напрямках — вміст при великому масштабі.
• 1.4.11 Контраст нетекстових елементів — помітні індикатори фокуса та іконки.
• Чек-лист WCAG 2.2 — зокрема 2.4.11 «Фокус не перекрито» і 3.2.1 «Перебування у фокусі».

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

Що означають «можна закрити», «можна навести» і «стійкий»?

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

Чи охоплено підказки з атрибута title?

Ні. Вміст, подання якого контролює браузер і автор не змінював, як-от підказка з HTML-атрибута title, є винятком.

Чи підпадають мегаменю під 1.4.13?

Так, якщо вони відкриваються при наведенні чи фокусі. Підменю, власні підказки та інші немодальні спливні вікна, що з'являються при наведенні чи фокусі, охоплено.

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

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