Реализация всплывающих подсказок: доступная информация при наведении и фокусе

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

Почему доступность важна для всплывающих подсказок

Доступность — это не просто соответствие стандартам; это создание лучшего пользовательского опыта для всех. Когда всплывающие подсказки недоступны, это может исключить пользователей, которые полагаются на вспомогательные технологии, такие как скринридеры, клавиатурную навигацию или голосовой ввод. Рассмотрим следующие сценарии:

• Пользователи скринридеров: Если всплывающая подсказка неправильно размечена, скринридер может не объявить о её появлении или содержимом.
• Пользователи клавиатуры: Если всплывающая подсказка появляется только при наведении курсора, пользователи клавиатуры не смогут получить к ней доступ.
• Пользователи с двигательными нарушениями: Точные движения мыши, необходимые для взаимодействия при наведении, могут быть сложными или невозможными.
• Пользователи с когнитивными нарушениями: Несвоевременная или запутанная всплывающая подсказка может вызвать разочарование и затруднить понимание.

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

Ключевые принципы для доступных всплывающих подсказок

Следующие принципы имеют решающее значение для создания доступных всплывающих подсказок:

1. Обеспечьте альтернативный доступ: Убедитесь, что всплывающие подсказки доступны как при наведении курсора, так и при фокусе с клавиатуры.
2. Используйте атрибуты ARIA: Используйте атрибуты ARIA (Accessible Rich Internet Applications) для правильной идентификации и описания всплывающих подсказок для вспомогательных технологий.
3. Управляйте фокусом: Контролируйте, куда перемещается фокус при отображении и скрытии всплывающей подсказки.
4. Обеспечьте достаточную контрастность: Обеспечьте достаточную цветовую контрастность между текстом и фоном всплывающей подсказки.
5. Предоставляйте достаточно времени: Дайте пользователям достаточно времени, чтобы прочитать содержимое всплывающей подсказки.
6. Сделайте их закрываемыми: Предоставьте ясный способ закрыть всплывающую подсказку.
7. Избегайте чрезмерного использования: Используйте всплывающие подсказки экономно и только при необходимости.

Техники реализации

1. Использование наведения и фокуса

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

HTML:

<a href="#" aria-describedby="tooltip-example">Пример ссылки</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Это пример всплывающей подсказки.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Убедитесь, что подсказка находится сверху */
}

Объяснение:

• aria-describedby: Этот атрибут связывает ссылку с элементом всплывающей подсказки, используя её ID. Это сообщает вспомогательным технологиям, что всплывающая подсказка предоставляет дополнительную информацию о ссылке.
• role="tooltip": Эта роль ARIA идентифицирует элемент как всплывающую подсказку.
• CSS использует селектор смежного соседа (+), чтобы показать всплывающую подсказку, когда на ссылку наводят курсор или она получает фокус.

JavaScript (расширенное управление - опционально):

Хотя CSS может справиться с простым показом/скрытием, JavaScript позволяет более надёжно управлять подсказками, особенно когда они генерируются динамически или требуют более сложного поведения.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Использование атрибутов ARIA

Атрибуты ARIA необходимы для предоставления семантической информации вспомогательным технологиям. Вот описание ключевых атрибутов:

• aria-describedby: Как упоминалось ранее, этот атрибут устанавливает связь между инициирующим элементом и элементом всплывающей подсказки.
• role="tooltip": Этот атрибут явно определяет элемент как всплывающую подсказку.
• aria-hidden="true"/aria-hidden="false": Используйте их, чтобы указать, видна ли в данный момент всплывающая подсказка для вспомогательных технологий. Когда подсказка скрыта, установите aria-hidden="true". Когда она видна, установите aria-hidden="false". Это особенно важно при использовании JavaScript для управления видимостью всплывающей подсказки.

Пример:

<button aria-describedby="help-tooltip">Отправить</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Нажмите здесь, чтобы отправить форму.</div>

