Axe Expertを支援技術と共に使用する

Deque Systems, Inc.は、axe Expert Extensionのスクリーンリーダー使用者にとって、NVDA/Windowsを主要なプラットフォームと見なしています。WindowsではNVDAまたはJAWSを、MacではVoiceOverを使用することをお勧めします。

始める前に:

axe Expert ExtensionのDequeの自発的製品アクセシビリティ適合性報告書を確認するには、axe Expert Extension for Chrome VPAT.pdfをご覧ください。

Google ChromeでNVDAを使用してaxe Expert Extensionを利用する

Chrome DevToolsキーボードショートカットリファレンス:

始める前に:最近、GoogleはChromeブラウザのDevToolsユーザーガイドとウェブ参照資料を更新しました。Google Chromeでaxe Expert Extensionを使用する際に一般的に適用されるキーボードショートカットについては、キーボードショートカットリファレンス - Google Developers Chrome DevToolsをご参照ください。

以下の説明は、Windowsベースのスクリーンリーダー（NVDAを含む）を使用してGoogle Chromeでaxe Expert Extensionを使用する方法を一般的に説明しています。インストール、起動、ユーザーインターフェイスのナビゲート、設定の調整、アクセシビリティ分析の実行、結果のエクスポートに関する指示が提供されます。この文書には、axe Expert Extension SimulATまたはNVDAのスクリプト機能を使用するための指示含めていないが含まれておらず、このユーザーガイドの残りに含まれる詳細レベルも含まれていません。ここに含まれている文書は、NVDAスクリーンリーダーソフトウェアのユーザー向けのクイックスタートガイドとしてのみ提供されています。

このトピックについて:

• Google ChromeでNVDAを使用してaxe Expert Extensionを利用する
  • Chrome DevToolsキーボードショートカットリファレンス:
• axe Expert Extensionをインストールする
  • 重要
  • Chrome Web Store拡張機能ページから
  • インストールリンクから
  • CRXファイルから
  • インストールを確認する
• Google Chromeでaxe Expert Extensionを開く
• Axe Expert Extensionユーザーインターフェイスを理解し、ナビゲートする
  • メインメニューパネルの選択
    • パネル固有のコンテキストメニュー（分析メニュー）
      • 分析パネルのコンテキストメニューを使用する:
    • パネルナビゲーション
    • 一つのパネルから別のパネルに切り替える
    • キーボードレイアウトとフォームモード
• ルールセットを選択する
  • ルールセットを選択する:
  • 設定: サーバー接続、プロジェクト選択、スコープ
  • イベント記録のオプション
• アクセシビリティルール違反についてページを分析する
  • アクセシビリティ違反が見つからなかった場合
• 分析結果と作業する
  • 結果をエクスポートする
    • 結果をCSVファイルにエクスポートする:
  • axe Expert Extensionでの分析結果の確認
    • ルール違反をレビューする:
    • 個々の違反を掘り下げる:
    • 分析結果違反パネルの概要
  • 複数の違反のナビゲーションノート
    • PreviousおよびNextボタンを使用する
    • 個々の違反に移動する
    • 最後の違反について
• カスタムルールを使用する
  • カスタムルールを追加

axe Expert 拡張機能をインストールする

Google Chrome の DevTools に axe Expert 拡張機能をインストールする方法は、Firefox 用の Deque の axe Expert 拡張機能をインストールする方法と若干異なります。axe Monitor ユーザー用のインストールリンクからアプリケーション経由でインストールする方法が異なるためです。axe Expert 拡張機能のユーザーは最初にリポジトリから .xpi ファイルをダウンロードします。

重要

