Анонсирование смены страниц

Основные принципы

В веб-разработке обеспечение доступности навигации между страницами критично для пользователей, использующих вспомогательные технологии. Библиотека ally.js предоставляет инструменты для управления фокусом и оповещений при смене контента, что позволяет корректно информировать пользователей о переходе на новую страницу или изменение значимой части интерфейса.

Ключевая цель анонсирования смены страниц — уведомление пользователя о том, что контент обновился, без необходимости ручного поиска изменений. Это особенно важно для одностраничных приложений (SPA), где переход между «страницами» происходит динамически.

Использование live regions

В ally.js для оповещения о смене страниц применяется механизм live regions — специальных областей DOM, содержащих информацию для вспомогательных технологий.

Пример создания live region:

import ally from 'ally.js';

// Создание скрытой области для анонсов
const liveRegion = document.createElement('div');
liveRegion.setAttribute('aria-live', 'polite');
liveRegion.setAttribute('aria-atomic', 'true');
liveRegion.style.position = 'absolute';
liveRegion.style.width = '1px';
liveRegion.style.height = '1px';
liveRegion.style.overflow = 'hidden';
liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
document.body.appendChild(liveRegion);

// Функция для анонса текста
function announcePageChange(message) {
    liveRegion.textContent = '';
    setTimeout(() => {
        liveRegion.textContent = message;
    }, 100);
}

Пояснения:

  • aria-live="polite" гарантирует, что вспомогательные технологии не прервут текущие действия пользователя, а сообщат об изменении, когда это будет удобно.
  • aria-atomic="true" обеспечивает полное считывание всего содержимого региона при изменении, даже если изменился только фрагмент.
  • Использование setTimeout позволяет инициировать обновление текста после очистки, чтобы обеспечить повторное прочтение одной и той же информации.

Интеграция с навигацией

Для динамических переходов между страницами live region обновляется в момент смены контента:

import ally from 'ally.js';

function onRouteChange(newPageTitle) {
    // Обновление контента страницы
    document.title = newPageTitle;
    
    // Анонс для вспомогательных технологий
    announcePageChange(`Загружена страница: ${newPageTitle}`);
    
    // Управление фокусом для доступности
    const mainContent = document.querySelector('main');
    if (mainContent) {
        ally.focus.firstTabbable(mainContent);
    }
}

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

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

Конфигурация и расширение

Ally.js позволяет настраивать стратегии анонсирования и управления фокусом:

  • Тип live region: "polite" или "assertive" — выбор между ненавязчивым и срочным оповещением.
  • Длительность анонса: контроль временного интервала, чтобы пользователь успел воспринять сообщение.
  • Кастомные обработчики событий: возможность реагировать на любые изменения DOM или маршрута SPA.

Пример создания assertive-региона:

const assertiveRegion = document.createElement('div');
assertiveRegion.setAttribute('aria-live', 'assertive');
assertiveRegion.setAttribute('aria-atomic', 'true');
assertiveRegion.style.position = 'absolute';
assertiveRegion.style.width = '1px';
assertiveRegion.style.height = '1px';
assertiveRegion.style.overflow = 'hidden';
assertiveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
document.body.appendChild(assertiveRegion);

function announceCriticalChange(message) {
    assertiveRegion.textContent = '';
    setTimeout(() => {
        assertiveRegion.textContent = message;
    }, 50);
}

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

Практические рекомендации

  • Разделять polite и assertive регионы для разных типов уведомлений.
  • Использовать минимальные визуальные эффекты, чтобы не отвлекать пользователей.
  • Всегда перемещать фокус на основной контент после смены страницы.
  • Проверять анонсы с экранными читалками (например, NVDA, JAWS) и тестировать различные сценарии перехода.

Поддержка одностраничных приложений

SPA требуют особого внимания к анонсированию:

  • При изменении маршрута необходимо обновлять заголовок страницы (document.title) и live region.
  • Состояние фокуса должно быть предсказуемым и согласованным с изменением контента.
  • Ally.js предоставляет удобные функции для поиска первой доступной интерактивной области и управления фокусом без сложных ручных обходов DOM.

Такой подход делает навигацию в SPA максимально доступной и предсказуемой для всех категорий пользователей.

Оглавление