JavaScript (для aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Управление фокусом

Когда появляется всплывающая подсказка, она, как правило, *не должна* перехватывать фокус у инициирующего элемента. Фокус должен оставаться на элементе, который вызвал подсказку. Это гарантирует, что пользователи клавиатуры смогут продолжать навигацию по странице без неожиданных прерываний.

Однако могут быть ситуации, когда вы *хотите* переместить фокус на всплывающую подсказку, особенно если она содержит интерактивные элементы (например, ссылки, кнопки). В этом случае убедитесь, что:

• Всплывающая подсказка визуально выделена, чтобы показать, что она в фокусе.
• Существует ясный способ вернуть фокус на исходный инициирующий элемент (например, кнопка закрытия внутри всплывающей подсказки).

В большинстве случаев для простоты и удобства использования предпочтительно избегать управления фокусом внутри самой всплывающей подсказки.

4. Обеспечение достаточной контрастности

Цветовая контрастность имеет решающее значение для читаемости. Убедитесь, что цвет текста в ваших всплывающих подсказках имеет достаточную контрастность по отношению к цвету фона. Рекомендации по обеспечению доступности веб-контента (WCAG) рекомендуют коэффициент контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста (18pt или 14pt жирным).

Используйте онлайн-проверки контрастности, чтобы убедиться, что ваш выбор цветов соответствует стандартам доступности. Примеры таких инструментов:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Пример (хорошая контрастность):

.tooltip {
  background-color: #000;
  color: #fff;
}

Пример (плохая контрастность):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Предоставление достаточного времени

Пользователям нужно достаточно времени, чтобы прочитать содержимое всплывающей подсказки. Избегайте подсказок, которые исчезают слишком быстро. Хотя волшебного числа нет, стремитесь к минимальному времени отображения в несколько секунд. Также подсказка должна оставаться видимой, пока пользователь наводит курсор на инициирующий элемент или держит на нём фокус. Если вам нужно закрыть подсказку из-за других событий, предоставьте индикатор того, что она закроется.

Если содержимое всплывающей подсказки длинное, рассмотрите возможность предоставления пользователю способа вручную закрыть её (например, кнопкой закрытия или нажатием клавиши Escape).

6. Возможность закрытия

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

Способы закрытия всплывающих подсказок:

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

Пример (кнопка закрытия):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Это содержимое моей всплывающей подсказки.
  <button onclick="hideTooltip()">Закрыть</button>
</div>

Пример (клавиша Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Замените на вашу реальную функцию скрытия подсказки
  }
});

7. Избегание чрезмерного использования

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

Альтернативы всплывающим подсказкам:

• Чёткие метки: Используйте ясные и описательные метки для полей форм, кнопок и ссылок.
• Контекстная помощь: Предоставляйте справочный текст непосредственно в интерфейсе, рядом с соответствующими элементами.
• Справочная документация: Ссылайтесь на подробную справочную документацию для более сложных функций.

Дополнительные соображения

Динамический контент

Если содержимое вашей всплывающей подсказки генерируется динамически (например, загружается из API или обновляется на основе ввода пользователя), убедитесь, что атрибут aria-describedby и видимость подсказки обновляются соответствующим образом. Используйте JavaScript для управления этими обновлениями.

Позиционирование

Тщательно продумайте позиционирование ваших всплывающих подсказок. Избегайте их размещения таким образом, чтобы они скрывали важный контент или вызывали сдвиги макета. Учитывайте разные размеры и разрешения экрана и используйте CSS, чтобы подсказки всегда были видны в области просмотра.

Мобильные устройства

Всплывающие подсказки традиционно полагаются на взаимодействие при наведении курсора, которое недоступно на сенсорных устройствах. Для мобильных устройств рассмотрите использование альтернативных методов взаимодействия, таких как:

• Касание (Tap): Отображайте всплывающую подсказку, когда пользователь касается элемента.
• Долгое нажатие (Long press): Отображайте всплывающую подсказку, когда пользователь долго нажимает на элемент.
• Показывать при фокусе: Отображайте, когда элемент получает фокус. Этого можно достичь с помощью JavaScript, проверяя поддержку сенсорного ввода (например, ('ontouchstart' in window)) и соответствующим образом изменяя поведение отображения.

Тестирование ваших всплывающих подсказок

Тщательно тестируйте ваши всплывающие подсказки, чтобы убедиться, что они доступны для всех пользователей. Используйте комбинацию ручного тестирования и автоматизированных инструментов для проверки доступности.

Методы тестирования:

• Навигация с клавиатуры: Проверьте, что всплывающие подсказки доступны с помощью клавиатуры.
• Тестирование с помощью скринридера: Используйте скринридер, чтобы убедиться, что всплывающие подсказки правильно озвучиваются.
• Анализ цветовой контрастности: Используйте инструмент проверки цветовой контрастности, чтобы убедиться в достаточной контрастности.
• Тестирование на мобильных устройствах: Протестируйте всплывающие подсказки на различных мобильных устройствах и размерах экрана.
• Автоматизированное тестирование доступности: Используйте такие инструменты, как axe DevTools, WAVE или Lighthouse, для выявления потенциальных проблем с доступностью.

Интернационализация (i18n) и локализация (l10n)

При разработке всплывающих подсказок для глобальной аудитории помните об интернационализации и локализации:

• Направление текста: Поддерживайте направления текста как слева направо (LTR), так и справа налево (RTL). Используйте логические свойства CSS (например, margin-inline-start, margin-inline-end) вместо физических свойств (например, margin-left, margin-right) для вёрстки.
• Переводы для конкретных языков: Предоставляйте переводы содержимого всплывающих подсказок для разных языков.
• Форматы даты и времени: Адаптируйте форматы даты и времени к локали пользователя.
• Форматы чисел: Используйте соответствующие форматы чисел для разных регионов (например, десятичные разделители, разделители тысяч).

Заключение

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

Ресурсы

• ARIA Authoring Practices Guide (APG) - Tooltip
• Рекомендации по обеспечению доступности веб-контента (WCAG) 2.1
• MDN Web Docs - ARIA