アクセシビリティ資料 マニュアル アクセシビリティ検査員の検査の進め方

アクセシビリティ検査員の検査の進め方

このページは、マニュアルの「アクセシビリティ試験の進め方（全体の流れ）」のうち、工程3（ページごとの確認・記録） で使う確認補助の詳しい手順です。検出結果はそのまま結論にせず、人の確認とあわせて扱います。

このページでは、アクセシビリティ検査員を使って公開ページを検査する手順を説明します。

アクセシビリティ検査員は、ログイン中の公開ページに表示されるアクセシビリティ検査パネルです。axe-core と独自の確認機能を使い、問題候補の検出、ページ上のハイライト、手動確認の補助を行います。

使い始める前の準備

  1. 導入と設定の手順に従い、検査全体を管理するブログで拡張アプリ アクセシビリティ検査 を有効化します。
  2. アプリ内の 設定 → 基本設定 → 検査員設定 を開き、除外セレクタなどを確認します。
  3. 子ブログで使う場合は、配布ZIPの案内に従って管理元を参照する連携を設定します。
  4. ログインした状態で、検査したい公開ページを開きます。

検査員を別の拡張アプリとして有効化する必要はありません。

アクセシビリティ検査員は管理画面には表示されません。公開ページでのみ検査パネルが表示されます。

URL例:

https://example.com/bid/1/admin/app_mszm_a11yworkflow_setup/#mszm-a11yworkflow-setup-inspector

設定画面で確認する項目

項目説明通常の考え方
除外セレクタ検査対象から外すCSSセレクタ管理バーやサイト固有の、検査対象から外したいUIを除外する
初期状態でパネルを開くページ読み込み時にパネルを開く試験中はオンでもよい。通常運用では必要に応じて
best-practice の除外axe の推奨・注意点を結果から外す通常はオフ。結果に含めて確認する
incomplete の除外自動判定できない候補を外す通常はオフ。人の確認が必要な候補として確認する

設定を変更したら 設定を保存 を選択します。チェックシート表示・記録の保存先も同じボタンで保存します。

基本の検査手順

  1. a-blog cms にログインしたまま、検査したい公開ページを開きます。
  2. 画面右側、または画面下部の アクセシビリティ検査員 ボタンを選択します。
  3. パネルが開いたら 検査開始 を選択します。
  4. 検査結果が表示されるまで待ちます。
  5. 自動検出された項目 を確認します。
  6. 人の判断が必要 を確認します。
  7. 必要に応じて 補助ツール を使います。
  8. 必要に応じて 結果をエクスポート でJSONを保存します。
  9. 問題があれば、アクセシビリティ検査記録簿のチェックシートに結果と理由を記録します。

アクセシビリティ検査記録簿 から開く場合

アクセシビリティ検査記録簿のチェックシートには 検査ツールで見る があります。ここから開くと、公開ページに移動し、該当する達成基準を選んだ状態でアクセシビリティ検査員を起動できます。

URLの形式:

https://example.com/page/#a11yinspector-run=1.1.1

操作手順:

  1. アクセシビリティ検査記録簿のページ別チェックシートを開きます。
  2. 確認したい達成基準の行で 検査ツールで見る を選択します。
  3. 公開ページが新しいタブで開きます。
  4. アクセシビリティ検査員が自動で開き、検査を実行します。
  5. 達成基準セレクトに該当番号が入っていることを確認します。
  6. 結果を確認し、アクセシビリティ検査記録簿側に戻って記録します。

自動検出された項目の見方

自動検出された項目には、axe-core と独自アナライザの結果が表示されます。

主な表示:

表示意味
重要修正が必要な可能性が高い項目
要確認自動判定だけでは判断できず、人の確認が必要な項目
エラーカタログ読み込み失敗など、検査を確定できない状態
対象を表示ページ上の該当箇所をハイライトする
確認済みパネル内の一時メモ。作業記録としては保存されない

確認の進め方:

  1. 重要 を優先して確認します。
  2. 各項目を開き、説明と対象箇所を確認します。
  3. 対象を表示 を選択し、ページ上の位置を確認します。
  4. 修正が必要なら、アクセシビリティ検査記録簿 に × として記録します。
  5. 判断に迷う場合は △ として注記を残すか、追加確認します。

