ARIA-атрибуты свитчей

В HTML-элементах свитчей (Switch) используется роль switch, которая информирует вспомогательные технологии о том, что элемент управляет бинарным состоянием: включено или выключено. Для корректного взаимодействия с экранными ридерами и другими ассистивными технологиями необходимо использовать ARIA-атрибуты:

  • role="switch" — определяет элемент как переключатель.
  • aria-checked — указывает текущее состояние свитча (true для включенного, false для выключенного).
  • aria-disabled — если элемент временно неактивен, значение true блокирует взаимодействие.

Пример базовой разметки:

<button
  role="switch"
  aria-checked={isOn}
  onCl ick={() => setIsOn(!isOn)}
>
  {isOn ? "Включено" : "Выключено"}
</button>

Управление состоянием с React Aria

React Aria предоставляет хуки, которые абстрагируют работу с ARIA-атрибутами и управлением состояния. Основной хук для свитчей — useSwitch. Он обеспечивает корректную генерацию всех необходимых атрибутов и обработчиков событий.

Пример использования:

import { useSwitch } from "@react-aria/switch";
import { useToggleState } from "@react-stately/toggle";

function ToggleSwitch() {
  const state = useToggleState();
  const ref = React.useRef();
  const { inputProps } = useSwitch({ isSelected: state.isSelected }, state, ref);

  return (
    <div>
      <input {...inputProps} ref={ref} />
      <label>Состояние: {state.isSelected ? "Включено" : "Выключено"}</label>
    </div>
  );
}

Здесь useToggleState управляет внутренним состоянием переключателя, а useSwitch гарантирует, что все ARIA-атрибуты (role, aria-checked, aria-disabled) будут выставлены корректно.

Атрибут aria-checked

aria-checked — ключевой атрибут для свитчей. Он может принимать три значения:

  • true — включено.
  • false — выключено.
  • mixed — частичное состояние (используется редко, например, в свитчах с дочерними элементами).

React Aria автоматически синхронизирует aria-checked с состоянием, если использовать useSwitch и useToggleState.

<input
  {...inputProps}
  aria-checked={state.isSelected}
/>

Обработка отключенных и заблокированных состояний

Для элементов, которые нельзя изменить пользователю, используется aria-disabled. React Aria позволяет просто передать флаг isDisabled:

const { inputProps } = useSwitch({ isSelected: state.isSelected, isDisabled: true }, state, ref);

В этом случае:

  • Пользовательский клик игнорируется.
  • Ассистивные технологии понимают, что переключатель неактивен.

Фокусировка и клавиатурная навигация

Свитчи должны быть полностью управляемыми с клавиатуры. React Aria обрабатывает:

  • Space и Enter для переключения состояния.
  • Табуляцию для перемещения фокуса между элементами.
  • Поддержку focus-visible для стилизации фокуса.

Использование хука useSwitch автоматически привязывает эти события к элементу:

<button {...inputProps} ref={ref}>
  {state.isSelected ? "Включено" : "Выключено"}
</button>

Лейблы и ассоциации

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

  • Использовать <label> с htmlFor и id на элементе <input> внутри свитча.
  • Если используется кастомная разметка, передавать aria-label или aria-labelledby.
<input
  {...inputProps}
  id="notifications-switch"
  aria-label="Уведомления"
/>

Комбинация с другими ARIA-атрибутами

Свитчи часто используют вместе с:

  • aria-describedby — для дополнительной информации о действии свитча.
  • aria-controls — если переключатель управляет видимостью других элементов.

Пример:

<input
  {...inputProps}
  aria-describedby="notifications-desc"
  aria-controls="notifications-settings"
/>
<p id="notifications-desc">Включение уведомлений по электронной почте</p>
<div id="notifications-settings">...</div>

Преимущества использования React Aria для свитчей

  • Автоматическая генерация ARIA-атрибутов.
  • Корректная обработка событий клавиатуры и фокуса.
  • Поддержка отключенных состояний и частичных состояний.
  • Простая интеграция с кастомной визуальной разметкой без потери доступности.

Таким образом, использование useSwitch и useToggleState позволяет создавать полностью доступные свитчи в React-приложениях, не заботясь о мелких деталях ARIA.

Оглавление