Доступные подсказки (tooltip)

Магазины используют подсказки для значка «i» рядом с пометкой об НДС, для пояснения сроков доставки, для кнопок-иконок в шапке и для советов по размеру. Выглядит это просто, но подсказка, появляющаяся только при наведении мыши, невидима для пользователей клавиатуры и касания, а подсказка, закрывающая содержимое и не закрываемая, — нарушение WCAG. Эта страница входит в серию доступных UI-паттернов.

Когда использовать подсказку

В APG подсказка описана как «всплывающий элемент, отображающий информацию, связанную с элементом, когда элемент получает клавиатурный фокус» или над ним находится мышь. Используйте её только для короткого, несущественного описания элемента управления — подписи кнопки-иконки, намёка. Важная информация (цены, условия доставки, правила возврата) должна быть видимым текстом. Интерактивному содержимому место в раскрытии (disclosure) или диалоге.

Примечание: в APG сказано, что шаблон tooltip — «работа в процессе; консенсуса рабочей группы по нему ещё нет». Относитесь к нему как к рекомендации и проверяйте на реальных ассистивных технологиях.

Применимые критерии WCAG

• 1.4.13 Контент при наведении или фокусе (AA). Содержимое, появляющееся при наведении или фокусе, должно быть:

  • закрываемым — «есть механизм, позволяющий закрыть дополнительное содержимое, не перемещая указатель или клавиатурный фокус» (обычно Escape), если только оно не сообщает об ошибке ввода;
  • доступным для наведения — указатель можно переместить на подсказку, и она не исчезает;
  • устойчивым — оно остаётся, пока триггер не убран, пользователь не закрыл его или информация не потеряла актуальность.

  Критерий не охватывает содержимое, оформлением которого управляет браузер; главный пример у W3C — подсказка браузера от атрибута title.

• 2.1.1 Клавиатура (A): то, что появляется при наведении, должно быть доступно и с клавиатуры.

• 4.1.2 Имя, роль, значение (A): кнопке-иконке нужно имя; одной подсказки как надёжного имени недостаточно.

• 1.4.3 Контраст (минимальный) (AA): тексту подсказки нужно 4,5:1.

• 2.4.11 Фокус не скрыт (минимум) (AA): подсказка не должна полностью закрывать элемент в фокусе.

Пример кода

<!-- Tooltip as description of a focusable control (APG pattern) -->
<button type="button" class="icon-btn" aria-describedby="tip-compare">
  <svg aria-hidden="true" focusable="false"><use href="#icon-compare"></use></svg>
  <span class="visually-hidden">Сравнить</span>
</button>
<div id="tip-compare" role="tooltip" hidden>Добавить в список сравнения</div>

<!-- Toggletip: information opened by click, not on hover -->
<button type="button" aria-expanded="false" aria-controls="vat-info">
  <span class="visually-hidden">Об НДС</span>
  <svg aria-hidden="true" focusable="false"><use href="#icon-info"></use></svg>
</button>
<p id="vat-info" hidden>Цены включают НДС для страны доставки.</p>

Скрипт для подсказки: показывать её при focus и mouseenter, скрывать при blur и при mouseleave и триггера, и подсказки (чтобы указатель мог переместиться на неё), а также скрывать по Escape, пока фокус остаётся на триггере. В APG сказано: «виджеты подсказок не получают фокус» и «фокус остаётся на элементе-триггере, пока подсказка отображается». Триггер ссылается на подсказку через aria-describedby.

Второй пример — кнопка раскрытия (disclosure), тот же шаблон APG, из которого строятся аккордеоны: она переключает aria-expanded, а содержимое остаётся видимым, пока пользователь его не закроет, — лучше для сенсорных экранов и более длинного текста.

Работа с клавиатуры

Частые ошибки в интернет-магазинах

• Подсказки только при наведении на значках «i», выполненных элементами span, так что пользователи клавиатуры и касания никогда не видят пометок о доставке или НДС.
• Важные условия только в подсказке: сроки возврата, стоимость доставки, «цена за килограмм».
• Подсказка исчезает, когда указатель движется к ней, и люди, пользующиеся экранной лупой, не могут её прочитать.
• Нет Escape, и подсказка закрывает следующее поле формы.
• Ссылки внутри подсказки («Подробнее»), которые никогда не получат фокус.
• Кнопки-иконки, названные только через title, который не показывается при фокусе или касании.
• Текст подсказки с низким контрастом, например светло-серый на белом.

Что находит автоматика и что остаётся для ручной проверки

Все они — карточки в нашей библиотеке правил. Критерий 1.4.13 нельзя проверить автоматически: сканирование видит страницу такой, какой она загружается, а не то, что появляется при наведении или фокусе. Проверяйте вручную: перейдите Tab на каждый триггер, убедитесь, что подсказка появляется, нажмите Escape, наведите на неё мышь, увеличьте до 200 % и убедитесь, что она читается. С остальной частью страницы поможет расширение для браузера.

Начните с бесплатной проверки одной страницы. Это автоматическая проверка, а не полный аудит.

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

Какой критерий WCAG относится к подсказкам?

1.4.13 «Контент при наведении или фокусе» (уровень AA). Содержимое, появляющееся при наведении или фокусе, должно быть закрываемым без перемещения указателя или фокуса, доступным для наведения, чтобы указатель можно было переместить на него, и устойчивым — оставаться, пока пользователь не уберёт триггер или не закроет его.

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

Подсказка браузера от атрибута title выходит за рамки критерия 1.4.13, потому что ею управляет браузер. Но это всё равно плохой способ передать важную информацию: она не показывается при фокусе с клавиатуры и на сенсорных экранах.

Что такое шаблон tooltip из APG?

Всплывающий элемент с role="tooltip", который появляется, когда элемент получает клавиатурный фокус или над ним находится указатель; триггер ссылается на него через aria-describedby, подсказка никогда не получает фокус, а Escape её закрывает. В APG сказано, что шаблон ещё в разработке и консенсуса рабочей группы нет.

Может ли подсказка содержать ссылки или кнопки?

Нет. Подсказка никогда не получает фокус, поэтому до интерактивного содержимого внутри неё не добраться. Используйте вместо этого раскрытие (disclosure) или немодальный диалог, открывающийся по щелчку.

Может ли автоматическая проверка проверить подсказки?

Она находит элементы role="tooltip" без имени и кнопки-иконки без имени. Появляется ли подсказка при фокусе, остаётся ли при наведении и закрывается ли по Escape, нужно проверять вручную.

Источники

• W3C WAI, APG Tooltip pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
• W3C, Understanding 1.4.13 Content on Hover or Focus: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/