Screen readers

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

Атрибуты ARIA и роль контейнера

Каждый слайд в fullPage.js должен быть корректно размечен с точки зрения ARIA (Accessible Rich Internet Applications). Основные моменты:

  • role=“region” — каждый раздел (section) или слайд (slide) следует объявлять как регион, чтобы экранные читалки могли воспринимать его как самостоятельную единицу контента.
  • aria-label / aria-labelledby — заголовки разделов должны быть уникальными и содержать краткое описание содержимого.
  • aria-hidden — разделы, которые в данный момент не активны, желательно скрывать для читалок, чтобы они не перемещались по неактивным секциям при навигации с клавиатуры.

Пример разметки слайдов:

<div id="fullpage">
  <div class="section" role="region" aria-label="Главная страница">
    <h2>Главная</h2>
    <p>Содержимое первой секции.</p>
  </div>
  <div class="section" role="region" aria-label="О нас" aria-hidden="true">
    <h2>О нас</h2>
    <p>Содержимое второй секции.</p>
  </div>
</div>

При переключении слайдов библиотека позволяет динамически обновлять атрибут aria-hidden, чтобы активный раздел был доступен, а все остальные временно игнорировались экранными читалками.

Обновление фокуса при смене слайдов

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

new fullpage('#fullpage', {
  onLeave: function(origin, destination, direction){
    destination.item.setAttribute('aria-hidden', 'false');
    origin.item.setAttribute('aria-hidden', 'true');
    
    // Перемещение фокуса на первый интерактивный элемент
    const focusable = destination.item.querySelector('a, button, input, textarea, select');
    if(focusable) focusable.focus();
  }
});

Ключевой момент — не просто перемещать визуальный контент, но и корректно обновлять состояние элементов с точки зрения читалок.

Навигация с клавиатуры

fullPage.js поддерживает навигацию с клавиатуры по умолчанию, но для доступности нужно удостовериться, что:

  • Tab проходит только через интерактивные элементы активного слайда.
  • Arrow Keys / Page Up / Page Down перемещают фокус вместе с визуальной прокруткой.
  • Используется правильная логика при горизонтальной навигации между слайдами в одной секции.

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

new fullpage('#fullpage', {
  keyboardScrolling: true,
  onLeave: function(origin, destination){
    // Обновление фокуса
    const firstElement = destination.item.querySelector('a, button, input');
    if(firstElement) firstElement.focus();
  }
});

Использование дополнительных уведомлений

Для динамически загружаемого контента полезно добавлять элементы уведомлений для читалок:

  • role=“status” или aria-live=“polite” — позволяют уведомлять о смене слайдов или новых событиях без необходимости ручного фокуса.
  • Такие уведомления не должны быть визуально навязчивыми, достаточно скрытого текстового блока.

Пример:

<div id="screen-reader-notifier" role="status" aria-live="polite" class="sr-only"></div>
new fullpage('#fullpage', {
  afterLoad: function(origin, destination){
    const notifier = document.getElementById('screen-reader-notifier');
    notifier.textContent = `Вы перешли на секцию: ${destination.item.querySelector('h2').textContent}`;
  }
});

Рекомендации по структуре контента

  1. Ясная иерархия заголовков — каждый слайд должен иметь заголовок уровня h2 или выше.
  2. Минимизация скрытых элементов — элементы, не относящиеся к активной секции, следует скрывать с помощью aria-hidden="true".
  3. Логическая последовательность — порядок слайдов должен соответствовать естественному линейному чтению.
  4. Интерактивные элементы — кнопки и ссылки должны быть доступны через клавиатуру, а также иметь описательные aria-label.

Динамическая подгрузка и lazy loading

Если секции или слайды загружаются динамически:

  • Нужно убедиться, что новые элементы получают атрибуты ARIA.
  • После подгрузки контента обязательно обновлять уведомление для читалок и корректно размещать фокус.
  • Использование fp_afterLoad позволяет интегрировать логику доступности с асинхронной подгрузкой контента.
fullpage_api.afterLoad = function(origin, destination){
  destination.item.setAttribute('aria-hidden', 'false');
  const firstFocusable = destination.item.querySelector('a, button, input');
  if(firstFocusable) firstFocusable.focus();
};

Итоговые аспекты

  • Активная секция должна быть единственным доступным регионом для читалок.
  • Фокус должен следовать за визуальной прокруткой.
  • ARIA-атрибуты и уведомления обеспечивают корректное восприятие контента.
  • Клавиатурная навигация должна быть непротиворечивой и предсказуемой.
  • При динамической подгрузке необходимо обновлять состояния ARIA и фокус.

Соблюдение этих принципов позволяет интегрировать fullPage.js в проекты с высокими требованиями доступности, делая интерактивный контент удобным для всех пользователей.

Оглавление