axe Expertでのスコーピング

ページ全体ではなく特定の部分だけをテストしたい場合は、axe Expert Extensionでスコープを定義してください。多くのウェブサイトには、サイトの多くのページで共通する要素や「テンプレート」エリアがあります。これを使用して、共通のテンプレートコンポーネントを特定してテストしたり、それを無視して共通コンポーネントに含まれないコンテンツに集中したりすることができます（例として、ヘッダー、フッター、ナビゲーションセクション）。バージョン1.1以降のaxe Expert Extensionは、スコープを定義する目的でCascading Style Sheet（CSS）セレクターを用いて設計されています。

XPath バージョンのサポート

axe Monitor v6.0以降では、CSSセレクターとXPath技術の両方がサポートされています。これは、以前にXPathのバージョン1.0がaxe Expert Extensionのバージョン1.0でサポートされていたためです。詳しい情報については、XML パス言語（XPath）バージョン1.0 - W3Cをご覧ください。

複数ページを分析する際に重複違反を回避するために、axe Expert Extensionのスコープ定義機能では、分析する部分をページの1つまたは複数の特定セクションに制限し、スコープとして選ばれていない共通の繰り返しコンテンツを無視する方法を提供します。スクリプト分析中にスコープ定義を定義することで、静的分析と同じ効果があります。つまり、スクリプトにページの定義された部分のみを含めることを意味します。このプロセスは、ページのコンテンツ領域をカバーするスコープ定義のみをテストする際に特に有用であり、テンプレートのテストで見つかる反復的な問題を排除します。

axe Monitorにログインせずにスコープ機能を有効にする

axe Monitorにログインせずに設定パネルでスコープ機能を表示するには、以下の手順を実行します。

1. axe Expert Extensionのオーバーフローメニューでスコープを選択し、設定タブにアクセスします。

   

2. 拡張機能は最初のアクセス時に空のaxe Expert Extension スコープタブを表示します。

   

   axe Monitorにログインしないでください。代わりに、記載されているオプションの説明と列の説明を使用して新しいプロジェクトレススコープを作成してください。

   

axe Monitorにログインしながらスコープ機能を有効にする

axe Monitorにログインしている間に設定パネルでスコープ機能を表示するには、以下の手順を実行します。

1. axe Expertパネルの設定タブでaxe Monitorにサインインします。詳しい詳細はaxe Monitorにサインインをご覧ください。

   After you sign in, the Project selection section appears on the Settings panel.

2. プロジェクトを選択するには、設定パネルのプロジェクトを選択メニューとボタンを使用してください。詳しい詳細はaxe Monitorプロジェクトを選択をご覧ください。

   スコープ定義機能は、プロジェクト選択および問題ダウンロードセクションの下に設定パネルに表示されます。

   

オプションの説明

一度有効にすると、axe Expert Extensionの設定パネルにスコープセクションが表示され、スコープを分析ラジオボタンオプショングループが表示され、そこから選択可能な3つのオプションがあります。

• ページ全体: ブラウザに読み込まれたページ全体の分析を行う際に定義されたスコープを精緻化するために選択します。
• コンテンツのみ: Select to refine the scope when performing an analysis on the Analyze panel to のみ the content items not a part of any templates defined in the Scope Definitions table below.
• テンプレートのみ: テスト中の読み込まれたページのコンテンツを除くすべて定義に対して、分析パネルで分析を行う際に精緻化するためこのオプションを選択します。

列の説明

スコープを分析するオプションセクションの下に、情報の6つの列を表示するスコープ定義の表セクションが表示されます。

• 名前: スコープ定義に明確で意味のある名前を付けるためのテキスト入力フィールドです（例えば、「ヘッダー」）。
• カテゴリ: ドロップダウンメニューのフィールドで、スコープの種類を指定します。オプションには「テンプレート 1-4」（ページ全体）や「コンテンツ 1-4」（ページ本文）があります。これらは関連するスコープ定義を一緒にグループ化し、簡単に並べ替えできるようにするために使用されます。
• URL パターン: テキスト入力フィールドで、サイトのメイン部分とは異なるテンプレートセットを使用するウェブサイトの一部または部分を指定します（例：ショッピングエリアまたは安全なメンバーサービスエリア）。ワイルドカードマッチを使用するパターンのページアドレスで、ドメイン名の直後に現れる文字列で定義されます（例：「/products」は「/products」およびその後に続く任意の文字列に一致します）。
• CSS セレクタ: ターゲットにするコンテンツのロケータを指定するためのテキスト入力フィールドです（例：/html/bodyはドキュメントの本文、またはhtmlでページ全体を指定）。一般的に、評価したい要素のidを知っている必要があります。例：
  • **/section[@id='content']**はsectionタグをid``"content"で識別します: <section id="content">
  • **/div[@id='header-panel']**はdivをid``"header-panel"で識別します: <div id="header-panel">
  • **/div[@id='right-column']**はdivをid``"right-column"で識別します: <div id="right-column">
  • **/html/body/section/div[2]/div[3]**は、idを持たないアイテムを識別します: div内の3番目のdivの内、sectionタグ内のbody内のhtml
