Управление фокусом и доступностью

Cash — это компактная и удобная библиотека для работы с DOM, которая во многом повторяет синтаксис jQuery, но при этом отличается минимальным размером и высокой производительностью. Одной из важных областей применения является управление фокусом и доступностью элементов интерфейса, что особенно актуально для создания веб-приложений, соответствующих стандартам WCAG.

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

Работа с фокусом

Установка и снятие фокуса

Cash использует привычный метод .focus() для установки фокуса на элемент и .blur() для его снятия. Это позволяет программно управлять активным элементом на странице.

$('#inputField').focus(); // Устанавливает фокус на поле ввода
$('#inputField').blur();  // Снимает фокус

Проверка, находится ли элемент в фокусе

Чтобы определить, активен ли элемент, можно использовать стандартное свойство DOM document.activeElement совместно с Cash:

if ($('#inputField')[0] === document.activeElement) {
  console.log('Элемент в фокусе');
}

Это особенно полезно при реализации навигации с клавиатуры или контроле состояния форм.

Навигация по фокусируемым элементам

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

const focusable = $('button, a, input, select, textarea').toArray();
focusable.forEach((el, index) => {
  $(el).on('keydown', (e) => {
    if (e.key === 'Tab') {
      e.preventDefault();
      const nextIndex = (index + 1) % focusable.length;
      $(focusable[nextIndex]).focus();
    }
  });
});

Метод .toArray() позволяет получить массив DOM-элементов для дальнейшей работы с нативными событиями.

Управление доступностью элементов

Атрибуты ARIA

Cash поддерживает работу с атрибутами через .attr() и .removeAttr(), что позволяет динамически управлять доступностью интерфейса:

$('#menu').attr('aria-hidden', 'true'); // Скрытие меню для скринридеров
$('#menu').attr('aria-hidden', 'false'); // Делает меню доступным

Состояние disabled и tabindex

Для корректной работы фокуса важно управлять атрибутами disabled и tabindex:

$('#submitButton').attr('disabled', true);  // Отключение кнопки
$('#submitButton').removeAttr('disabled');  // Включение кнопки
$('#modal').attr('tabindex', '-1');         // Снимает элемент с естественного порядка табуляции

tabindex="-1" используется для элементов, которые должны быть доступны программно, но исключены из последовательности клавиатурной навигации.

Отслеживание событий фокуса

Cash облегчает привязку событий фокуса и потери фокуса с помощью .on():

$('#inputField').on('focus', () => {
  console.log('Поле ввода активно');
});

$('#inputField').on('blur', () => {
  console.log('Поле ввода потеряло фокус');
});

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

$(document).on('focus', '.dynamic-input', (e) => {
  $(e.target).css('border-color', 'blue');
});

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

Работа с видимостью и доступностью элементов

Cash предоставляет методы .show(), .hide() и .toggle() для управления видимостью, но важно учитывать, что скрытие элемента с помощью display: none делает его недоступным для фокуса и скринридеров. Для управления доступностью рекомендуется комбинировать CSS и ARIA-атрибуты:

$('#sidebar').hide().attr('aria-hidden', 'true');  // Скрывает и делает недоступным
$('#sidebar').show().attr('aria-hidden', 'false'); // Показывает и делает доступным

Использование .toggle() позволяет создавать интерактивные элементы управления без нарушения стандартов доступности.

Управление фокусом в модальных окнах

При создании модальных диалогов важно:

  1. Переносить фокус на первый интерактивный элемент модалки.
  2. Блокировать фокус на элементах за модальным окном.
  3. Возвращать фокус на элемент, который инициировал модалку, при её закрытии.

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

const trigger = $('#openModal');
const modal = $('#modal');
const firstInput = $('#modal input:first');

trigger.on('click', () => {
  modal.show().attr('aria-hidden', 'false');
  firstInput.focus();
});

$('#closeModal').on('click', () => {
  modal.hide().attr('aria-hidden', 'true');
  trigger.focus();
});

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

Интеграция с динамическим контентом

Cash обеспечивает простое управление фокусом при динамически создаваемых элементах:

$('#addItem').on('click', () => {
  const newItem = $('<input type="text" class="dynamic-input">');
  $('#container').append(newItem);
  newItem.focus();
});

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

Итоговая практика

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

Оглавление