Поддержка скринридеров

Ant Design (AntD) активно использует стандарты доступности (Accessibility, a11y) для обеспечения работы интерфейсов с различными вспомогательными технологиями, включая скринридеры. Библиотека реализует множество встроенных компонентов с корректной семантикой HTML и ARIA-атрибутами, что позволяет пользователям с нарушениями зрения взаимодействовать с приложением без потери функционала.

Семантика компонентов

Компоненты AntD используют правильные HTML-элементы для передачи контекста:

  • Кнопки (Button) — <button> с атрибутом type и корректным aria-label, если текст кнопки отсутствует.
  • Формы (Form, Input, Select) — используют <label> и aria-required для обязательных полей, что позволяет скринридерам корректно озвучивать поля формы.
  • Модальные окна (Modal) — автоматически получают role="dialog" и aria-modal="true", что делает их видимыми для вспомогательных технологий.
  • Меню (Menu, Dropdown) — используют роли menu и menuitem с поддержкой aria-expanded для раскрывающихся элементов.

ARIA-атрибуты в Ant Design

AntD активно применяет ARIA-атрибуты для передачи состояния и контекста:

  • aria-label и aria-labelledby — для явного описания элементов, особенно когда текст отсутствует.
  • aria-hidden — скрывает элементы, которые не должны быть озвучены скринридером.
  • aria-live — информирует о динамических изменениях контента, например, уведомлениях (Notification) и обновлениях списка (List, Table).
  • aria-checked, aria-selected, aria-disabled — обеспечивают правильную озвучку состояния переключателей, чекбоксов и элементов меню.

Пример корректного использования ARIA с компонентом Switch:

import { Switch } from 'antd';

<Switch
  checkedChildren="Вкл"
  unCheckedChildren="Выкл"
  aria-checked={true}
/>

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

Для работы скринридеров критична корректная клавиатурная навигация. Ant Design обеспечивает:

  • Логический порядок табуляции (TabIndex) — пользователи могут перемещаться между интерактивными элементами без пропусков.
  • Фокус на активные элементы — модальные окна, всплывающие подсказки (Tooltip), уведомления (Notification) автоматически получают фокус при открытии.
  • Поддержка Enter и Space — для активации интерактивных компонентов, таких как кнопки, чекбоксы и переключатели.

Пример управления фокусом в модальном окне:

import { Modal, Button } from 'antd';
import { useState, useRef, useEffect } from 'react';

const DemoModal = () => {
  const [visible, setVisible] = useState(false);
  const okButtonRef = useRef(null);

  useEffect(() => {
    if (visible && okButtonRef.current) {
      okButtonRef.current.focus();
    }
  }, [visible]);

  return (
    <>
      <Button onCl ick={() => setVisible(true)}>Открыть модальное окно</Button>
      <Modal
        visible={visible}
        onOk={() => setVisible(false)}
        onCan cel={() => setVisible(false)}
      >
        <p>Содержимое модального окна</p>
        <Button ref={okButtonRef}>Подтвердить</Button>
      </Modal>
    </>
  );
};

Динамический контент и уведомления

Компоненты, которые обновляются динамически, должны корректно уведомлять скринридеры:

  • Notification и Message используют aria-live="polite" для мягкой озвучки изменений.
  • Table с сортировкой и фильтрацией сообщает скринридеру о текущем состоянии через aria-sort и aria-label.

Пример уведомления об изменении таблицы:

import { Table } from 'antd';

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
    sortDirections: ['ascend', 'descend'],
    // ARIA-атрибуты обеспечиваются автоматически
  },
];

Настройка пользовательских ARIA-атрибутов

Ant Design позволяет добавлять пользовательские ARIA-атрибуты к компонентам через пропсы aria-*:

<Button aria-label="Закрыть окно" onCl ick={handleClose}>
  X
</Button>

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

Тестирование доступности

Для проверки работы скринридеров рекомендуется:

  • Использовать axe-core или Lighthouse для автоматического анализа доступности.
  • Проверять приложение с помощью NVDA, JAWS (Windows) или VoiceOver (macOS/iOS).
  • Проверять последовательность табуляции и логичность фокусировки при динамических изменениях контента.

Лучшие практики

  • Всегда использовать текстовые метки или aria-label для кнопок и иконок.
  • Обеспечивать логический порядок фокуса, особенно при работе с модальными окнами и выпадающими списками.
  • Динамически обновляемый контент должен использовать aria-live и уведомлять пользователя о важных изменениях.
  • Проверять все кастомные компоненты на соответствие WCAG 2.1 стандартам.

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

Оглавление