カスタムルールの使用

axe Expert 拡張機能におけるカスタムルールの概要

When you want to have the axe Expert tool analyze web pages and applications against rules that are specific to your organization's unique needs, it is possible to do so with the Custom Rules functionality on the Rules panel. Clicking the Rules link item in the axe Expert main menu (drop-down near the axe Expert Extension logo at top of left pane) causes a Rules panel to appear that offers an Add custom ruleset button for displaying a form on the right pane for submitting a set of custom rules. The simple form consists of two text entry fields and an action button that allow you to set up custom rules that can be selected for running in the automated engine when a loaded page is analyzed on the Analyze panel.

axe Expert のルールセットでページを解析するのと同様に、カスタムルールの違反が見つかった場合は、その結果が表示され、カスタムルールセット内で指定した情報（ターゲット、HTMLソース、修正概要、詳細情報ヘルプリンクなど）が提供されます。標準ルールで利用可能な他のアクションオプションもカスタムルール違反に適用されます（検査、ハイライト、エクスポート、アップロードなど）。許可されているカスタムルールセットは一度に5つまでです。

1. ルールセット追加ボタン: Custom rulesets のセクション内の左側ペインのRulesパネルで、+Add a rulesetコマンドを実行すると、右側のペインにカスタムルールのセットを送信するためのフォームが表示されます。
2. カスタムルールの名前（英数字のみ）：これは、設定タブの標準セクションに表示されるルールセットの名前になります。規約（英数字、スペースなし）を守るとともに、選択肢として分かりやすく意味のある名前にすることが重要です。
3. JSON を入力 rules.textareaInstructions：JavaScript オブジェクト表記 (JSON) は、Firefox の HTML 2.0 ブラウザー拡張機能で動作させるために内容が従う必要のあるテキストベースの標準です。詳細については、以下の例をご覧ください。
4. ルールセットの保存と使用 ボタン：Rulesパネルの左側サイドバーのメニューで選択可能なオプションとしてカスタムルールを登録します。詳細についてはルールセットを選択をご覧ください。

カスタムルールの例

以下のサンプルコードは、正しくフォーマットされた axe Expert カスタムルール JSONファイルの実用的な例として機能します。

{
  "checks": [
    {
      "id": "test",
      "options": ["test"],
      "evaluate": "function() { return false; }",
      "metadata": {
        "impact": "minor",
        "messages": {
          "pass": "how did you pass",
          "fail": "there is no way to pass"
        }
      }
    }
  ],
  "rules": [
    {
      "id": "test",
      "metadata": {
        "description": "Will always fail",
        "help": "There is no way to make this pass! It is for testing",
        "helpUrl": "https://foo.com/bar"
      },
      "selector": "html",
      "any": [],
      "all": ["test"],
      "none": [],
      "tags": ["wcag2aa"]
    }
  ]
}

axe Monitor プロジェクトからのカスタムルールセット: axe Monitor にサインインしてプロジェクトを選択すると、そのプロジェクトに関連するカスタムルールセットがRulesパネルに自動的に読み込まれ、選択可能な状態になります。

カスタムルールを送信

将来の使用のためにカスタムルールを axe Expert Extension に送信したい場合は、以下の簡単なステップを踏んでください。カスタムルールの送信は、将来の選択目的のためにルールセットの名前を指定し、正しくフォーマットされた JSON テキストファイルの内容をテキスト入力フィールドに貼り付け、保存して使用するボタンをクリックして行います。

カスタムルールを送信するには：

1. DevTools を開いて axe Expert を選択します。axe Expert メニューのメインからルールを選択します。

2. 左側のペインで、メニューのカスタムルールセットセクションの「+ルールセットを追加」を選択します。ルールセットフォームが右側のペインに表示されます。

3. カスタムルールの名前フィールドに、スペースを含まない希望の英数字の名前を入力します。

   これはRulesパネルの左側ペインのカスタムルールセットセクションに表示されるため、名前は選択の際に意味があり、わかりやすいものであるべきです。

