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 Перекомпоновка (reflow) — контент при большом масштабе.
• 1.4.11 Контраст нетекстового контента — видимые индикаторы фокуса и иконки.
• Чек-лист WCAG 2.2 — в том числе 2.4.11 «Фокус не скрыт» и 3.2.1 «При получении фокуса».

Частые вопросы

Что значат «закрываемый», «наводимый» и «устойчивый»?

Закрываемый: пользователь может закрыть всплывающее окно, не перемещая мышь или фокус, обычно клавишей Escape. Наводимый: мышь можно переместить на всплывающее окно, и оно не исчезнет. Устойчивый: оно остаётся открытым, пока пользователь не уведёт указатель, не закроет его или пока оно не перестанет быть актуальным.

Распространяется ли критерий на подсказки из атрибута title?

Нет. Контент, отображение которого контролирует браузер и которое автор не менял, например подсказка из HTML-атрибута title, освобождён от требования.

Подпадают ли мегаменю под 1.4.13?

Да, если они открываются при наведении или фокусе. Подменю, собственные подсказки и другие немодальные всплывающие окна, которые показываются при наведении или фокусе, охватываются критерием.

Может ли автоматический инструмент проверить 1.4.13?

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