Free Trial

Axe DevTools Linterの設定

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Axe DevTools Linterの設定についてのリファレンスガイド

Free Trial
Not for use with personal data

この記事は、Axe DevTools Linterの設定オプションについてのリファレンスを提供します。

概要

REST APIエンドポイントは設定にJSONを使用し、VS Code用のAxe Accessibility Linter拡張機能、JetBrainsプラグイン、Axe DevTools Linter Connectorは設定にYAMLを使用します。Axe DevTools Linter設定のJSONとYAMLの例がこのガイドに示されています。

設定例

次のYAML例は、Axe Accessibility Linter拡張機能（VS Code用）、JetBrainsプラグイン、またはAxe DevTools Linter Connectorとともに使用するためのrulesオプションを使用したシンプルな設定を示しています。

rules:
  html-has-lang: false

次の例は、Axe DevTools Linter RESTサービス用のrulesオプションが含まれる完全なリクエストオブジェクトとして、同じ設定を示しています。埋め込まれたconfigオブジェクトがハイライトされています。

{
  "source": "<html></html>",
  "filename": "file.html",
  "config": {    "rules": {      "html-has-lang": false    },    "exclude": [],
    "tags": []
  }
}

いずれの場合も、これらの設定により、html要素にlang属性が欠落しているときに、Axe DevTools Linterがアクセシビリティエラーを無視します。（詳細についてはhtml-has-langルールを参照してください。）

note

この記事におけるすべてのJSON例では、設定の参照位置を提供するためにconfigオブジェクトが含まれています。

次のセクションでは、各設定オプションを説明し、その使用例を示します。

設定ファイルの検索順序

Axe Accessibility Linter拡張機能（VS Code用）、JetBrainsプラグイン、Axe DevTools Linter Connector（パラメータなしで--configオプションを使用した場合）は、プロジェクトディレクトリツリー内のaxe-linter.yml設定ファイルを探して、カレントディレクトリと親ディレクトリを検索し、最初に見つかったものを使用します。有用な方法として、デフォルト設定を含む設定ファイルをプロジェクトのルートに配置し、必要に応じて異なるサブディレクトリの設定ファイルでそれを置き換えることが考えられます。また、ホームディレクトリに設定ファイルを置くことで、プロジェクトに設定ファイルがない場合にデフォルトで使用されます。

important

設定ファイルは統合されません。見つかった最初の1つだけが使用されます。

使用するaxe-linter.yml設定ファイルを見つける手順は次の通りです:

  1. 手順1で設定ファイルが見つからない場合は、親ディレクトリを検索して設定ファイルを見つけ、プロジェクトがホームディレクトリツリー内にある場合はホームフォルダで、プロジェクトがホームフォルダ外にある場合はルートディレクトリで検索を停止します。

  2. ステップ1で設定が見つからない場合、親ディレクトリを検索してaxe-linter.yml設定ファイルを見つけ、プロジェクトがホームディレクトリツリー内にある場合はホームフォルダで、外部の場合はルートディレクトリで停止します。

  3. ホームディレクトリにあるaxe-linter.yml設定ファイルを使用します（プロジェクトがホームフォルダ外のディレクトリやWindowsの別ドライブにある場合でも）。たとえば、以下が典型的なファイルです:

    • /home/検索は最初の/axe-linter.yml（Linux）
    • /Users/検索は最初の/axe-linter.yml（macOS）
    • C:\Users\検索は最初の\axe-linter.yml（Windows）

最初のaxe-linter.ymlファイルが見つかった時点で検索は終了します。

設定の種類

説明 設定の種類 説明
VS Code用Axe Accessibility Linter拡張機能またはJetBrainsプラグイン axe-linter.ymlという名前の1つのYAMLファイル 設定ファイルの検索順序を参照。
Axe Linter Connector axe-linter.ymlという名前の1つのYAMLファイル パラメータなしで--configオプションを使用したときの設定ファイルの検索順序の手順に従います。
Axe Linter Connector filenameという名前の1つのYAMLファイル --config filenameを使用したときに。
Axe Linter REST API JSON構成オブジェクト 構成オブジェクトを参照。

