アクセシビリティ検査員の検査の進め方
このページでは、アクセシビリティ検査員（A11yInspector）を使って公開ページを検査する手順を説明します。
アクセシビリティ検査員は、ログイン中の公開ページに表示されるアクセシビリティ検査パネルです。axe-core と独自の確認機能を使い、問題候補の検出、ページ上のハイライト、手動確認の補助を行います。
使い始める前の準備
- ライセンス認証を行います。
- 拡張アプリ アクセシビリティ検査員 を有効化します。
- 必要に応じて アクセシビリティ検査員設定 を開きます。
- ログインした状態で、検査したい公開ページを開きます。
アクセシビリティ検査員は管理画面には表示されません。公開ページでのみ検査パネルが表示されます。
URL例:
https://example.com/bid/1/admin/app_mszm_a11yinspector_index/設定画面で確認する項目
| 項目 | 説明 | 通常の考え方 |
|---|---|---|
| 除外セレクタ | 検査対象から外すCSSセレクタ | 管理バーやサイト固有の不要なUIを除外する |
| 初期状態でパネルを開く | ページ読み込み時にパネルを開く | 試験中はオンでもよい。通常運用では必要に応じて |
| best-practice の除外 | axe の推奨・注意点を結果から外す | 通常はオフ。結果に含めて確認する |
| incomplete の除外 | 自動判定できない候補を外す | 通常はオフ。人の確認が必要な候補として確認する |
設定を変更したら 保存 を押します。
基本の検査手順
- a-blog cms にログインしたまま、検査したい公開ページを開きます。
- 画面右側、または画面下部の アクセシビリティ検査員 ボタンを押します。
- パネルが開いたら 検査開始 を押します。
- 検査結果が表示されるまで待ちます。
- 自動検査項目 を確認します。
- 人の判断が必要 を確認します。
- 必要に応じて 補助ツール を使います。
- 問題があれば、アクセシビリティ検査記録簿のチェックシートに結果と理由を記録します。
アクセシビリティ検査記録簿 から開く場合
アクセシビリティ検査記録簿のチェックシートには 検査ツールで見る があります。ここから開くと、公開ページに移動し、該当する達成基準を選んだ状態でアクセシビリティ検査員を起動できます。
URLの形式:
https://example.com/page/#a11yinspector-run=1.1.1操作手順:
- アクセシビリティ検査記録簿のページ別チェックシートを開きます。
- 確認したい達成基準の行で 検査ツールで見る を押します。
- 公開ページが新しいタブで開きます。
- アクセシビリティ検査員が自動で開き、検査を実行します。
- 達成基準セレクトに該当番号が入っていることを確認します。
- 結果を確認し、アクセシビリティ検査記録簿側に戻って記録します。
自動検査項目の見方
自動検査項目には、axe-core と独自アナライザの結果が表示されます。
主な表示:
| 表示 | 意味 |
|---|---|
| 重要 | 修正が必要な可能性が高い項目 |
| 要確認 | 自動判定だけでは判断できず、人の確認が必要な項目 |
| 対象を表示 | ページ上の該当箇所をハイライトする |
| 確認済み | 今回の検査中だけの一時メモ。保存はされない |
確認の進め方:
- 重要 を優先して確認します。
- 各項目を開き、説明と対象箇所を確認します。
- 対象を表示 を押し、ページ上の位置を確認します。
- 修正が必要なら、アクセシビリティ検査記録簿 に
×として記録します。 - 判断に迷う場合は
△として注記を残すか、追加確認します。
達成基準で絞り込む
パネル上部の 達成基準 セレクトで、1.1.1 や 2.4.7 のような番号を選ぶと、該当する検査結果に絞り込めます。
使いどころ:
- アクセシビリティ検査記録簿のチェックシートと対応させて確認したい
- 1つの達成基準だけ集中して確認したい
- 修正後に特定の項目だけ再確認したい
人の判断が必要を確認する
人の判断が必要 には、自動検査だけでは十分に判断できない達成基準が表示されます。
確認例:
- 画像の代替テキストが文脈に合っているか
- リンクテキストが目的を説明しているか
- 見出し構造が意味のまとまりを表しているか
- キーボードだけで操作できるか
- フォーカス順が自然か
- 音声、動画、アニメーションに必要な代替があるか
ここに表示される内容は、必ずしも不適合ではありません。人が確認して、アクセシビリティ検査記録簿 に結果を記録してください。
補助ツールの使い方
補助ツール は、目視確認や手動確認を助ける機能です。
カテゴリ:
| カテゴリ | 例 |
|---|---|
| 視認性 | コントラスト、白黒表示、Reflowプレビュー、非テキストコントラスト |
| 操作性 | キーボード操作候補、フォーカス可視化、クリック領域、固定UI被り |
| 構造 | フォーム構造、テーブル構造、画像alt表示、ARIA属性可視化 |
使い方:
- 補助ツール を開きます。
- カテゴリを選びます。
- 必要なツールを押します。
- ページ上に表示される可視化やプレビューを確認します。
- もう一度押す、または閉じる操作で解除します。
キーボード操作を確認する
自動検査だけでは、キーボード操作の使いやすさを完全には判断できません。次の手順で確認してください。
- キーボードの
Tabでページ内を移動します。 - フォーカスが見えるか確認します。
- 視覚的な順序とフォーカス順が大きくずれていないか確認します。
- メニュー、モーダル、タブ、アコーディオンなどを
EnterやSpaceで操作できるか確認します。 - モーダルなどから抜けられなくならないか確認します。
- 必要に応じて補助ツール フォーカス可視化、フォーカス順、キーボードトラップ候補 を使います。
問題があれば、アクセシビリティ検査記録簿の該当達成基準に × と理由を記録します。
検査結果をアクセシビリティ検査記録簿へ記録する
アクセシビリティ検査員は検査補助ツールです。最終的な試験結果は アクセシビリティ検査記録簿 に記録します。
記録するときの例:
| アクセシビリティ検査員で見つけたこと | アクセシビリティ検査記録簿での記録 |
|---|---|
| 画像にaltがない | 1.1.1 を ×、不適合理由に対象画像と理由を書く |
| 見出しレベルが飛んでいる | 1.3.1 または関連基準を確認し、必要なら × |
| フォーカスが見えない | 2.4.7 を × |
| 自動判定では要確認だが問題なかった | ○、必要に応じて注記 |
| 判定に補足が必要 | △、注記に判断理由を書く |
検査時の注意
- アクセシビリティ検査員の「確認済み」は保存されません。作業記録は アクセシビリティ検査記録簿 に残してください。
- 管理画面では検査パネルは表示されません。公開ページで確認してください。
- ログイン状態でしか見えない管理バーや編集ボタンは、除外セレクタで検査対象外にしてください。
- 自動検査で問題が出なくても、手動確認が不要になるわけではありません。
- 修正後は再検査し、アクセシビリティ検査記録簿の結果確定とスナップショットも更新してください。