以下の指示は例として提供されており、インストールプロセスの概要をお伝えすることを目的としています。具体的な手順は、お使いのセキュリティおよびブラウザの種類/バージョンの要件によって異なる場合があります。例えば、組織によっては、デベロッパーモードを有効にして展開の拡張機能を読み込む必要があるかもしれません。具体的なインストール手順については、管理者に相談してください。Deque の推奨されるベストプラクティスは、すべての顧客が Deque Engagement Manager または Deque ヘルプデスクと協力して、適切なバージョンと適切にライセンスされたインストールファイルを入手することです。

Chrome ウェブストア 拡張機能ページから

axe Expert 拡張機能をインストールする最も簡単な方法は、Chrome ウェブストアの Google Chrome 拡張機能ページへの直接リンクを使用することです。過去に Google Chrome ブラウザ拡張機能をインストールしたことがあれば、プロセスは同じです。ただし、axe Expert 拡張機能は一般的に Chrome ウェブストアで検索できないため、直接リンクが必要です：

Chromestore の axe Expert へのリンク。

提供されたリンクを使用した詳細なインストール手順については、このガイドの「はじめに」セクションのダウンロードとインストールトピックを参照してください。

インストールリンクから

圧縮された .crx インストールファイルは、axe Monitor の右側のサイドバーメニューから直接リンクを介してアクセスすることができ、Google Chrome ブラウザ内からインストールプロセスを開始できます。

インストールリンクから axe Expert 拡張機能をインストールする（axe Monitor）：

1. Chrome ブラウザを使用して、axe Monitor のホーム画面の「クイックリンク」セクションに移動します。
2. axe Expert Extension 3.5 のダウンロードを選択します。

axe Expert Extension のインストールリンクを選択すると、axe Expert Extension をインストールするかどうかを確認するメッセージが表示されます。

4. Tab キーで移動し、「展開されていない拡張機能を読み込む...」ボタンを選択します（または Alt_I を押します）。

CRX ファイルから

パックされた Google Chrome 拡張機能は、.crxファイル拡張子で圧縮されたファイルとして提供されており、手動で拡張機能を更新する必要がないように、プライベートキーを提供します。これにより自動的に処理されます。

.crxファイルから axe Expert 拡張機能をインストールする（axe Expert Extension）：

1. 必要な CRX ファイルインストーラーを取得するには、Deque Engagement Manager または Deque ヘルプデスクに連絡してください。
2. コンピュータ上のダウンロードした.crxファイルに移動します。
3. Enterを押します。

インストールを確認する

インストールは数秒で完了するはずです。インストールが完了すると、axe Expert 拡張機能が正常にインストールされたというメッセージが表示されます。Google Chrome DevTools で axe Expert 拡張機能を開こうとすることで、インストールが成功したかどうかをいつでも確認できます。詳細については、axe Expert 拡張機能を開くを参照してください。次の手順では、Google Chrome 拡張機能ページの axe Expert 拡張機能エントリに移動して、インストールを確認する方法を説明します。

1. Google Chrome アドレス（ロケーション）フィールドに chrome://extensions/ と入力し、Enter キーを押します。

2. Google Chrome にインストールされた拡張機能のリストにアクセスするには、TABを3回アクティブにします。

3. axe Expert 拡張機能のリスト項目を見つけるためにDown Arrowキーを押します。

   Google Chrome の拡張機能は、インストールされた順に昇順で表示されるので、最初のリスト項目になるはずです。

4. "無効化、削除" というオプションが axe Expert の後にアナウンスされたら、拡張機能は正常にインストールされたことになります。

Google Chrome で axe Expert 拡張機能を開く

axe Expert 拡張機能は Chrome の DevTools タブバーにインストールされています。

1. Chrome DevTools を起動するには、Ctrl+Shift+Iを押し続けます。
2. 「axe Expert」という音が聞こえるまでCtrl\_\]を押し続けます。

最初にインストールされ、他の拡張機能が Google Chrome の開発ツールと統合されていない場合、axe Expert タブはツールボックスのタブバーの右端に表示されます。

4. DevTools ウィンドウで axe Expert タブを有効にするには、Enter キーを押します。