• + フレーム: クリックして新しい行を追加し、選択したCSSセレクタロケータ（DOMノード領域データ）を入力できるテキスト入力フィールドを表示します。領域がフレーム内にある場合、プラス記号がマイナスに変わり、行を削除できるようになります。
• アクション: 空の行内で、保存ボタンがアクション列に表示されます。これにより、選択内容/エントリを新しいスコープ定義行として追加できます。行が追加された後、編集および削除ボタンが表示されます。

スコープ定義を追加

ページの解析対象部分をコンテンツ、テンプレート、またはページ全体で分類されたCSSセレクタまたはURLパターンに制限または制約したい場合は、いつでもこの手順に従ってください。スコープ定義を追加するには、axe Expertの設定パネル内のスコープセクションテーブルで5つの情報列を入力し、次に保存ボタンを選択します。

スコープ定義とaxe Monitorプロジェクトとの自動関連付け

Settingsパネルのスコープセクションは、axe Monitorとの接続が確立され、プロジェクトが選択された後にのみ表示されます。この手順に従ってスコープを定義して保存すると、選択したプロジェクトにスコープ定義が追加されます。その後、axe Expert Extensionでプロジェクトを再び選択すると、既存のスコープ定義がSettingsタブに自動的に読み込まれます。このプロジェクトを選択するたびに、このスコープ定義がaxe Monitorからaxe Expert Extensionに自動的にダウンロードされます。

追加されたスコープ定義は、Axe Expert ExtensionのAnalyzeパネルで行われる分析を、読み込んだページのスコープに一致する部分に限定します。

始める前に、スコープ定義機能を有効にする方法と、それぞれのオプションやテーブル列フィールドの目的を理解することが重要です。

1. 設定パネルのスコープセクションで、Name列に意味のあるテキストを入力します（例：'Header'）。

2. Category列でドロップダウンメニューオプションにアクセスし、リストから項目を選択します（例：'Template 1'）。

   Categoryドロップダウンリストが閉じ、選択内容がフィールド表示に反映されます。

3. URL patternフィールドで、必要に応じてドメイン名の後に続くテキスト文字列を入力します（例：'/html/head'）。

4. 必要ならば、+ Frameを選択すると新しい空のCSSセレクタフィールドが下に表示され、コンポーネントがフレーム内にある場合はセレクタを入力します。

   

5. CSS Selector(s)フィールドに、選択したツールで選択したセレクタを入力します（例：right-click > Copy > Copy selectorでソースコードをハイライトした後Elementsツールで）。

6. アクション列で、Saveを選択します。

   

追加したスコープがテーブルの新しい行として表示され、アクション列には編集または削除できるようにするボタンが表示されます。さらに、保存したスコープ行の下に新しい空行が表示され、別のものを指定して保存することもできます。

テーブルの上にあるAnalyze scopeセクションで希望のオプションを選択し、指定したスコープで定義された読み込まれたページの分析を実行できます。

スコープ定義を編集

既存のスコープ定義を変更するには、情報の5つのフィールドのうち1つ以上を変更してスコープ定義を編集します。axe Expertの設定パネルにあるScopeセクションテーブルのActions列でEditを選択すると、ロードされたページのAnalyzeパネルで解析する際にターゲットとなるスコープを変更できます。また、axe Monitorに保存されている内容もこれに応じて変更されます。

1. ScopeセクションテーブルのActions列でEditを起動します。

   

   各列のフィールドが編集可能になり、Actions列にSaveとCancelボタンが表示されます。

2. 希望に応じて1つ以上の列フィールドを変更し、Actions列でSaveを起動します。

   

保存した変更はテーブルの読み取り専用の行として表示され、axe Monitorと自動的に同期されます。

Attest Browser Extension v2.8以降: ANALYZE AGAINボタンは、解析スコープが保存されていない場合は無効になります。

It is too easy to overlook whether or not a user saved the scope of the current analysis before clicking ANALYZE AGAIN.

これを解決するために、SaveボタンをANALYZE AGAINおよびBackボタンの横に移動しました。ユーザーが新しいスコープ行を書くとANALYZE AGAINボタンが無効化され、Saveボタンが有効になります。ユーザーが新しいスコープを保存するとANALYZE AGAINボタンが再び有効化され、Saveボタンが無効化されます。これらの2つのボタンはaxe Expert Extension内で同時に有効になることはありません。

スコープ定義を削除

Delete a scope definition to remove a row from the Scope section table on the Settings panel. This action also removes the scope definition from axe Monitor.

Actions列で、削除したい既存のスコープ定義の行にあるDeleteを選択します。

行はスコープ定義セクションのテーブルから削除されます。