ARIA-атрибуты

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

Роль модального окна

Модальные окна, создаваемые с помощью BasicLightbox, должны быть обозначены как модальные элементы на странице для использования вспомогательными технологиями, такими как экранные читалки. Для этого используется ARIA-атрибут role="dialog". Это указывает браузеру и вспомогательным технологиям, что содержимое окна является модальным и требует внимания пользователя.

<div class="basicLightbox" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <div class="content">
    <h2 id="modal-title">Заголовок модального окна</h2>
    <p>Содержимое модального окна.</p>
  </div>
</div>

Здесь атрибут role="dialog" обозначает, что это модальное окно, а aria-labelledby указывает на элемент, который служит заголовком окна, для того чтобы читалка могла правильно произнести его.

Скрытие модального окна

Для скрытия модального окна от вспомогательных технологий, таких как экранные читалки, используется атрибут aria-hidden="true". Этот атрибут должен быть динамически изменён на false, когда окно становится видимым, чтобы читалка могла его распознать и взаимодействовать с ним.

const modal = basicLightbox.create(`
  <div role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <h2 id="modal-title">Заголовок модального окна</h2>
    <p>Содержимое модального окна.</p>
  </div>
`);

modal.show();
modal.element().setAttribute('aria-hidden', 'false');  // Окно становится доступным

При закрытии окна необходимо вернуть атрибут aria-hidden="true", чтобы оно снова становилось недоступным для читалок.

Кнопка закрытия

Модальные окна обычно включают кнопку закрытия. Для улучшения доступности этой кнопки необходимо использовать ARIA-атрибуты для её описания. Обычно для этого применяется aria-label, который даёт чёткое описание действия кнопки.

<button class="close" aria-label="Закрыть окно">×</button>

Также, можно добавить role="button", чтобы указать, что элемент является кнопкой, если это необходимо для каких-либо вспомогательных технологий.

Фокусировка и управление клавиатурой

При открытии модального окна следует зафиксировать фокус на первом интерактивном элементе внутри окна. Это гарантирует, что пользователи с клавиатурным управлением смогут сразу взаимодействовать с элементом. После закрытия модального окна фокус должен возвращаться на элемент, который открыл модальное окно.

Для этого часто используется Jav * aScript:

modal.show();
const firstFocusableElement = modal.element().querySelector('button, a, input');
firstFocusableElement.focus();

Если модальное окно открывается при фокусе на определённом элементе, его фокус следует сохранить после закрытия окна:

const previouslyFocusedElement = document.activeElement;
modal.show();
modal.element().addEventListener('close', () => {
  previouslyFocusedElement.focus();
});

Атрибуты для закрытия с клавиатуры

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

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    modal.close();
  }
});

Это решение помогает не только пользователям с нарушениями моторики, но и тем, кто предпочитает навигацию с клавиатуры.

Визуальные подсказки

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

Например, использование контрастных цветовых схем или увеличение шрифта через CSS может улучшить доступность:

.basicLightbox {
  font-size: 18px;
  color: #333;
  background-color: #fff;
}

.basicLightbox h2 {
  font-size: 22px;
}

Завершение

Правильная настройка ARIA-атрибутов в BasicLightbox имеет ключевое значение для обеспечения доступности и улучшения пользовательского опыта на веб-сайте. Основные моменты включают добавление role="dialog", правильное управление атрибутом aria-hidden, использование aria-labelledby для идентификации заголовков и создание клавиатурных сценариев для управления фокусом и закрытием окон.

Оглавление