axe Expert 拡張機能は、Google Chrome の DevTools ウィンドウでアクティブになり、使用可能です。

axe Expert 拡張機能のユーザーインターフェイスを理解し、ナビゲートする

メインメニューパネル選択

axe Expert 拡張機能の左側のペインでは、現在選択されているパネルに関係なく、メインのドロップダウンメニューから axe Expert 拡張機能内の5つの主要なパネルのいずれかへのリンクが提供されています。

1. タブキーを押してメインメニューにフォーカスを移動することで、axe Expert タブのアクティブ化を確認します。「グローバルナビゲーション」として読み上げられます。

   フレームは「data/index」フレームとしてアナウンスされます。

   デフォルト タブ：axe Expert Extension を起動すると、「分析」ペインがデフォルトでアクティブになります。アクセシビリティ分析を行うには、「分析」タブを使用します。このタブは、99.5% の時間で使用されるタブでしょう。axe Expert Extension のOptionsメニューを使用して、SettingsとSign in to axe Monitorを選択します。

2. フォーカスをaxe Expert Extensionのグローバルナビゲーションメインメニューに移動して、Enterキーを押します。

   axe Expert Extensionのメインメニューが開き、5つのパネル選択肢を表示します。

   • Analyze: Analyzeパネルはaxe Expert Extensionをアクティブにすると表示されるデフォルトパネルです。このパネルのJAWSに特化した指示についてはアクセシビリティルール違反のページを分析するを参照してください。詳細は分析をご覧ください。
   • Scripts: 完全な詳細についてはスクリプトを参照してください。
   • Page Insights: 完全な詳細についてはページインサイトを参照してください。
   • Rules: このパネルのJAWSに特化した指示についてはカスタムルールの使用を参照してください。また、完全な詳細についてはルールセットをご参照ください。
   • Settings: このパネルのJAWSに特化した指示については設定の構成を参照してください。

3. axe Expert Extensionメインメニュー項目をナビゲートするには、down arrowキーとup arrowキーを押します。メニュー項目を選択するにはEnterを押します。

メニューが閉じられると、スクリーンリーダーは「ボタンが折りたたまれました」と呼び、その後に選択されたメニュー項目の名前を発表します。

パネル固有のコンテキストメニュー（分析メニュー）

選択されたパネルの追加のパネル固有の操作や関連パネルおよび他のパネルの関連機能へのリンクにアクセスするには、Analyzeパネルの右側のコンテンツペインの上部バーにある垂直の省略記号ボタンのドロップダウンメニューを使用します。このドロップダウンメニューは、非公式に「三点メニュー」として知られることがあります。

Analyzeパネルのコンテキストメニューを使用する：

• Tab: AnalyzeパネルでAnalyzeボタンから、main landmark Analyze google menu button collapsed.として発表されるコンテキストメニューにフォーカスを移動します。
• Enterを押して、Analyzeコンテキストメニュー項目を表示します。
• Arrow downまたは上矢印キーでメニュー項目をハイライトし、Enterを押して現在ハイライトされているメニュー項目を選択します。

パネルナビゲーション

axe Expert Extension内の各パネルは、2〜3つの情報サブパネルで構成されています。サブパネルには、見出しで識別される情報セクションも含まれています。

あるパネルから別のパネルに切り替える

• ブラウズモードで、上下矢印キーを押して有効にしたいパネルを選択し、Enterキーを押します。
• フォームモードでは、アクティブなペインにタブし、それから矢印キー（右矢印キーまたは左矢印キー）を使用して他のペインに切り替えます（Enterキーは必要ありません）。

NVDAをフォームモード作業後にブラウズモードに強制的に戻すには、NVDAキーとスペースバーを押します。

キーボードレイアウトとフォームモード

