ARIA-атрибуты в компонентах

ARIA (Accessible Rich Internet Applications) — это спецификация, которая обеспечивает доступность веб-приложений для пользователей с ограниченными возможностями. В контексте Ant Design ARIA-атрибуты играют ключевую роль в создании интерактивных компонентов, таких как модальные окна, меню, вкладки и формы, которые корректно интерпретируются экранными читалками и другими вспомогательными технологиями.

Основные принципы работы с ARIA

  1. Роль компонента (role) Каждому элементу присваивается роль, которая описывает его функциональное назначение. Например:

    • role="button" для кнопок, которые могут запускать действия.
    • role="dialog" для модальных окон.
    • role="tablist" и role="tab" для вкладок.

    Ant Design автоматически устанавливает базовые роли для большинства компонентов, но их можно переопределять при необходимости через проп role.

  2. Состояния и свойства (aria-*) ARIA-атрибуты позволяют отслеживать состояние компонента и передавать его вспомогательным технологиям:

    • aria-disabled="true" — элемент недоступен для взаимодействия.
    • aria-expanded="true|false" — состояние раскрытия, например, для аккордеонов и селектов.
    • aria-selected="true|false" — используется для обозначения выбранных элементов вкладок или списков.

    В Ant Design такие состояния синхронизированы с внутренними пропсами компонентов: например, Menu.Item поддерживает disabled и автоматически выставляет aria-disabled.

  3. Связывание элементов (aria-labelledby и aria-describedby) Эти атрибуты используются для связывания элементов с их описаниями или заголовками:

    • aria-labelledby указывает на ID элемента, который служит заголовком.
    • aria-describedby связывает компонент с элементом, содержащим подробное описание.

    Пример в Ant Design:

    <Modal
  title="Подтверждение действия"
  visible={isModalVisible}
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <p id="modal-description">Вы уверены, что хотите удалить этот элемент?</p>
</Modal>

Применение ARIA в интерактивных компонентах

1. Меню и навигация

Компоненты Menu и Dropdown используют ARIA для обозначения вложенности и состояния пунктов:

  • role="menu" для контейнера меню.
  • role="menuitem" для каждого пункта.
  • aria-haspopup="true" указывает, что элемент открывает подменю.
  • aria-expanded отражает текущее состояние раскрытия.

Пример:

<Menu>
  <Menu.SubMenu title="Файл" aria-haspopup="true">
    <Menu.Item key="1">Новый</Menu.Item>
    <Menu.Item key="2">Открыть</Menu.Item>
  </Menu.SubMenu>
</Menu>

2. Вкладки

Компонент Tabs в Ant Design полностью совместим с ARIA. Каждый элемент имеет:

  • Контейнер: role="tablist"
  • Вкладка: role="tab", aria-selected="true|false", aria-controls="panel-id"
  • Панель: role="tabpanel", id="panel-id"

Пример:

<Tabs defaultActiveKey="1">
  <Tabs.TabPane tab="Профиль" key="1" id="tab-1">
    Содержимое вкладки Профиль
  </Tabs.TabPane>
  <Tabs.TabPane tab="Настройки" key="2" id="tab-2">
    Содержимое вкладки Настройки
  </Tabs.TabPane>
</Tabs>

ARIA и формы

Формы — один из ключевых аспектов доступности. Ant Design предоставляет компоненты с готовыми ARIA-атрибутами:

  • Form.Item автоматически связывает label с полем ввода через htmlFor и aria-labelledby.
  • Компоненты Input, Select, Checkbox и Radio используют атрибуты aria-required, aria-invalid и aria-describedby для передачи состояния в экранные читалки.

Пример:

<Form>
  <Form.Item
    label="Email"
    name="email"
    rules={[{ required: true, message: 'Введите email' }]}
    aria-required="true"
  >
    <Input placeholder="example@mail.com" />
  </Form.Item>
</Form>

Динамические обновления ARIA

Компоненты Ant Design часто обновляют свое состояние динамически. ARIA-атрибуты синхронизируются с пропсами:

  • Collapse автоматически меняет aria-expanded при открытии панели.
  • Tree управляет aria-selected и aria-expanded для каждой ветви.
  • Slider и Switch обновляют aria-valuenow и aria-checked соответственно.

Это обеспечивает правильное оповещение вспомогательных технологий о текущем состоянии интерфейса.

Настройка ARIA вручную

Хотя Ant Design покрывает большинство случаев по умолчанию, есть возможность ручного управления:

<Button
  role="switch"
  aria-checked={isChecked}
  onCl ick={() => setChecked(!isChecked)}
>
  Переключить
</Button>

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

Практические рекомендации

  • Сохранять семантику: не использовать div вместо кнопки без необходимости; при этом роль должна точно соответствовать функционалу.
  • Синхронизация состояния: атрибуты aria-* должны отражать реальное состояние компонента.
  • Связь с описаниями: всегда связывать поля формы, диалоги и интерактивные элементы с поясняющими текстами через aria-labelledby или aria-describedby.
  • Тестирование с экранными читалками: даже корректные атрибуты необходимо проверять в реальном сценарии использования.

ARIA в Ant Design — это не просто набор атрибутов, а целостная система, которая делает интерфейсы доступными и предсказуемыми для всех пользователей.

Оглавление