4. JSON の入力フィールドに、仮想クリップボードからカスタムルールの .json テキストファイルの内容を貼り付けます。表示可能領域を広げるために、必要に応じてフィールドの右下隅をつかんでドラッグします。

5. SAVE AND USE RULESETを選択します。

   

   入力した名前が左側ペインのカスタムルールセットセクションに表示され、右側ペインの「ルールセット：」フィールドの上にも表示されます。また、右側ペインのフォームの下部に、ルールセットを削除するか使用するボタンが表示されます。

   右側のペインでAnalyze nowを選択します。

   

   カスタムルールセットの名前が左側サイドバーのルールメニューにチェックマークと共に表示され、選択したルールセットとして分析時に使用されることを示します。

アクセシビリティルール違反のページを解析する

axe Expert Extension でのアクセシビリティ解析は、解析パネルに移動して解析ボタンをクリックすることで開始されます。解析プロセスは、ページで見つかったアクセシビリティルール違反の合計数を示すメッセージと、特定のルール違反および特定された違反の合計数を表示する結果セクションを生成します。左の結果ペインの行をアクティブにすると、右側のメインコンテンツペインに詳細が表示されます。この操作により、各選択ルールにおける違反を次へ進む矢印ボタンを表示することもできます。

ルール違反のページを解析する方法：

1. axe Expert タブを選択した状態で、左ペインでメイン メニューのaxe Expert Extension ロゴの右にある [Analyze] を選択します。Analyze パネルが表示されます。

2. コンテンツペインでANALYZEをアクティブにします。開発者ツールをどのようにドックしたかや、ブラウザウィンドウをどのようにリサイズしたかによって、通常はAnalyzeパネルの左ペインの中央にあります。

   Analyzeペインは一時的にAnalyzing...please waitと表示されるステータスメッセージを表示することがありますが、ページの選択されたルールセットに対する解析が完了するまでの間だけです。

   axe Expert Extension のロゴの下には、発見された違反の総数と手動で確認する必要がある問題数が表示されます。さらに、合計数の右側には表示ドロップダウンコンテキストメニューとRun againリンクが表示されます。各ルールの短い名前を表示する2列のテーブルが、表示ドロップダウンコンテキストメニューの下に表示されます。右側の列には、見つかった違反の数が表示されます。

   

3. rules violatedセクション（左ペイン）でrule行をクリックします。

   

   右側のコンテンツペインが更新され、そのルールの最初の違反が表示されます。コンテンツ表示には、Target、HTML、およびSummary (How to Fix the Problem)の情報セクション、一緒にInspectとHighlightのリンク、（Export、Scope、Upload、Downloadのオプションを含む）コンテキストメニューが含まれ、右下には左方向に展開する矢印ボタンがあり、選択されたルールの適用可能な標準（ルールセット）が表示されます。違反内容表示ペインに表示される各コンポーネントの詳細については、Analyzeトピックの概要に記載された説明を参照してください。左上部にある違反ナビゲーション「前へ」<および「次へ」>のボタンは、選択されたルール違反間を移動できるようになります。さらに、違反を含む関連するHTMLがテストされたページで自動的にハイライト表示されます。

4. 次へ (>) をクリックして、現在選択されているルールの次の違反に進むか、左の違反ルール結果ペインから別のルールを選択します。

   

カスタムルールセットを削除する

Rulesパネルからカスタムルールセットが不要になったときに削除します。Rulesパネルで削除するルールを選択し、削除ボタンをクリックします。

将来的にカスタムルールセットで一部のコンテンツを再利用したい場合は、削除前にJSONファイルからコンテンツを保存しておくことをおすすめします。この操作は恒久的で元に戻せない削除を行います。

カスタムルールセットを削除するには：

1. Rulesパネルの左ペイン内Custom rulesetsセクションのオプションリストの一番下で、削除するセットが選択されている（チェックされている）ことを確認します。
2. DELETE RULESETをクリックします。

セットは左側のペインメニューから削除され、選択できなくなります。