NVDAキーボードレイアウト: NVDAでフォームモードを解除するには、EscキーまたはNVDAキーとスペースバーを押します。NVDAキーはinsertキーですが、NVDAの設定メニューでCaps Lockに変更することができます。

ルールセットを選択する

ルールパネルでルールセットオプションを調整したい場合があります。ルールパネルには、三つのルールセットが見つかるルールセットという凡例が付いたチェックボックスが含まれています。WCAG 2.0 AAルールはデフォルトでアクティブです。WCAG 2.0 AAデフォルト以外のルールセットを使用する場合は、ルールタブでオプションの調整が必要です。

axe Expert Extensionの標準ルールセットの1つを用いてオフライン分析を行うことができます。または、独自のカスタムルールセットを使用することも可能です。

デフォルトスタンダード: axe Expert Extensionを箱から出した状態で使用する場合、デフォルトのWCAG 2.1 AAルールセットを使用してWCAG 2.1 AA分析を行います。

ルールセットを選択する：

1. NVDAでRを押します。

WCAG 2.1レベルAAのチェックボックスがデフォルトでチェックされています。これは、axe Expert Extensionに付属する標準ルールセットです。デフォルトルールセットは、axe Expert Extensionに他のものを使用するよう指示するまで使用されます。axe Expert Extensionの一部として出荷されるルールセットを削除することはできません。

3. 関連するチェックボックスを介してルールセットを選択します。

さらなる確認は必要ありません。

設定: サーバー接続、プロジェクト選択、および範囲

設定パネルで最初に目にするのは、axe Expert Extensionをaxe Monitorサーバーに接続するためのフォームフィールドのセットです。axe Monitorにサインインした後、ボタン付きのプロジェクト選択メニューが表示されます。プロジェクトを選択すると、ダウンロードの問題や範囲という2つの新しいセクションが表示されます。

分析結果のダウンロードとアップロードを有効にするために、axe Monitorサーバーに接続してプロジェクトを選択したい場合があります。axe Expert Extensionがaxe Monitorサーバーに接続されていない場合、ドロップダウンは「オフラインプロジェクトなし」または「クリック可能オフラインプロジェクトなしクリック可能」として発表され、プロジェクト選択機能は「利用できません」と発表されます。詳細については、それぞれaxe Monitorにサインインするおよびaxe Monitorプロジェクトを選択するをご覧ください。

ウェブページを分析する前に、設定パネルの範囲セクションのオプションを調整して、ターゲットや無視する内容を絞り込むことができます。詳細は範囲定義をご覧ください。

イベント記録オプション

スクリプトタブのオプションリンクを通じてアクセスできるスクリプト記録オプションパネルには、「キャプチャするイベント」というセクションがあり、そこでイベントを記録するか無視するかを設定するチェックボックスを配置できます。詳細については、キャプチャするイベントを選択を参照してください。

アクセシビリティルール違反のページ分析

1. テストしたいページをChromeで開きます。

2. Chrome DevTools (Ctrl_Shift_I) を開き、axe Expertタブを選択します。

   詳細については、axe Expert拡張機能を開くを参照してください。

3. axe Expert 拡張機能の Analyze ペインでページを再分析する場合は、ANALYZE ボタンまたは再実行リンクを探します（どちらを選んでも同じ機能を果たします）。

4. Analyze ボタン。

Analyze ボタンのラベルは、スキャン中に analyzing と表示されるように変わります。

スキャンが終了したことは、Analyze ボタンから矢印キーまたは Tab キーで離れられるようになったときにわかります。

アクセシビリティ違反が見つからない場合

アクセシビリティ違反が見つからない場合、アップロードボタンの後の行には「おめでとうございます！アクセシビリティ違反は見つかりませんでした。」と表示されます。その後、NVDA、VoiceOver、JAWS などの支援技術を使用して手動テストを実施してください。

分析結果を操作する

エクスポートボタンと違反数: 1つ以上のエラーが検出された場合、Analyzeパネルメニューの5番目のリンクオプションExportを使用して、結果をCSVファイルにエクスポートします。

