Всплывающие подсказки – популярная функция в веб-дизайне, которая предоставляет дополнительную информацию или контекст, когда пользователи наводят курсор мыши на определенные элементы или взаимодействуют с ними. Однако крайне важно обеспечить доступность всплывающих подсказок для всех пользователей, включая тех, кто использует вспомогательные технологии. В этой статье мы рассмотрим различные методы реализации доступных всплывающих подсказок, а также примеры кода, чтобы улучшить взаимодействие с пользователем и сделать ваш сайт более инклюзивным.

1. Использование атрибута «aria-describedby»:

Атрибут «aria-describedby» — это важная функция специальных возможностей, которую можно использовать для связи всплывающих подсказок с соответствующими элементами. Он помогает программам чтения с экрана и другим вспомогательным технологиям считывать содержимое всплывающей подсказки, когда соответствующий элемент находится в фокусе или наведен на него.

Пример:

HTML:

<button id="myButton" aria-describedby="tooltip1">Hover me!</button>
<div id="tooltip1" role="tooltip" aria-hidden="true">This is a tooltip!</div>

CSS:

#tooltip1[aria-hidden="true"] {
  display: none;
}
#tooltip1[aria-hidden="false"] {
  display: block;
  /* Add styling for tooltip */
}

JavaScript:

const button = document.getElementById('myButton');
const tooltip = document.getElementById('tooltip1');
button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
});
button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
});

2. Реализация всплывающих подсказок только для CSS:

CSS можно использовать для создания эффектов всплывающих подсказок, не полагаясь на JavaScript. Используя свойство «content» и псевдоэлементы, всплывающие подсказки могут отображаться визуально, когда пользователи наводят курсор на элемент.

Пример:

HTML:

<button class="tooltip">Hover me!</button>

CSS:

.tooltip {
  position: relative;
}
.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -25px;
  left: 0;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover::before {
  opacity: 1;
}

3. Использование библиотек JavaScript:

Существует несколько библиотек JavaScript, которые упрощают реализацию доступных всплывающих подсказок. Эти библиотеки обрабатывают аспекты доступности и предоставляют настраиваемые компоненты всплывающих подсказок со встроенной поддержкой атрибутов ARIA.

Пример (с использованием библиотеки Tippy.js):

HTML:

<button id="myButton">Hover me!</button>

JavaScript:

import tippy from 'tippy.js';
const button = document.getElementById('myButton');
tippy(button, {
  content: 'This is a tooltip!',
});

Внедрение доступных всплывающих подсказок имеет решающее значение для создания удобного и инклюзивного веб-интерфейса. Используя атрибут «aria-describedby», методы CSS или библиотеки JavaScript, вы можете гарантировать, что всплывающие подсказки будут доступны всем пользователям, включая людей с ограниченными возможностями. Не забудьте протестировать всплывающие подсказки с помощью программ чтения с экрана и других вспомогательных технологий, чтобы убедиться в их эффективности. Отдавая приоритет доступности, вы улучшите взаимодействие с пользователем и сделаете свой сайт более привлекательным для всех посетителей.