達成基準で絞り込む

パネル上部の 達成基準 セレクトで、1.1.1 や 2.4.7 のような番号を選ぶと、該当する検査結果に絞り込めます。

使いどころ:

検査結果をJSONでエクスポートする

検査実行後、パネル上部の 結果をエクスポート から検査結果JSONを保存できます。Chrome拡張版でも無料で利用でき、ライセンス認証は不要です。CMS版では、アクセシビリティ検査記録簿への入力補助や検査記録の控えとして利用できます。

JSONに含まれる主な内容:

区分内容
基本情報エクスポート日時、ページURL、ページタイトル、ページの言語
ツール情報検査員のバージョン、axe-coreのバージョン、WCAGバージョン
設定対象レベル、axeの実行タグ、除外セレクタの有無
検出結果自動検出・要確認項目、対象セレクタ、短いHTML断片、判断材料
取り込み候補検査記録簿へ反映するための達成基準別候補（×、△、-、○）

JSONには、ページ全体のDOM、フォーム入力値、Cookie、認証情報、画像データは含めません。ただし、ページURL、ページタイトル、該当箇所のHTML断片、画面上の短いテキストは含まれるため、共有先には注意してください。

エクスポートしたJSONは、アクセシビリティ検査記録簿のページ別チェックシートに取り込めます。達成基準番号と行IDが一致しないJSONは、誤反映を避けるため取り込みません。

人の判断が必要を確認する

人の判断が必要 には、自動検査だけでは十分に判断できない達成基準が表示されます。

確認例:

ここに表示される内容が、そのまま不適合とは限りません。人が確認し、アクセシビリティ検査記録簿 に結果を記録します。

補助ツールの使い方

補助ツール は、目視確認や手動確認を助ける機能です。

カテゴリ:

カテゴリ例
視認性コントラスト、白黒表示、Reflowプレビュー、非テキストコントラスト
操作性キーボード操作候補、フォーカス可視化、操作できる範囲、固定UI被り
構造見出し順表示、ランドマーク表示、フォーム構造、テーブル構造、画像alt表示、ARIA属性可視化

使い方:

  1. 補助ツール を開きます。
  2. カテゴリを選びます。
  3. 必要なツールを選択します。
  4. ページ上に表示される可視化やプレビューを確認します。
  5. もう一度選択する、または閉じる操作で解除します。

見出し順表示は h1〜h6 と role="heading" を文書順に表示します。ランドマーク表示は main、nav、header、footer、aside、form、region などの領域を可視化します。どちらも自動で合否を判定するものではなく、ページ構造を人が確認しやすくするための補助です。

キーボード操作を確認する

自動検査だけでは、キーボード操作の使いやすさを完全には判断できません。次の手順で確認します。

  1. キーボードの Tab でページ内を移動します。
  2. フォーカスが見えるか確認します。
  3. 視覚的な順序とフォーカス順が大きくずれていないか確認します。
  4. メニュー、モーダル、タブ、アコーディオンなどを Enter や Space で操作できるか確認します。
  5. モーダルなどから抜けられなくならないか確認します。
  6. 必要に応じて補助ツール フォーカス可視化、フォーカス順、キーボードトラップ候補 を使います。

問題があれば、アクセシビリティ検査記録簿の該当達成基準に × と理由を記録します。

検査結果をアクセシビリティ検査記録簿へ記録する

アクセシビリティ検査員は検査補助ツールです。最終的な試験結果は アクセシビリティ検査記録簿 に記録します。

記録するときの例:

アクセシビリティ検査員で見つけたことアクセシビリティ検査記録簿での記録
画像にaltがない1.1.1 を ×、不適合理由に対象画像と理由を書く
見出しレベルが飛んでいる1.3.1 または関連基準を確認し、必要なら ×
フォーカスが見えない2.4.7 を ×
自動判定では要確認だが問題なかった○、必要に応じて注記
判定に補足が必要△、注記に判断理由を書く

JSONをエクスポートした場合は、アクセシビリティ検査記録簿側の アクセシビリティ検査員の結果を取り込む から反映できます。取り込み後も内容を確認し、通常の保存操作で確定してください。

検査時の注意

前のページアクセシビリティ検査記録簿の試験の進め方