ARIA-атрибуты для кнопок

В библиотеке React Aria управление доступностью компонентов строится на использовании ARIA-атрибутов, которые обеспечивают корректное взаимодействие с экранными считывателями и другими вспомогательными технологиями. Кнопки (<button>) — один из ключевых элементов интерфейса, где правильная установка ARIA-атрибутов критична.

aria-label и aria-labelledby

aria-label используется для явного задания текстового описания кнопки, которое будет озвучиваться экранными считывателями. Применяется, когда кнопка содержит только иконку или визуальные элементы без текста.

import { useButton } from '@react-aria/button';
import { useRef } from 'react';

function IconButton() {
  const ref = useRef();
  const { buttonProps } = useButton({ 'aria-label': 'Закрыть' }, ref);

  return <button {...buttonProps} ref={ref}><span>×</span></button>;
}

aria-labelledby связывает кнопку с элементом, который уже содержит текстовое описание. Это позволяет избежать дублирования текста и удобно использовать в сложных интерфейсах.

function LabeledButton() {
  const ref = useRef();
  const { buttonProps } = useButton({ 'aria-labelledby': 'button-label' }, ref);

  return (
    <>
      <span id="button-label">Отправить</span>
      <button {...buttonProps} ref={ref}></button>
    </>
  );
}

aria-pressed для кнопок-переключателей

Для кнопок, которые работают как тоггл (вкл/выкл), важно использовать aria-pressed. Этот атрибут принимает значения true, false или mixed, информируя экранные считыватели о состоянии кнопки.

import { useToggleButton } from '@react-aria/button';
import { useState, useRef } from 'react';

function ToggleButton() {
  const [isPressed, setPressed] = useState(false);
  const ref = useRef();
  const { buttonProps } = useToggleButton(
    { isSelected: isPressed, onChange: setPressed },
    ref
  );

  return <button {...buttonProps} ref={ref}>Включить/Выключить</button>;
}

В React Aria useToggleButton автоматически управляет ARIA-атрибутами, включая aria-pressed и обработку клавиатуры.

aria-disabled и управление доступностью

Если кнопка должна быть недоступна, нужно использовать aria-disabled, чтобы экранные считыватели корректно сообщали о состоянии. В React Aria атрибут устанавливается через isDisabled:

function DisabledButton() {
  const ref = useRef();
  const { buttonProps } = useButton({ isDisabled: true }, ref);

  return <button {...buttonProps} ref={ref}>Недоступно</button>;
}

Важно отличать disabled от aria-disabled:

  • disabled блокирует клики и фокус
  • aria-disabled информирует о недоступности, сохраняя возможность кастомного поведения

Роль кнопки и клавиатурная доступность

По умолчанию React Aria назначает кнопке role="button", если элемент не является нативным <button>. Это особенно важно для кастомных компонентов, например <div> или <span> с поведением кнопки.

Пример кастомной кнопки:

function CustomButton() {
  const ref = useRef();
  const { buttonProps } = useButton({}, ref);

  return <div {...buttonProps} ref={ref} tabIndex={0}>Кликни меня</div>;
}

React Aria автоматически добавляет:

  • обработку Enter и Space для активации
  • управление фокусом (tabIndex)
  • ARIA-атрибут role="button"

Состояние загрузки и aria-busy

Для кнопок, выполняющих асинхронные действия, полезно информировать пользователя о состоянии через aria-busy:

function LoadingButton({ isLoading }) {
  const ref = useRef();
  const { buttonProps } = useButton({ isDisabled: isLoading }, ref);

  return (
    <button {...buttonProps} ref={ref} aria-busy={isLoading}>
      {isLoading ? 'Загрузка...' : 'Отправить'}
    </button>
  );
}

aria-busy="true" сообщает вспомогательным технологиям, что кнопка в процессе действия, предотвращая преждевременное взаимодействие.

Комбинация атрибутов для сложных кнопок

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

function ComplexButton({ isLoading, isSelected }) {
  const ref = useRef();
  const { buttonProps } = useToggleButton(
    { isSelected, isDisabled: isLoading },
    ref
  );

  return (
    <button {...buttonProps} ref={ref} aria-busy={isLoading}>
      {isLoading ? 'Загрузка...' : isSelected ? 'Вкл' : 'Выкл'}
    </button>
  );
}

React Aria управляет:

  • aria-pressed
  • aria-disabled
  • role и обработкой клавиатуры

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

Эти принципы позволяют создавать кнопки в React Aria, которые соответствуют стандартам WCAG и обеспечивают инклюзивность интерфейса. Ключевым моментом является корректное сочетание ARIA-атрибутов с нативными HTML-свойствами и правильное использование хуков React Aria (useButton, useToggleButton) для автоматизации всех деталей доступности.

Оглавление