Поддержка скринридеров

Featherlight — лёгкая и минималистичная библиотека для создания модальных окон в JavaScript. Несмотря на простоту, она предоставляет возможности для обеспечения доступности, что особенно важно для пользователей, использующих скринридеры. Рассмотрим ключевые аспекты поддержки таких технологий.

Роли и атрибуты ARIA

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

  • role=“dialog” — назначает модальному окну роль диалога. Скринридеры воспринимают это как окно, требующее внимания.
  • aria-labelledby — указывает на элемент, содержащий заголовок модального окна. Позволяет скринридеру объявлять его название при открытии.
  • aria-describedby — указывает на элемент с описанием содержимого окна. Используется для передачи дополнительной информации пользователю.
  • aria-hidden — позволяет скрывать фоновый контент страницы от скринридеров, когда открыто модальное окно, чтобы избежать отвлекающих элементов.

Пример правильной разметки модального окна:

<div id="lightbox" class="featherlight" role="dialog" aria-labelledby="lightbox-title" aria-describedby="lightbox-desc">
    <h2 id="lightbox-title">Пример модального окна</h2>
    <p id="lightbox-desc">Это окно демонстрирует поддержку скринридеров в Featherlight.</p>
</div>

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

Открытие модального окна требует переноса фокуса внутрь него. Featherlight позволяет программно управлять фокусом через колбэки:

  • beforeOpen — можно сохранить текущий элемент с фокусом, чтобы вернуться к нему при закрытии.
  • afterOpen — устанавливает фокус на первый интерактивный элемент внутри окна или на само окно, если интерактивных элементов нет.
  • afterClose — возвращает фокус на исходный элемент.

Пример реализации:

var lastFocus;

$.featherlight('#lightbox', {
    beforeOpen: function() {
        lastFocus = document.activeElement;
    },
    afterOpen: function() {
        var firstFocusable = this.$content.find('button, a, input, textarea, select').first();
        (firstFocusable.length ? firstFocusable : this.$content).focus();
    },
    afterClose: function() {
        if(lastFocus) lastFocus.focus();
    }
});

Ограничение фокуса внутри окна

Чтобы предотвратить перемещение фокуса за пределы модального окна при навигации клавишей Tab, реализуется фокус-трап. Featherlight не предоставляет встроенный фокус-трап, но его легко добавить:

this.$content.on('keydown', function(e) {
    if(e.key === 'Tab') {
        var focusable = $(this).find('a, button, input, textarea, select').filter(':visible');
        var first = focusable.first()[0];
        var last = focusable.last()[0];

        if(e.shiftKey && document.activeElement === first) {
            e.preventDefault();
            last.focus();
        } else if(!e.shiftKey && document.activeElement === last) {
            e.preventDefault();
            first.focus();
        }
    }
});

Скрытие фонового контента

Для улучшения доступности фоновые элементы страницы должны быть скрыты от скринридеров с помощью aria-hidden. Featherlight позволяет это реализовать через колбэк beforeOpen и afterClose:

var $mainContent = $('main');

$.featherlight('#lightbox', {
    beforeOpen: function() {
        $mainContent.attr('aria-hidden', 'true');
    },
    afterClose: function() {
        $mainContent.removeAttr('aria-hidden');
    }
});

Обработка динамического контента

Если модальное окно содержит динамически загружаемый контент (например, через AJAX), важно обновлять ARIA-описания и фокус после загрузки:

$.featherlight({
    ajax: '/example.html',
    afterContent: function() {
        this.$content.attr('aria-label', 'Динамический контент');
        this.$content.focus();
    }
});

Клавиатурная навигация

Поддержка скринридеров невозможна без полноценной клавиатурной навигации. Featherlight предоставляет опцию закрытия окна клавишей Esc, а также можно обрабатывать дополнительные сочетания для управления:

$(document).on('keydown', function(e) {
    if(e.key === 'Escape' && $('.featherlight:visible').length) {
        $.featherlight.close();
    }
});

Проверка доступности

Для проверки корректности работы скринридеров рекомендуется:

  • Использовать VoiceOver на macOS и NVDA на Windows.
  • Проверять порядок фокуса при открытии и закрытии окна.
  • Проверять объявление заголовка и описания через ARIA.

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

Оглавление