【Word Press】スキャナー機能について

1. サイトでスキャナーを実行する

• ワードプレス管理者サイトで、サイトを閲覧中に、ページ上部の管理者バーから「WCAG Check」ボタンにカーソルを合わせます。[画像1]

• 選択可能な項目を1つ選びます。
  • ベーシックページチェック：現在のページをWCAG2.1のA基準でチェックします
  • フルページチェック：WCAG 2.1のAA基準に現在のページをチェックします
  • フルサイトチェック：サイト全体をWCAG 2.1のAA基準でチェックします
• 基準の詳細はこちら → Web Content Accessibility Guidelines (WCAG) 2.1
• チェック項目を選択すると、変更が必要な項目がハイライト表示され、
  その横にクエスチョンマークのアイコンが表示されます。[画像2]

画像2

2. 「詳しくはこちら」ボタン

• スキャナーを実行後、ハイライトされた要素の隣にあるクエスチョンマークをクリックすると、
  影響を受けた項目の説明を開くことができます。
  修正方法に関する推奨事項を開くには、「詳しくはこちら」ボタンをクリックします。[画像3]

画像3

• 別のウィンドウが開き、問題がある可能性や修正方法についての情報が表示されます。
  この情報は必ず記録してください。[画像4]

画像4

3. スキャナーのログを読む

• Sアクセシブルでない場合、ページ自体に強調表示がされないことがあります。
  このため、スキャナーを実行すると、ログが作成され、
  アクセシブルでない可能性のあるウェブサイトの部分に関する全ての情報が記録されます。
  この情報は、「Scanner Logs」で見ることができます。
• 「Scanner Logs」にアクセスするには、ワードプレス管理者サイトのサイドナビゲーションメニューで、
  アクセシレンズのアイコンにカーソルを合わせ、サイドメニューから「Scanner Logs」オプションを選択します。[画像5]

画像5

• 「Scanner Logs」表が表示されたところで、各コラムの意味をご説明します。

• 1列目：ページ

  • この列には、アクセシビリティに関する懸念事項があるページの名前が表示されます。[画像6]
    ページ名をクリックすると、そのページが別ウィンドウで表示されます。

画像6

• 2列目：影響を受けるノード

  • この列は、そのページで注意を要する要素の数を示しています。[画像7]

画像7

• 3列目：使用したツールバーオプション

  • この列には、ツールバーによって自動的に修正されたノードの有無が表示されるため、何もする必要はありません。[画像8]

画像8

• 4列目：スキャン時刻

  • この列には、スキャンが行われた時刻が表示されます。[画像9]

画像9

• 5列目：データ

  • この列には、改善が必要と思われる各要素について、より詳しい情報を提供するポップアップへのリンクがあります。[画像10]
    このポップアップの情報については、このページのさらに下に、より詳細な情報が記載されています。

画像10

• 6列目：種類

  • この列は、その行の情報が「フルサイトチェック」または「フルページチェック」のどちらで収集されたかを示しています。[画像11]

画像11

4. 「データを表示する」ポップアップの見方

• 「Scanner Logs」テーブルの5列目は「Data」と表示されており、「データを表示する」というクリック可能なテキストが含まれています。
  このテキストをクリックすると、別のテーブルのポップアップが表示されます。[画像12]

画像12

• 「データを表示する」ポップアップが表示されたところで、各列の意味についてご説明します。

• 1列目：影響を受ける項目

  • この列は、類似のエラーを1つのフィールドにグループ化し、その行に記述されている要素の数を表示します。[画像13]

画像13

• 2列目：説明

  • この列には、エラーの簡易的な説明が記載されています。[画像14]

画像14

• 3列目：ルール

  • この列には、どのルールが破られたのか、あるいは満たされたのかが記載されています。[画像15]

画像15

• 4列目：セレクタ

  • この列には、ルールに反したセレクタの名前が表示されます。[画像16]
    セレクタは、ルールを破った要素を正確に特定します。
    この情報は、アクセシビリティの問題を解決するために「サイト設定」セクションで必要になるため、この列は非常に重要なものです。
  • 「Affected Items」列で特定されるように、1つの行に複数の影響を受ける項目がある場合、
    この列には複数のセレクタがカンマで区切られて表示されます。

画像16

• 5列目：情報

  • この列には、その行の特定の問題を解決する方法に関する情報を別のウィンドウで開くためのリンクが含まれています。[画像17]
    この情報は必ず記録してください。