Automating Web Accessibility Testing with AI Agents

by South

Slide 1

Slide 1 text

AIエージェントによるWebアクセシビリティ試験の自動化〜Gaudiyが実践するAI活用開発〜フロントエンドカンファレンス北海道2025 | 株式会社Gaudiy kotori

Slide 2

Slide 2 text

自己紹介 • kotori ( @maminami_minami) • 株式会社Gaudiy Enabling Team • 札幌出身！ • 趣味: 酒・アニメ・声優・お絵描き

Slide 3

Slide 3 text

について

Slide 4

Slide 4 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 5

Slide 5 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 6

Slide 6 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 7

Slide 7 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 8

Slide 8 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 9

Slide 9 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 10

Slide 10 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL

Slide 11

Slide 11 text

גࣜձࣾ(BVEJZ@ձࣾઆ໌ࢿྉ$PNQBOZ%FDL4QFBLFS%FDLIUUQTTQFBLFSEFDLDPNHBVEJZDPNQBOZEFDL Design System

Slide 12

Slide 12 text

全社的なAI活用の推進 • 週次の全社MTGで職種を横断した活用事例の共有 • 40,000円/月まで経費で任意のAIツールを利用可能 (2025年9月時点) • Claude Teamプラン Premiumシート • 先日TeamプランでもClaude Codeが利用可能に🔥 • プロダクト開発に携わるエンジニアのほとんどが利用

Slide 13

Slide 13 text

話すこと

Slide 14

Slide 14 text

話すこと🙆 • AIエージェントを活用したa11y試験の自動化手法 • Custom MCPサーバー開発話さないこと🙅 • アクセシビリティの基礎知識や詳細な実装方法 • 個別のWCAGガイドライン解説

Slide 15

Slide 15 text

経緯: a11y対応が早急に必要に⚠ ※一部のコミュニティ・機能

Slide 16

Slide 16 text

早く・正確に・楽したい！🤫

Slide 17

Slide 17 text

アプローチ • AI以外の主要なツール • eslint-plugin-jsx-a11y • Storybook Test runner + axe-playwright • @storybook/addon-a11y • axe DevTools • 自動化 with AI エージェント • a11y試験 • レポート作成

Slide 18

Slide 18 text

AI以外のアプローチ

Slide 19

Slide 19 text

eslint-plugin-jsx-a11y • JSXのa11y問題を静的に特定 • polymorphicPropName settings • ->

• components settings • ->

Slide 20

Slide 20 text

eslint-plugin-jsx-a11y • label-has-associated-control rule • controlComponents option • コントロールコンポーネントとして認識 • label を必須に

Slide 21

Slide 21 text

Storybook Test runner + axe-playwright • Storybook Test runner • .stories.tsx ファイルをテストファイルとみなす • Story のレンダリングと Play function を実行しチェック • axe-playwright • Playwright + axe-core を組み合わせたa11yテストライブラリ • WebアプリのWCAGコンプライアンスをチェック

Slide 22

Slide 22 text

Storybook Test runner + axe-playwright

Slide 23

Slide 23 text

Storybook Coverage • .stories.tsx ファイルを起点とした、Component の coverage を収集・CIでチェック • 新規に Component を追加した際は必ず Storybook 上で確認できることを担保 • 必ずしも Component と Story が1対1で存在する必要はなく、先祖の Component の Story から確認可能であればパス

Slide 24

Slide 24 text

Slide 25

Slide 25 text

axe DevTools • Chrome拡張機能版のアクセシビリティ検証ツール • 手動でのa11yチェックを効率化 • DOM変更後の状態でスキャン可能 • インタラクティブな要素の状態確認

Slide 26

Slide 26 text

axe DevTools

Slide 27

Slide 27 text

AIを利用したアプローチ

Slide 28

Slide 28 text

最初の試み：Claude Desktop • Playwright MCP • 単体でa11yチェックする機能はない • axe-core等のスクリプトをPlaywright経由で注入する必要… • a11yチェック MCP • WCAGベースでチェックできるものは野良のツールのみ • 一応はチェック可能だが複数の課題あり (後述

Slide 29

Slide 29 text

Claude Desktop + a11yチェック MCP

Slide 30

Slide 30 text

Claude Desktop + a11yチェック MCP いい感じに見えるが…

Slide 31

Slide 31 text

Claude Desktop + 野良MCPの課題😇 • コンテキスト制限: 上限に達すると会話の継続不可 • インタラクション未対応・特定のDOMの状態でのテスト不可 • ログイン未対応 • ビューポート指定不可・PCのみ

Slide 32

Slide 32 text

課題全てをクリアしたい！

Slide 33

Slide 33 text

Claude Code Custom MCP Server

Slide 34

Slide 34 text

構成 • Claude Code: a11yテストの実行と結果の分析 • Custom MCP🛠 • Playwright: マルチブラウザ対応, PC/モバイルビューポート • axe-core: WCAG基準自動検証 • カスタム評価モジュール • Playwright MCP: a11y問題点の分析

Slide 35

Slide 35 text

Features • a11yチェック対象管理ファイル • 最適化されたパフォーマンス • 統一されたレポートフォーマット • 動的UI・認証対応 • 評価モジュール実装

Slide 36

Slide 36 text

a11yチェック対象管理ファイル AIにJSONで管理させ、プロンプトではページ名だけ伝える

Slide 37

Slide 37 text

最適化されたパフォーマンス • コンテキスト節約 • axe-coreの生データを返すと肥大化 • 冗長なHTML・セレクタ等を削除 • 並列化 • デスクトップ/モバイル並列実行

Slide 38

Slide 38 text

統一されたレポートフォーマット

Slide 39

Slide 39 text

評価モジュール実装 • 各WCAG項目に特化した評価ロジックを実装 • axe-core だけでの評価には課題 • 誤検出 (False Positive) の多さ • e.g. 「色だけで情報を伝えてはいけない」-> axe-coreは色の使用自体を違反と判定しがち • 文脈を考慮しない • N/A判定 • 実際のユーザー操作をシミュレートした上で判定 • e.g. キーボード操作などによるフォーカストラップのテスト

Slide 40

Slide 40 text

評価モジュール実装 - 例 • 2.2.1 タイミング調整可能 • 課題: 時間制限機能の存在自体を検出できない • 解決: セッションタイムアウト、カウントダウン、自動リダイレクトを動的に検出 • 効果: 時間制限がないページを自動的にN/A判定 • 3.3.3 エラー修正の提案 • 課題: エラーメッセージの質を判定できない • 解決: わざと誤入力→エラー内容を分析→修正提案の有無を判定 • 効果: 「メールアドレスが不正です」vs「@を含む形式で入力」を区別 • 4.1.3 ステータスメッセージ • 課題: 動的な状態変化の通知を検証できない • 解決: ライブリージョンを監視→アクション実行→通知発生を確認 • 効果: 「カートに追加しました」等の通知を自動検証

Slide 41

Slide 41 text

評価モジュール実装サイクル a11yテスト実施 AIに誤検知の原因を解析させるエラー誤検知 AIに実装を改善させる精度向上

Slide 42

Slide 42 text

axe-coreのみでは検知できない問題を高精度で特定👏

Slide 43

Slide 43 text

小ネタ TodoWriteでpromptを強制再確認させる

Slide 44

Slide 44 text

まとめ

Slide 45

Slide 45 text

まとめ • 一般最適化されたa11yチェックツールではWCAGの項目全てを正しく確認するのは難しい • 日本語やテスト対象のアプリケーションのコンテキストに寄り添ったチェックロジックをAIに実装させる • 全てをAIに委ねることは難しいので人の目による確認も怠らない • 最後は気合い💪

Slide 46

Slide 46 text

宣伝

Slide 47

Slide 47 text

余熱NIGHT from FEC北海道＆東京2025 • 日時: 2025年9月30日（火） 19:00〜 • 会場: Datadog Japan Tokyo オフィス • 参加費: 無料 • LT登壇者を募集中!! • 感想・現地レポ • 深掘り or 横展開 #FEC余熱NIGHT

Slide 48

Slide 48 text

余熱NIGHT from FEC北海道＆東京2025 スポンサーLT by Han 小規模＆短期間でユーザーに OMO体験を届けるためのAI駆動開発 #FEC余熱NIGHT

Slide 49

Slide 49 text

We are hiring!🔥