Основы тестирования доступности
Пишите простые тесты, выявляющие распространённые проблемы доступности: предпочитайте запросы по роли и подписи, проверяйте имена и состояния и добавляйте автоматические проверки доступности.
«Основы тестирования доступности» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем проверять доступность
Цель: Выявлять проблемы a11y на раннем этапе.
- Отдавайте предпочтение запросам по роли и метке
- Проверяйте имена, состояния и фокус
- Добавьте автоматическую проверку с помощью axe
Запросы, отражающие реальное использование
- getByRole с именем для кнопок и ссылок
- getByLabelText для полей ввода
- findBy* для асинхронного интерфейса
- Используйте идентификаторы тестов только в крайнем случае
Демонстрация: доступная форма
Небольшая форма с метками, именем кнопки и ненавязчивой обратной связью; идеально подходит для запросов, ориентированных на пользователя.
<div id="root"></div>
Проверки: имя и состояние (фрагмент)
Пример проверок доступного имени и динамической обратной связи.
<div id="root"></div>
Автоматическая проверка с axe (фрагмент)
Добавьте автоматическую проверку с помощью axe (jest-axe). Пусть проверка завершается ошибкой при обнаружении нарушений.
<div id="root"></div>
Советы и подводные камни
- Проверяйте имена (текст меток и кнопок), а не CSS
- Проверяйте фокус при открытии диалоговых окон
- Используйте axe для выявления распространённых проблем, но дополнительно вручную проверяйте работу с клавиатурой
Автоматическая проверка доступности
Итоги
Итоги: Выполняйте запросы по роли и метке, проверяйте имена и состояния и добавляйте автоматическую проверку с помощью axe. Для уверенности дополнительно вручную проверяйте работу с клавиатурой.
Часто задаваемые вопросы
Урок «Основы тестирования доступности» бесплатный?
Да — полный текст урока «Основы тестирования доступности» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Основы тестирования доступности»?
Пишите простые тесты, выявляющие распространённые проблемы доступности: предпочитайте запросы по роли и подписи, проверяйте имена и состояния и добавляйте автоматические проверки доступности. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Основы тестирования доступности»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Семантика, подписи, роли и фокус
- Взаимодействие с клавиатурой и ссылки пропуска
- Основы тестирования доступности