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

↑ 6.3 Качество кода и тестирование: продвинутый уровень · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: middle

Зачем это на собесе

Доступность — требование закона и качества. Спрашивают, что можно проверить автоматически и что нельзя.

Что такое axe

axe-core — движок проверки доступности. Находит нарушения WCAG в DOM: отсутствие alt, низкий контраст, поля без label, неверные ARIA-атрибуты.

Использование

// Playwright
import AxeBuilder from '@axe-core/playwright'
 
test('страница входа доступна', async ({ page }) => {
  await page.goto('/login')
  const results = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze()
  expect(results.violations).toEqual([])
})

// Vitest + компонент
import { axe } from 'vitest-axe'
const { container } = render(Form)
expect(await axe(container)).toHaveNoViolations()

Также: eslint-plugin-vuejs-accessibility, расширение axe DevTools, Lighthouse.

Ограничения

Автоматика находит примерно 30–40% проблем. Не ловит:

• осмысленность alt и текста ссылок;
• логичный порядок фокуса и работу с клавиатуры;
• корректность озвучки в скринридере.

Нужны ручные проверки: клавиатура (Tab, Enter, Esc), NVDA/VoiceOver, увеличение до 200%.

Практика

• проверять состояния: модалки, ошибки, раскрытые меню;
• падать в CI на серьёзных нарушениях, остальные — в отчёт;
• использовать семантические теги вместо div с ролями.

Вопросы с ответами

Можно ли полностью проверить доступность автотестами?

Нет. axe ловит формальные нарушения, но не логику фокуса и осмысленность контента. Нужны ручные проверки клавиатурой и скринридером.