Всплывающая подсказка

Подсказки выручают там, где на подпись нет места: иконочные кнопки в панели инструментов, сокращения в таблице, значок «?» возле поля формы. Пользователь наводит курсор или переходит к элементу клавишей Tab — и видит одну-две строки текста. Главное ограничение — подсказку легко не заметить, поэтому в ней дают уточнение, а не то, без чего нельзя выполнить действие.

Почему атрибута title мало

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

Пример доступной подсказки

<button type="button" aria-label="Печать" aria-describedby="tip-print">
  <svg aria-hidden="true">…</svg>
</button>
<div role="tooltip" id="tip-print">Откроет версию для печати</div>

[role="tooltip"] { position: absolute; display: none; }
button:hover + [role="tooltip"],
button:focus-visible + [role="tooltip"] { display: block; }

Связь через aria-describedby заставляет экранный диктор прочитать текст подсказки после названия кнопки. Показ привязан и к наведению, и к фокусу, а размещают подсказку абсолютным позиционированием относительно обёртки кнопки.

Правила, которые часто нарушают

• Подсказку должно быть можно закрыть клавишей Escape, не убирая курсор и фокус, — этого требует критерий WCAG о содержимом, появляющемся при наведении и фокусе.
• Курсор можно перевести на саму подсказку, и она не исчезнет — иначе длинный текст не дочитать.
• Внутри не размещают ссылки и кнопки: для интерактивного содержимого нужен поповер или диалог.
• На телефоне наведения нет, поэтому важное пояснение к полю формы лучше вывести обычным текстом под ним.