Automating Web Accessibility Testing with AI Agents

Transcript

1. AIエージェントによるWebアクセ シビリティ試験の自動化 〜Gaudiyが実践するAI活用開発〜 フロントエンドカンファレンス北海道2025 | 株式会社Gaudiy kotori
2. 自己紹介 • kotori ( @maminami_minami) • 株式会社Gaudiy Enabling Team • 札幌出身！ • 趣味: 酒・アニメ・声優・お絵描き
3. について
4. גࣜձࣾ
   (BVEJZ@ձࣾઆ໌ࢿྉ
   
   $PNQBOZ
   %FDL
   
   4QFBLFS
   %FDL
   IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
5. גࣜձࣾ
   (BVEJZ@ձࣾઆ໌ࢿྉ
   
   $PNQBOZ
   %FDL
   
   4QFBLFS
   %FDL
   IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
6. גࣜձࣾ
   (BVEJZ@ձࣾઆ໌ࢿྉ
   
   $PNQBOZ
   %FDL
   
   4QFBLFS
   %FDL
   IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
7. גࣜձࣾ
   (BVEJZ@ձࣾઆ໌ࢿྉ
   
   $PNQBOZ
   %FDL
   
   4QFBLFS
   %FDL
   IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
8. גࣜձࣾ
   (BVEJZ@ձࣾઆ໌ࢿྉ
   
   $PNQBOZ
   %FDL
   
   4QFBLFS
   %FDL
   IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
9. גࣜձࣾ
   (BVEJZ@ձࣾઆ໌ࢿྉ
   
   $PNQBOZ
   %FDL
   
   4QFBLFS
   %FDL
   IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
10. גࣜձࣾ
    (BVEJZ@ձࣾઆ໌ࢿྉ
    
    $PNQBOZ
    %FDL
    
    4QFBLFS
    %FDL
    IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL
11. גࣜձࣾ
    (BVEJZ@ձࣾઆ໌ࢿྉ
    
    $PNQBOZ
    %FDL
    
    4QFBLFS
    %FDL
    IUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL Design System
12. 全社的なAI活用の推進 • 週次の全社MTGで職種を横断した活用事例の共有 • 40,000円/月 まで経費で任意のAIツールを利用可能 (2025年9月時 点) • Claude Teamプラン Premiumシート • 先日TeamプランでもClaude Codeが利用可能に🔥 • プロダクト開発に携わるエンジニアのほとんどが利用
13. 話すこと
14. 話すこと🙆 • AIエージェントを活用したa11y試験の自動化手法 • Custom MCPサーバー開発 話さないこと🙅 • アクセシビリティの基礎知識や詳細な実装方法 • 個別のWCAGガイドライン解説
15. 経緯: a11y対応が早急に必要に⚠ ※一部のコミュニティ・機能
16. 早く・正確に・楽したい！🤫
17. アプローチ • AI以外の主要なツール • eslint-plugin-jsx-a11y • Storybook Test runner + axe-playwright • @storybook/addon-a11y • axe DevTools • 自動化 with AI エージェント • a11y試験 • レポート作成
18. AI以外のアプローチ
19. eslint-plugin-jsx-a11y • JSXのa11y問題を静的に特定 • polymorphicPropName settings • <Typography as=‘h1’> -> <h1> • components settings • <Image> -> <img>
20. eslint-plugin-jsx-a11y • label-has-associated-control rule • controlComponents option • コントロールコンポーネントとして認識 • label を必須に
21. Storybook Test runner + axe-playwright • Storybook Test runner • .stories.tsx ファイルをテストファイルとみなす • Story のレンダリングと Play function を実行しチェック • axe-playwright • Playwright + axe-core を組み合わせたa11yテストライブラリ • WebアプリのWCAGコンプライアンスをチェック
22. Storybook Test runner + axe-playwright
23. Storybook Coverage • .stories.tsx ファイルを起点とした、Component の coverage を収集・CIでチェック • 新規に Component を追加した際は必ず Storybook 上で確認で きることを担保 • 必ずしも Component と Story が1対1で存在する必要はなく、先 祖の Component の Story から確認可能であればパス
24. Storybook Coverage • .stories.tsx ファイルを起点とした、Component の coverage を収集・CIでチェック • 新規に Component を追加した際は必ず Storybook 上で確認で きることを担保 • 必ずしも Component と Story が1対1で存在する必要はなく、先 祖の Component の Story から確認可能であればパス a11yチェックで広範囲をカバー 詳細: https://zenn.dev/gaudiy_blog/articles/97e924e39d02ae#storybook-coverage
25. axe DevTools • Chrome拡張機能版のアクセシビリティ検証ツール • 手動でのa11yチェックを効率化 • DOM変更後の状態でスキャン可能 • インタラクティブな要素の状態確認
26. axe DevTools
27. AIを利用したアプローチ
28. 最初の試み：Claude Desktop • Playwright MCP • 単体でa11yチェックする機能はない • axe-core等のスクリプトをPlaywright経由で注入する必要… • a11yチェック MCP • WCAGベースでチェックできるものは野良のツールのみ • 一応はチェック可能だが複数の課題あり (後述
29. Claude Desktop + a11yチェック MCP
30. Claude Desktop + a11yチェック MCP いい感じに見えるが…
31. Claude Desktop + 野良MCPの課題😇 • コンテキスト制限: 上限に達すると会話の継続不可 • インタラクション未対応・特定のDOMの状態でのテスト不可 • ログイン未対応 • ビューポート指定不可・PCのみ
32. 課題全てをクリアしたい！
33. Claude Code Custom MCP Server
34. 構成 • Claude Code: a11yテストの実行と結果の分析 • Custom MCP🛠 • Playwright: マルチブラウザ対応, PC/モバイル ビューポート • axe-core: WCAG基準自動検証 • カスタム評価モジュール • Playwright MCP: a11y問題点の分析
35. Features • a11yチェック対象管理ファイル • 最適化されたパフォーマンス • 統一されたレポートフォーマット • 動的UI・認証対応 • 評価モジュール実装
36. a11yチェック対象管理ファイル AIにJSONで管理させ、プロンプトではページ名だけ伝える
37. 最適化されたパフォーマンス • コンテキスト節約 • axe-coreの生データを返すと肥大化 • 冗長なHTML・セレクタ等を削除 • 並列化 • デスクトップ/モバイル 並列実行
38. 統一されたレポートフォーマット
39. 評価モジュール実装 • 各WCAG項目に特化した評価ロジックを実装 • axe-core だけでの評価には課題 • 誤検出 (False Positive) の多さ • e.g. 「色だけで情報を伝えてはいけない」-> axe-coreは色の使用自体を違反 と判定しがち • 文脈を考慮しない • N/A判定 • 実際のユーザー操作をシミュレートした上で判定 • e.g. キーボード操作などによるフォーカストラップのテスト
40. 評価モジュール実装 - 例 • 2.2.1 タイミング調整可能 • 課題: 時間制限機能の存在自体を検出できない • 解決: セッションタイムアウト、カウントダウン、自動リダイレクトを動的に検出 • 効果: 時間制限がないページを自動的にN/A判定 • 3.3.3 エラー修正の提案 • 課題: エラーメッセージの質を判定できない • 解決: わざと誤入力→エラー内容を分析→修正提案の有無を判定 • 効果: 「メールアドレスが不正です」vs「@を含む形式で入力」を区別 • 4.1.3 ステータスメッセージ • 課題: 動的な状態変化の通知を検証できない • 解決: ライブリージョンを監視→アクション実行→通知発生を確認 • 効果: 「カートに追加しました」等の通知を自動検証
41. 評価モジュール実装サイクル a11yテスト実施 AIに誤検知の原因を解析させる エラー誤検知 AIに実装を改善させる 精度向上
42. axe-coreのみでは検知できない問題を 高精度で特定👏
43. 小ネタ TodoWriteでpromptを強制再確認させる
44. まとめ
45. まとめ • 一般最適化されたa11yチェックツールではWCAGの項目全てを正 しく確認するのは難しい • 日本語やテスト対象のアプリケーションのコンテキストに寄り添った チェックロジックをAIに実装させる • 全てをAIに委ねることは難しいので人の目による確認も怠らない • 最後は気合い💪
46. 宣伝
47. 余熱NIGHT from FEC北海道＆東京2025 • 日時: 2025年9月30日（火） 19:00〜 • 会場: Datadog Japan Tokyo オフィス • 参加費: 無料 • LT登壇者を募集中!! • 感想・現地レポ • 深掘り or 横展開 #FEC余熱NIGHT
48. 余熱NIGHT from FEC北海道＆東京2025 スポンサーLT by Han 小規模＆短期間でユーザーに OMO体験 を届けるためのAI駆動開発 #FEC余熱NIGHT
49. We are hiring!🔥