自動チェックでわからないこと
Lighthouse、axe、スキャンツール、オーバーレイ、AIによるテストは、どれもコードを読み取ります。得意な判定もあります。しかし、人が実際にページを使えるかどうかは別の問いで、WCAGの多くはその問いを扱っています。
ツール自身が示す数字
- 57%
axe-coreが自動で検出できるとしている、WCAGの問題の平均的な割合です。判断できないものは「incomplete」として、人による確認に回します。
- 40%
英国政府（GOV.UK）の調査で、テストページに仕込んだ142件の障壁のうち、最も成績のよいツールが完全に検出できた割合です。最も低いツールは13%でした。
- 100
Lighthouseのスコアは、実行した自動チェックの加重平均です。手動で確認すべき項目は、スコアに含まれません。
チェックは合格。それでも利用者は先に進めない
以下は、コード上はルールを満たしていても、操作としては失敗している例です。実際にページを使った人にしかわかりません。
-
合格 チェック：すべての画像に代替テキストがある。
実際には：商品写真の代替テキストが「画像」。スクリーンリーダーの利用者には、どの色を買おうとしているのかわかりません。
WCAG 1.1.1
-
合格 チェック：すべての入力欄にラベルがある。
実際には：2つの欄のラベルがどちらも「名前」。一方はカードの名義、もう一方は保存用のニックネームを求めています。
WCAG 2.4.6
-
合格 チェック：すべての操作部品にTabキーで移動できる。
実際には：Tabキーで進むと、購入フォームより先にフッター全体を通過します。
WCAG 2.4.3
-
合格 チェック：ダイアログにdialogロールと名前がある。
実際には：ダイアログを開いたまま、Tabキーで背後のページへ移動してしまいます。
WCAG 2.4.3
-
合格 チェック：メニューで失敗したルールはない。
実際には：メニューはマウスのホバーとクリックでしか開きません。キーボードではまったく開けません。
WCAG 2.1.1
-
合格 チェック：エラーメッセージがページ内にある。
実際には：読み上げられないため、「支払う」を押したスクリーンリーダーの利用者には何も聞こえません。
WCAG 4.1.3
-
合格 チェック：ページにレスポンシブなビューポートが設定されている。
実際には：400%に拡大すると、料金表が縦横にスクロールし、購入ボタンが画面外に出ます。
WCAG 1.4.10
-
合格 チェック：動画に字幕トラックがある。
実際には：字幕は自動生成で、製品名がすべて間違っています。
WCAG 1.2.2
ブラウザを操作するAIエージェントなら？
エージェントはTabキーを押し、メニューを開き、アクセシビリティツリーを読み取れます。ルールによるチェックより優れた一次確認になります。それでも、人の代わりにはなりません。理由は3つです。
利用者本人ではない
自分の設定とペースで、毎日スクリーンリーダーや拡大機能、スイッチを使う経験を、エージェントは持っていません。そのページが、頼って使う人にとって理解しやすいか、負担が大きくないかは判断できません。
結果が再現しない
2回実行すると、指摘が変わることがあります。テスト結果は、誰かが確認し直しても同じにならなければなりません。
結果に責任を持つ人がいない
チームが対応したり、適合性レポートに載せたりする指摘には、決められた手順に従い、根拠を示せるテスト担当者が必要です。エージェントの出力は、その人が確認するための手がかりです。
それぞれのツールの役割
Lighthouse、axe、CIでのチェック
向いていること
ルールで見つけられる問題を、変更のたびに、公開前に止められます。この仕組みは続けてください。
わからないこと
ビルドが通ったということは、実行したルールに失敗がなかったということです。ページが利用者にとって使えることを意味しません。
スキャンツール・監視ダッシュボード
向いていること
多くのページのルール違反を、継続的に追跡できます。
わからないこと
スコアは合格したルールの割合で、適合しているかどうかの結果ではありません。
オーバーレイ型ウィジェット
向いていること
一部の利用者が好む表示設定を提供できます。
わからないこと
コードを直すのではなく、読み込み後にページを書き換えます。利用者が普段使っているスクリーンリーダーや拡大機能と競合することがあります。
AIによるテスト・自動修正
向いていること
すばやい一次確認と、人が見直すための修正案の作成。
わからないこと
意味は推測にとどまります。生成された代替テキストやラベルは、間違っていてもルール上は合格になり、実行するたびに結果が変わることもあります。
スキャン結果をまとめた診断レポート
向いていること
ルール違反の網羅的な一覧。
わからないこと
実際に利用者を止めている問題はどれか、コードでどう直すか。
チェックを回し、そのうえで操作を試す
自動チェックはCIに組み込み、見つけられる問題が再発しないようにします。そのうえで、会員登録、検索、購入など重要な操作を、キーボード、スクリーンリーダー、拡大表示で人が試します。私の進め方も同じで、まず自動チェック、続いてSection 508 Trusted Testerの手順による手動テストを行います。