構成オプション

element

elementオプションを使うことで、コンポーネントの指定された属性値に基づいて生成される要素を変更できます。たとえば、カスタムコンポーネントがある場合、特定のケースではimg要素を生成し、他のケースではbutton要素を生成することで、より複雑な使用ケースを可能にします。

以下の設定例では、my-buttonコンポーネントのas属性によって、デフォルトのbuttonから生成される要素が変更されることを示しています。

YAML：

global-components:
  my-button:
    element: button
    attributes:
      - as: <element>

JSON：

{
  "config": {
    "global-components": {
      "my-button": {
        "element": "button",
        "attributes": [
          {
            "as": "<element>"
          }
        ]
      }
    }
  }
}

以下の使用例では、as属性が出力要素を指定しているため、デフォルトのbutton要素の代わりにimg要素を生成します。

<my-button as="img"></my-button>

その後出力されたimg要素はリンティングされ、alt属性が欠落していると判定されます。

exclude

excludeオプションは一致するファイルがリンティングされるのを防ぎます。ワイルドカードとグロブが使用できます。主にVS Code拡張機能やJetBrainsプラグインで使用され、RESTエンドポイントでは無視されます。

exclude: *.tmp

enterpriseId

オプションのenterpriseIdフィールドは、エンタープライズ属性のために使用分析イベントに添付される文字列を受け入れます。ほとんどのユーザーはこの値を設定する必要がありません。Dequeアカウント担当者によって要求されることがあります。このフィールドはオンプレミス導入では無視されます。

enterpriseId: 'acme-corp'

global-components

global-components設定オプションは、独自のカスタムコンポーネントやサードパーティのライブラリからのコンポーネントをネイティブHTML要素にマップする方法をAxe DevTools Linterに指示し、コンポーネントをネイティブHTML要素のようにリンティングできるようにします。たとえば、次の設定により、すべてのカスタムDqButtonコンポーネントがネイティブHTML button要素であるかのように扱われます。これにより、DqButtonのすべての属性がbuttonに自動的にマップされるため、すべてのDqButtonコンポーネントにアクセシブルネームが必要となります。

YAML：

global-components:
  DqButton: button

JSON：

{
  "config": {
    "global-components" {
      "DqButton": "button"
    }
  }
}

すべての属性をネイティブHTMLコンポーネントにマップしないコンポーネントの場合、attributesオプションを使用してアクセシビリティ準拠に必要な属性をリストできます。コンポーネントがサポートする属性をリストアップするだけでなく、属性をリネームすることもできます。3つの特殊な値があります:

  • aria-*の値は、すべてのaria-で始まる属性がそのままネイティブHTML要素にマップされていることをAxe DevTools Linterに示します。値の末尾にはアスタリスクが付きます。
  • <text>の値は、プロパティがネイティブHTML要素のコンテンツ（開きタグと閉じタグの間の値）を設定するために使われることをAxe DevTools Linterに示します。
  • <element>の値は、生成された要素がこの属性の値を取ることができ、指定された属性の値に応じて生成される要素を変更できることをAxe DevTools Linterに示します。

次のYAML例は、global-componentsで使用できるすべての値を示しています。

global-components:
  DqButton:
    element: button
    # Ignore all attributes on <DqButton> except the following:
    attributes:
      - role # Map the role attribute from <DqButton /> to <button />
      - aria-* # Map all attributes starting with aria-
      - action: type # <DqButton action="submit" /> maps to <button type="submit" />
      - label: <text> #  <DqButton label="ABC" /> emits <button>ABC</button>
      - as: <element> # <DqButton as="img" /> emits <img> instead of <button>. (You don't have to use *as* for the attribute name.)

