/ ↲
    Расширенный поиск

    Доступность

    tooltip

    Как сделать элемент тултипом с помощью WAI-ARIA.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Роль структуры документа из WAI-ARIA. Означает, что элемент тултип. Тултипом называют небольшую подсказку к элементу, которая появляется при наведении курсора, фокусе с клавиатуры и тапе на мобильном устройстве.

    В HTML нет тега с такой ролью.

    Пример

    Скопировано
            
          
          <button aria-labelledby="tooltip">❤️</button><span  role="tooltip"  id="tooltip">  Поставить отметку «Нравится»</span>
          <button aria-labelledby="tooltip">❤️</button>
<span
  role="tooltip"
  id="tooltip"
>
  Поставить отметку «Нравится»
</span>
    Открыть демо в новой вкладке

    Скринридеры прочтут код примерно так: «Поставить отметку "Нравится", кнопка».

    Как пишется

    Скопировано

    Добавьте к тегу role="tooltip". Лучше добавлять роль к неинтерактивным элементам. Например, к <div> или <span>.

    Тултип всегда зависит от другого элемента и должен быть связан с ним с помощью атрибутов aria-describedby или aria-labelledby. aria-describedby подойдёт для случаев, когда в тултипе содержится развёрнутая подсказка. aria-labelledby нужен для краткого видимого названия элемента. Добавьте подходящий атрибут к главному элементу, а id — к тултипу. Если не свяжете тултип с основным элементом, скринридер не прочтёт текст пользователям. Так что пока роль tooltip ни на что не влияет.

    У элемента с role="tooltip" обязательно должно быть имя. Это краткое название элемента. Без имени пользователь скринридера не узнает о подсказке. Проще добавить текст внутрь тега, но можно использовать и другие способы. Например, aria-label.

    Пример тултипа в Руководстве по авторским ARIA-практикам (APG).

    Важные требования

    Скопировано
    • Должен быть связан с интерактивным элементом, который описывает. Например, с кнопкой, ссылкой или полем. Так что связывать тултип с иконкой вопроса рядом с полем не очень хорошая практика.
    • На нём нельзя сделать фокус, он не должен быть интерактивным.
    • Не содержит интерактивные элементы, только небольшую текстовую подсказку.
    • Становится видимым при наведении мыши на элемент, клавиатурном фокусе и тапе.
    • Исчезает при убирании курсора и при потере клавиатурного фокуса.
    • Закрывается при нажатии на Ctrl (Command, ⌘ на macOS) или Esc.

    Читайте также