Кратко
СкопированоРоль структуры документа из WAI-ARIA. Означает, что элемент тултип. Тултипом называют небольшую подсказку к элементу, которая появляется при наведении курсора, фокусе с клавиатуры и тапе на мобильном устройстве.
В HTML нет эквивалента для этой роли.
Пример
Скопировано<button aria-describedby="tooltip">❤️</button><span role="tooltip" id="tooltip">Поставить отметку «Нравится»</span>
<button aria-describedby="tooltip">❤️</button> <span role="tooltip" id="tooltip">Поставить отметку «Нравится»</span>
Скринридеры прочтут код примерно так: «Алое сердце, кнопка, поставить отметку "Нравится"».
Как пишется
СкопированоДобавьте к тегу role
. Лучше добавлять роль к неинтерактивным элементам. Например, к <div>
или <span>
.
Тултип всегда зависит от другого элемента и должен быть связан с ним с помощью атрибута aria
. Добавьте атрибут к главному элементу, а id
— к тултипу. Если не свяжите тултип с элементом с помощью него, скринридер не прочтёт текст пользователям. Так что, пока роль tooltip
ни на что не влияет.
У элемента с role
обязательно должно быть имя. Это краткое название элемента. Без имени пользователь скринридера не узнает о подсказке. Проще добавить текст внутрь тега, но можно использовать и другие способы. Например, aria
или aria
.
Важные требования
Скопировано- Должен быть связан с интерактивным элементом, который описывает. Например, с кнопкой, ссылкой или полем. Так что, связывать тултип с иконкой вопроса рядом с полем не очень хорошая практика.
- На нём нельзя сделать фокус, он не должен быть интерактивным.
- Не содержит интерактивные элементы, только небольшую текстовую подсказку.
- Становится видимым при наведении мыши на элемент, клавиатурном фокусе и тапе.
- Исчезает при убирании курсора и при потере клавиатурного фокуса, а ещё закрывается при нажатии на Esc.