Screen readers

Popper.js предоставляет мощный и гибкий механизм позиционирования всплывающих элементов, таких как тултипы, всплывающие меню и подсказки. При создании доступных интерфейсов важно учитывать работу с экранными читалками (screen readers), чтобы пользователи с нарушениями зрения могли корректно воспринимать контент.

Основные принципы доступности

ARIA-атрибуты являются ключевым инструментом для интеграции Popper.js с экранными читалками. Для всплывающих элементов необходимо:

  • Использовать aria-describedby или aria-labelledby для связывания целевого элемента с тултипом или подсказкой.
  • Устанавливать role="tooltip" для всплывающих элементов, чтобы экранные читалки распознавали их назначение.
  • Следить за тем, чтобы контент тултипа присутствовал в DOM до появления через Popper.js. Скриптовое создание элемента после события может вызвать задержку, в которой экранные читалки не смогут его прочитать.

Пример связывания кнопки с тултипом:

<button id="saveBtn" aria-describedby="tooltip1">Сохранить</button>
<div id="tooltip1" role="tooltip">
  Сохранить текущие изменения
</div>
import { createPopper } from '@popperjs/core';

const button = document.querySelector('#saveBtn');
const tooltip = document.querySelector('#tooltip1');

createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
});

В этом примере Popper.js отвечает за точное позиционирование тултипа, а экранная читалка получает контент сразу благодаря aria-describedby.

Динамическое обновление контента

Если содержимое тултипа изменяется динамически (например, статус операции), важно уведомлять экранные читалки о обновлении. Для этого используют атрибут aria-live:

<div id="tooltip1" role="tooltip" aria-live="polite">
  Подготовка...
</div>

Popper.js не управляет содержимым, но позиционирует элемент. Обновление текста в тултипе автоматически будет озвучено читалкой благодаря aria-live="polite" или "assertive" в зависимости от важности информации.

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

Для всплывающих элементов с интерактивным контентом (например, меню, выпадающие списки) важно корректно управлять фокусом:

  • Тултип не должен получать фокус, если это просто информационный элемент.
  • Для интерактивных попапов можно использовать tabindex="-1" для Popper-элемента и вручную устанавливать фокус при открытии.
  • После закрытия попапа фокус возвращается на элемент-триггер, что предотвращает потерю контекста для пользователей экранных читалок.

Пример управления фокусом:

const popperInstance = createPopper(button, tooltip, {
  placement: 'bottom',
});

button.addEventListener('click', () => {
  tooltip.style.display = 'block';
  tooltip.setAttribute('tabindex', '-1');
  tooltip.focus();
});

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

Скрытие элементов для экранных читалок

Иногда требуется визуально скрыть элемент, оставив его доступным для читалок. Для этого используют класс sr-only или аналогичные техники с CSS:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Это полезно для элементов, которые Popper.js позиционирует, но которые не должны быть видимыми на экране.

Особенности работы с модификаторами

Некоторые модификаторы Popper.js могут влиять на доступность, если они меняют размеры или порядок отображения:

  • flip — может перемещать тултип на другую сторону. Для экранных читалок это не критично, но важно, чтобы контент оставался в DOM.
  • preventOverflow — помогает удерживать элемент в видимой области, что важно для визуальных пользователей, но читалки воспринимают текст независимо от позиции.
  • computeStyles — управление стилями через position: absolute или fixed не влияет на ARIA, но обеспечивает правильное расположение на экране.

Тестирование с экранными читалками

Для проверки совместимости Popper.js с читалками следует использовать:

  • NVDA или JAWS на Windows.
  • VoiceOver на macOS и iOS.
  • Проверять навигацию с клавиатуры и корректность озвучивания контента тултипов и всплывающих меню.
  • Убедиться, что динамически обновляемый контент озвучивается при изменении aria-live или через фокус.

Итоговые рекомендации

  • Всегда связывать целевой элемент и тултип через aria-describedby или aria-labelledby.
  • Устанавливать role="tooltip" и при необходимости aria-live для динамического контента.
  • Управлять фокусом при интерактивных всплывающих элементах.
  • Скрывать визуально, но оставлять доступным для читалок через CSS.
  • Тестировать с реальными экранными читалками и различными сценариями навигации клавиатурой.

Popper.js предоставляет гибкие инструменты позиционирования, а соблюдение ARIA-стандартов гарантирует, что всплывающие элементы будут полностью доступны пользователям с ограничениями по зрению.

Оглавление