Download および Upload リンク: Analyze パネルメニューには、ダウンロード... やアップロード... 項目も含まれています。これらの項目は、axe Monitor サーバーに接続されていないときに「無効」として発表されます。詳細については、分析結果をアップロード および スクリプトをダウンロードを参照してください。

axe Expert Extension の結果を次の2つの方法で分析できます。

• 結果をスプレッドシートプログラムにエクスポートして詳細な分析を行います。
• Analyze パネル内で結果を確認します。

結果をエクスポート

Microsoft Excel などのスプレッドシートプログラムで分析結果を操作し、並べ替えやその他のデータ操作ができるようにするには、axe Expert Extension AnalyzeメニューからExportを選択して、カンマ区切り値（CSV）ファイルをダウンロードします。エクスポートされた結果を使用することは、複数のルールに違反する複数の違反を含む結果の場合、スクリーンリーダーユーザーが違反間を簡単に移動するのに特に役立ちます。

結果をCSVファイルにエクスポート：

1. パネル固有のAnalyzeドロップダウンメニューでExportを選択します。

一般的な「ファイルを保存」ダイアログボックスが表示されます。

3. 便利なフォルダを選択し、ファイルの説明的な名前を提供して、Saveを選択します。

   Make sure the desired folder is selected by shift+tabbing to the folder tree the first time you bring up the Save File dialog using the Export link. axe Expert Extension saves exported results in the default download location configured in your Chrome browser settings. Once a folder is selected, axe Expert Extension remembers your selection for future exports.

axe Expert Extension での分析結果のレビュー

All axe Expert Extension analysis results are displayed under the Violations found heading. This is usually the only heading in the Analyze panel, so using h should get you there directly.

ルール違反のレビュー：

• 上矢印を2回押して、見つかった違反の数が報告される行を表示します。

  axe Expert Extension は違反を特定したテストの順序付きリストを表示し、それぞれのルールに対する違反の数も表示します。リスト内のルール名はリンクになっており、表示されるとそのルールに対するすべての違反を示すリストが表示されます。

  典型的な違反リストは以下のようになります：

x個の項目のリスト

1. リンク: 要素は十分なカラコントラストを持たなければなりません x 違反（x は違反の数です）。
2. リンク: ID属性値は一意でなければならない違反...

個別の違反に掘り下げる：

• リスト内のルールリンクを選択します。

ルールリンクを選択すると、そのルールの最初の違反を表示するパネルが表示されます。

分析結果違反パネル概要

このセクションでは、個々のルール違反内で矢印キーを下に移動するときに表示される順序情報を説明します。

• 個別の違反を表示: 違反が発生したルールのリストで開始します（リストの外観と例については、前のセクションを参照してください）。

• 複数の違反ナビゲーションと影響

• 前のボタン: リストの最後には、「前へ」と呼ばれるボタンが表示されます。最初のルール違反を表示しているとき、この「前へ」ボタンは無効になります。

• 総違反件数: 「X のうちの違反 1」と書かれた行が表示されるまで、前のボタンから矢印キーで下に移動し、X はアクティブルールに特有の総違反件数を示します。

• 影響：総違反件数の行からさらに矢印キーで下に移動すると、違反に関連する影響情報が表示されます。影響の行には影響の評価（軽微、中程度、重大、致命的）が含まれます。

• Next ボタン：影響情報の後に次へボタンが表示されます。特定のルールの最後の違反を確認している場合、次へボタンは無効としてアナウンスされます。

• Description: 次のボタンから矢印キーで下に移動すると、違反したルールの一行説明と詳細情報リンクが表示されます。たとえば、色のコントラストルールの違反が記録された場合、この行には「前景色と背景色のコントラストが WCAG 2 AA コントラスト比の基準を満たすことを確認する」と表示されます。

