AIでWCAG準拠を実現する

🔄 前回のおさらい: レッスン2では、視覚・聴覚・運動・認知の各障害に対応するAI支援技術の全体像を学びました。今回は、AIを使ってデジタルプロダクトがそれらの支援技術と連携するようにする——WCAG準拠の監査と改善計画の策定を学びます。

ルールから改善へ

WCAG（Web Content Accessibility Guidelines）は圧倒的に感じるかもしれません。WCAG 2.1 レベルAAだけで、13のガイドラインにまたがる50の適合基準があります。サイト全体を手動でチェックするには数週間かかります。AI搭載の監査ツールなら数分でスキャンできます——ただし、検出されたもの（と見逃されたもの）を理解するのが本当のスキルです。

WCAG監査ワークフロー

ステップ1：自動スキャン

自動スキャンが検出するもの（WCAG問題の約30%）：

• 画像のalt属性の欠落
• 色コントラストが4.5:1未満（テキスト）または3:1（大きなテキスト）
• フォームラベルの欠落と関連付けの不備
• 空の見出しまたは壊れた見出し階層
• ページ言語属性の欠落
• 重複する要素ID
• 壊れたARIA参照

ステップ2：AI支援の問題分析

問題リストが出たら、AIで意味を理解します：各問題について、(1)平易な言葉での説明、(2)影響を受ける人と深刻度、(3)優先度評価、(4)具体的なコード修正、(5)修正時間の見積もり——をAIに生成させます。

ステップ3：手動テスト（残り70%）

自動スキャンで検出されないもの：

• キーボードナビゲーション： すべての機能がキーボードだけで到達・操作可能か？
• スクリーンリーダーテスト： 聴覚的な体験が意味をなすか？
• 認知レビュー： コンテンツが明確で構造化され予測可能か？
• モーション： アニメーションがprefers-reduced-motionを尊重するか？

✅ 確認クイズ: なぜアクセシビリティ監査に自動スキャンと手動テストの両方が必要ですか？（自動ツールは構造的問題——欠落する属性、コントラスト比、見出し階層——の約30%を検出。しかし代替テキストが意味あるか、タブ順序が論理的か、スクリーンリーダー体験が一貫しているかは評価できない。最も影響の大きいユーザビリティ問題は人間の判断を必要とする70%に含まれる。）

一般的なWCAG問題とAIによる修正

代替テキストのない画像

画像を4つのカテゴリーに分類して対応します：

1. 情報提供画像（写真、チャート）→ 意味を説明する代替テキスト
2. 装飾画像（背景、区切り線）→ 空のalt（alt=""）
3. 機能画像（リンク内のアイコン）→ 機能を説明する代替テキスト
4. 複雑な画像（データ可視化）→ 短い代替テキスト＋近くの詳細説明

色コントラストの不足

通常テキスト：4.5:1以上、大きなテキスト：3:1以上、UIコンポーネント：3:1以上。AIに現在のカラーペアを渡し、ブランドカラーに近い修正色を提案させます。

ARIAパターン

ドロップダウンメニュー、タブパネル、モーダルダイアログ、アコーディオン——各インタラクティブコンポーネントに正しいARIA属性とキーボード操作パターンが必要です。

重要： 不正確なARIAはARIAなしより悪い。スクリーンリーダーに誤った情報を伝えるため、ユーザーの混乱を招きます。

日本のWCAG対応の状況

日本のJIS X 8341-3:2016はWCAG 2.0をベースにしていますが、WCAG 2.1/2.2で追加された基準（モバイルアクセシビリティなど）もカバーすることが推奨されています。

よくある日本語サイトの問題：

• ルビ（振り仮名）が適切にマークアップされていない
• 日本語フォントのコントラスト（明朝体の細い線は認識しにくい場合がある）
• 縦書きレイアウトでのスクリーンリーダー対応
• PDFの日本語タグ付けの不備

CI/CDへの統合

最も効果的なアクセシビリティ戦略は、問題がプロダクションに到達する前に検出します。

PR チェック（毎PR）：

• axe-coreによるコンポーネントスキャン
• 見出し階層の検証
• 画像alt属性の存在チェック
• フォームラベル関連付けのチェック

ステージングデプロイ（自動＋手動）：

• axeによるフルサイトスキャン
• キーボードナビゲーションのスモークテスト
• 新ページを手動レビューにフラグ

四半期監査：

• 手動スクリーンリーダーテスト
• 支援技術ユーザーとのユーザーテスト
• WCAGコンプライアンスレポート生成

✅ 確認クイズ: アクセシビリティオーバーレイ（フォントコントロールやコントラスト切り替えのウィジェット）が障害者コミュニティで物議を醸している理由は？（根本的なコードを修正しない、支援技術と干渉する可能性がある、裁判所がコンプライアンスの証拠として認めていない、チームに誤った安心感を与え本当の修正への投資をやめさせる。）

まとめ

• AI搭載のアクセシビリティ監査は構造的問題を数分で検出するが、WCAG基準の約30%のみをカバー
• 改善の優先順位はユーザー影響度で決める：フォームラベル欠落やキーボードトラップはユーザーを完全にブロックし、軽微なコントラスト違反は不便だが使用可能
• アクセシビリティオーバーレイを避ける——根本的なコードを修正せず、支援技術と干渉し、法的要件を満たさない
• CI/CDパイプラインに自動テストを統合し、四半期ごとの手動監査で自動化が見逃す70%をカバー
• ARIAは強力だが正しく実装する必要がある——不正確なARIAはARIAなしより悪い

次のレッスン

次は「アクセシブルなコンテンツ制作」——AIを使った代替テキスト、キャプション、トランスクリプト、構造化ドキュメントの大規模な作成方法を学びます。