ARIA-атрибуты

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

Основные ARIA-атрибуты

aria-describedby Этот атрибут применяется к элементу, для которого создаётся тултип. Он указывает на идентификатор элемента с подсказкой. Tooltipster автоматически назначает aria-describedby элементу-триггеру и присваивает уникальный id подсказке.

Пример:

$('.tooltip').tooltipster({
    content: 'Это подсказка',
    theme: 'tooltipster-light'
});

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

<button class="tooltip" aria-describedby="tooltipster-content-1">Наведите на меня</button>
<div class="tooltipster-box" id="tooltipster-content-1">Это подсказка</div>

Особенности:

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

role="tooltip" Каждая подсказка автоматически получает ARIA-роль tooltip. Это сообщает скринридеру, что данный элемент является всплывающей подсказкой и связан с другим элементом на странице.

<div class="tooltipster-box" role="tooltip" id="tooltipster-content-1">
    Это подсказка
</div>

Преимущества использования role="tooltip:

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

Настройка ARIA-поддержки в Tooltipster

Tooltipster позволяет управлять ARIA-атрибутами через параметры конфигурации:

$('.tooltip').tooltipster({
    content: 'Подсказка с ARIA',
    trigger: 'hover',
    interactive: true,
    functionInit: function(instance, helper) {
        // Можно изменить ARIA-атрибуты вручную
        $(helper.origin).attr('aria-describedby', 'custom-tooltip-id');
    }
});

Параметры, влияющие на доступность:

  • interactive – если установлено в true, скринридеры будут учитывать, что пользователь может взаимодействовать с тултипом.
  • functionReady – вызывается после открытия подсказки, позволяет динамически обновлять ARIA-ссылки.
  • contentAsHTML – позволяет использовать разметку внутри подсказки без нарушения ARIA-связей.

Динамическое обновление ARIA-атрибутов

Для тултипов с динамическим контентом важно поддерживать актуальность ARIA-ссылок. Tooltipster предоставляет методы для обновления содержимого:

var instance = $('.tooltip').tooltipster().tooltipster('instance');

instance.content('Новый контент подсказки');

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

Ключевые рекомендации

  • Никогда не отключать ARIA-поддержку, она встроена по умолчанию и критична для доступности.
  • Использовать уникальные id для каждого тултипа, чтобы исключить конфликт ссылок.
  • Для интерактивных элементов (кнопки, поля формы) включать interactive: true, чтобы экранные читалки корректно воспринимали содержимое.
  • Если тултип создаётся динамически на основе AJAX, обновлять ARIA-ссылки после загрузки данных через методы content или functionReady.

Пример полной конфигурации с ARIA

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    interactive: true,
    trigger: 'hover',
    content: $('<span>Доступная подсказка с ARIA</span>'),
    functionReady: function(instance, helper){
        $(helper.tooltip).attr('role', 'tooltip');
        $(helper.origin).attr('aria-describedby', $(helper.tooltip).attr('id'));
    }
});

Такой подход обеспечивает:

  • Полную доступность для пользователей с экранными читалками.
  • Корректную работу динамических подсказок.
  • Соответствие стандарту WAI-ARIA и современным требованиям веб-доступности.

Tooltipster позволяет создать максимально доступный интерфейс без сложных дополнительных скриптов, делая ARIA-атрибуты неотъемлемой частью любой реализации всплывающих подсказок.

Оглавление