jsx-a11y и защитные правила на уровне компонентов

Многие ошибки доступности легко заметить в коде. Линтер может обнаружить их во время ввода — задолго до того, как реальный пользователь столкнётся с препятствием. 🛡️

Пакет eslint-plugin-jsx-a11y добавляет правила доступности для JSX в ESLint. Он проверяет компоненты на распространённые известные ошибки доступности.

Расширьте конфигурацию recommended этого плагина, чтобы сразу включить надёжный базовый набор правил, вместо того чтобы включать каждое правило вручную.

Плагин предупреждает, если у img нет атрибута alt. Это единственное правило предотвращает очень распространённую и серьёзную ошибку доступности.

Добавление onClick к div без поддержки клавиатуры вызывает предупреждение. Исправление — использовать настоящий button, доступный для фокуса и готовый к работе с клавиатурой.

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

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

Линтер видит только статичный код. Он не может определить, содержателен ли Ваш alt-текст и логичен ли порядок фокуса, поэтому ручное тестирование по-прежнему важно.

Встраивайте доступность в общие компоненты. Повторно используемая кнопка, которая всегда отображает настоящий элемент button, обеспечивает правильное поведение во всём приложении.

Запускайте ESLint в своём конвейере, чтобы предупреждения о доступности приводили к ошибке сборки. Это не позволяет регрессиям пройти проверку кода и попасть в рабочую среду.

С расширением ESLint для редактора предупреждения появляются прямо в коде. Такая быстрая обратная связь помогает команде осваивать шаблоны доступности во время написания кода.

Используйте jsx-a11y, чтобы находить распространённые ошибки, создавать доступные общие компоненты и добавлять проверки в CI, продолжая полагаться на ручное тестирование в остальных случаях. ✅