2024年9月14日

アクセシビリティ

E2EテストでWCAGのレベルAAを満たす

Jane Doe

237 views

アクセシビリティテストの自動化

WCAG は W3C勧告によるガイドラインで、日本では JIS X 8341-3:2016 として制定されています。
Webサイトの構成やマークアップによって考慮すべき内容は様々なので、フロントエンドのE2Eテストツール Playwright と axe-core を利用し、アクセシビリティのテストを自動化させる事でWebサイトの品質を保つ事が出来ます。

import { test, expect } from '@playwright/test'
import { AxeBuilder } from '@axe-core/playwright'

test('Accessibility Test', async ({ page }) => {
  await page.goto('/')
  const result = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze()

  expect(result.violations).toEqual([])
})

これにより一般的なアクセシビリティの問題を検出来ますが、カバレッジを高めるためには包括的なユーザーテストを組み合わせることで、より品質の高いアクセシビリティを提供することができます。

All Posts