configオブジェクト内の同等のJSONバージョンは次の通りです。

{
  "config": {
    "global-components": {
      "DqButton": {
        "element": "button",
        "attributes": [
          "role",
          "aria-*",
          {
            "action": "type"
          },
          {
            "label": "<text>"
          },
          {
            "as": "<element>"
          }
        ]
      }
    }
  }
}

アクセシビリティに関連する属性のみがattributesリストに含まれる必要があります。要素名は大文字小文字を区別します。キャメルケースは.jsxファイルでよく使用されますが、Vue、Angular、HTMLカスタム要素で使用されるケバブケースも使用できます。

カスタムコンポーネントマッピングの使用方法を示すチュートリアルについては、カスタムコンポーネントへのLintingを参照してください。

global-libraries

Axe DevTools Linterは、いくつかの人気のあるコンポーネントライブラリとフレームワークをサポートしています。

現在サポートされているライブラリは次のとおりです：

  • react-native
  • @mui/material
  • @deque/cauldron-react

ライブラリコンポーネントのリンティングを有効にするには、YAML設定ファイルのglobal-libraries配列にライブラリのNPMパッケージ名を追加します。

global-libraries:
  - '@mui/material'
  - '@deque/cauldron-react'
  - react-native
note

@が予約文字として解釈されるため、YAMLでは@mui/materialと@deque/cauldron-reactを引用符で囲む必要があります。

または、同等のJSON設定は以下に示されています：

{
  "config": {
    "global-libraries": [
      "@mui/material"
    ]
  }
}

グローバルライブラリのコンポーネントと同じ名前を持つコンポーネントは、そのライブラリコンポーネントとして扱われ、再エクスポートや再定義を行ってもマッピングが失われません。

詳細については事前設定されたコンポーネントライブラリを参照してください。

overrides

ファイルごとにAxe DevTools Linterの設定を変更するには、overrides設定オプションを使用します。同じファイルに対して複数のオーバーライドがある場合、順番に解決されます。つまり、最後にリストされたオーバーライドが最優先されます。

現在サポートされているのはlinterオーバーライドのみであり、一致したファイルに使用するリンターを変更するために使用されます。

overrides:
  - files: # An array or single string of filename(s) or glob pattern(s) that match this override setting
      - vue/**/*.html
    linter: vue # Specify that all files that match the pattern should be linted as Vue
  - files: php/**/*.html
    linter: null # Disable Axe Linter for these files

rules

設定のrulesオプションを使用して、ルールを個別に許可または禁止できます。各ルールはtrue（有効、エラーとして報告 - デフォルト）、false（無効）、warn（有効、警告として報告）に設定できます:

rules:
  some-rule: false   # turn off rule
  other-rule: true   # turn on rule (default)
  color-contrast: warn  # report violations as warnings instead of errors

JSON RESTリクエストのconfigオブジェクト内でも:

{
  "config": {
    "rules": {
      "some-rule": false,
      "other-rule": true,
      "color-contrast": "warn"
    }
  }
}

REST APIでrulesを使用する方法についてはrulesプロパティを参照してください。Axe DevTools Linterコネクタとrulesを使用する場合は、設定ファイルを参照してください。Axe DevTools Linterが従うルールを確認するにはアクセシビリティルールを参照してください。ルールのコレクションを処理から除外するためのtagsオプションの使用に関する詳細は、以下のタグを参照してください。

この設定ファイルを変更せずにソースファイルの特定の行のためのルールを抑制するには、インラインディレクティブでのLintingルールの抑制を参照してください。

tags

WCAG標準に基づいて関連付けられているルールのグループを許可または禁止するにはtagsオプションを使用します。

tags: # Disallow all rules other than WCAG 2.1 A, WCAG 2.1 AA, and best practices.
  - wcag21a
  - wcag21aa
  - best-practices

関連情報

Is this page helpful?

Help us improve this page

Still need help?