• More info リンク: 詳細情報を選択すると、違反ルールに関するより多くのコンテキストと背景情報に加えて、修正方法の詳細を提供する Deque University のコンテンツを確認できます。

• Applicable Ruleset (Standard) and Success Criteria: 詳細情報リンクの後に二項目のリストがあります。リストの最初の項目は、axe Expert Extension 分析スキャンの際に使用されたアクティブルールセット（「wcag2aa」として示される WCAG 2.0 AA）を説明します。リストの2番目の項目は、アクティブルールの成功基準を指定します（たとえば、WCAG 2.0 の成功基準 1.4.3 - カラーコントラストの場合は「wcag143」）。

• Inspect and Highlight links: 「検査」リンクは DevTools で違反要素をハイライト表示します。二番目のリンク「ハイライト」は、Chrome ブラウザーのメインウィンドウ内でウェブページの要素を視覚的にハイライト表示します。

• Section Navigation: いくつかの追加の h2 見出しは、違反内のコンテンツパネルセクションを表しています。

• Target: ターゲットは違反した HTML 要素への CSS セレクターパスを識別します。

• HTML: 違反要素を含む HTML マークアップのスニペットが表示されます。

• Summary: 要約には「以下を修正する」という小セクションが含まれており、続いて修正案のリストが表示されます。特定の違反に応じて、修正案の正確なレイアウトと言葉が異なります。修正案のリストは、通常、正確なエラーを特定し、最も簡単な修正を提供するため、大部分のレポートや分析において重要な情報です。

複数違反のナビゲーションメモ

Previous と Next ボタンを使用する

分析で複数のルール違反が記録された場合、previous と next ボタンを使用して前後の違反に移動します。previous または next ボタンを選択すると、ほとんどのスクリーンリーダーが更新された「違反 x のうちの y」行を自動的にアナウンスします。たとえば、パネルが現在「10 のうちの違反 1」を表示している場合、next ボタンを選択すると NVDA は自動的に「10 のうちの違反 2」とアナウンスします。next および previous ボタンは、特定のルール違反への唯一のナビゲーション手段です。

個々の違反に移動する

ルール x の「10 のうちの違反 8」まで移動するには、ルール x をクリックし、next を7回クリックします。

最後の違反について

特定のルールの最後の違反が現在表示されている状態で next をクリックしても、次のルールの最初の違反は自動的に表示されません。実際、最後のルール違反が表示されているとき、next ボタンは無効になります。ルールのリストに戻り、次のルールを選択して検査してください。

すべてのルールのすべてのアクセシビリティ違反を確認します。すべてのルール違反を一か所で迅速に確認するために、レポートを CSV ファイルにエクスポートしてください。

カスタムルールを使用する

Rules パネルはメインメニューの4番目の選択です。axe Expert Extension のスキャン用にカスタムルールの JSON ファイルを作成した場合は、Rules パネルを使用してルールセットを追加してください。Rules パネルに追加すると、Rules タブからルールセットを選択できます。Custom Ruleset パネルには、Name for Custom Rules、Enter JSON、SAVE AND USE RULESET の2つのフォームフィールドとボタンがあります。

カスタムルールの追加

1. （Name for Custom Rules and Enter JSON）フィールドにカスタムルールセットの名前を指定してください。

名前には文字または数字のみが含まれていることを確認してください（ルールセット名の一部としてスペース、ダッシュ、または他の記号は許可されていません）。

2. JSON のルールを Enter JSON フィールドに入力または貼り付けてください。

3. SAVE と USE RULESET を選択してください。

Rules パネルには、無効な名前を指定した場合や無効な JSON を使用した場合に成功またはエラーメッセージが表示されます。ルールペインの左側サイドバーメニューのカスタムルールセットセクションでルールセットの名前を確認できます。対応するチェックボックスを選択して「ルールセットを削除」を選択することで、カスタムルールセットを削除できます。