ARIA-атрибуты

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

Основные ARIA-атрибуты, применяемые в fullPage.js

  1. role=“region” Каждая секция (.section) получает этот атрибут для обозначения самостоятельной смысловой области. Атрибут role="region" помогает экранным читалкам идентифицировать отдельные части страницы как логические блоки.

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

<div class="section" role="region" aria-label="Секция 1"></div>

aria-label позволяет пользователю понять содержание секции, даже если визуально это не отображается.

  1. aria-hidden При переключении между секциями библиотека управляет видимостью контента с помощью aria-hidden. Секции, которые не активны в данный момент, получают aria-hidden="true", а активная секция — aria-hidden="false". Это предотвращает озвучивание невидимого контента.

  2. aria-live fullPage.js может использовать aria-live="polite" для динамического уведомления экранных читалок о изменениях активной секции. Это особенно полезно для одностраничных приложений, где содержимое обновляется без перезагрузки страницы.

  3. aria-roledescription Для слайдов внутри секций (.slide) применяется aria-roledescription="слайд", что позволяет пользователю понять, что текущий элемент является частью карусели или слайд-шоу.

Применение ARIA-атрибутов при навигации

fullPage.js обеспечивает управление ARIA-атрибутами при:

  • Скролле между секциями: атрибут aria-hidden обновляется, чтобы скрытые секции не мешали вспомогательным технологиям.
  • Использовании навигационных элементов (.fp-nav): каждая точка навигации получает aria-controls, указывающий на соответствующую секцию.
  • Горизонтальной навигации по слайдам: при смене слайда активному элементу присваивается aria-hidden="false", остальным — aria-hidden="true".

Примеры HTML с ARIA в fullPage.js

<div id="fullpage">
  <div class="section" role="region" aria-label="Главная секция" aria-hidden="false">
    <div class="slide" aria-roledescription="слайд" aria-hidden="false">
      Контент слайда 1
    </div>
    <div class="slide" aria-roledescription="слайд" aria-hidden="true">
      Контент слайда 2
    </div>
  </div>
  <div class="section" role="region" aria-label="Секция 2" aria-hidden="true">
    Контент секции 2
  </div>
</div>

Конфигурация fullPage.js для управления доступностью

fullPage.js предоставляет опции, влияющие на ARIA:

  • keyboardScrolling — включает или отключает навигацию с клавиатуры, что напрямую влияет на уведомления экранных читалок.
  • recordHistory — при изменении URL обновляется активная секция, что помогает вспомогательным технологиям отслеживать навигацию.
  • aria — булева настройка, включающая автоматическое управление ARIA-атрибутами (true по умолчанию).

Пример инициализации с ARIA:

new fullpage('#fullpage', {
  autoScrolling: true,
  navigation: true,
  aria: true,
  keyboardScrolling: true
});

Рекомендации по расширению ARIA

  • Добавлять описательные aria-label к секциям и слайдам, чтобы точно передавать смысл контента.
  • Использовать aria-describedby для ссылок на поясняющий текст, если информация слишком объемная.
  • Контролировать aria-hidden вручную в кастомных анимациях или динамических элементах вне стандартных секций и слайдов.

Важные моменты

  • ARIA не заменяет семантическую разметку. section, article, nav и другие теги должны использоваться вместе с ARIA.
  • Неправильное управление aria-hidden может привести к тому, что экранные читалки будут игнорировать видимые секции.
  • При горизонтальной навигации обязательно поддерживать aria-roledescription="слайд", иначе пользователь может потерять контекст перемещения внутри секции.

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

Оглавление