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の例は、 rules オプションを使用して、VS Code用Axe Accessibility Linter拡張機能、JetBrainsプラグイン、またはAxe DevTools Linter Connectorと共に使用する簡単な設定を示しています：

rules:
  html-has-lang: false

次の例は、 rules オプションが埋め込まれた完全なリクエストオブジェクトとしてAxe DevTools Linter RESTサービスの同じ設定を示しています： 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 オブジェクトは設定の参照位置を提供するために含まれています。

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

複数の設定ファイル

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

設定ファイルを見つけるために使用される手順は： axe-linter.yml 現在のディレクトリ内の設定ファイルを使用します（VS Code、JetBrains IDEで編集されているファイルを含むディレクトリ、またはAxe DevTools Linter Connectorを使用したコマンドプロンプトの現在のディレクトリ）。

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

  2. ホームディレクトリにある axe-linter.yml 設定ファイルを使用します（プロジェクトがホームフォルダ外やWindows上の別のドライブにあるディレクトリに配置されている場合であっても）。例えば、通常使用されるファイルは以下の通りです：

  3. *username* axe-linter.yml （Linux）

    • /home/*username*/axe-linter.yml （macOS）
    • /Users/*username*/axe-linter.yml （Windows）
    • C:\Users\検索は最初の\axe-linter.yml ファイルが見つかると停止します。

Axe DevTools Linterの設定の概要 axe-linter.yml 製品

設定の種類

説明 Type of Configuration Description
VS Code用Axe Accessibility Linter拡張機能またはJetBrainsプラグイン という名前の1つ以上のYAMLファイル axe-linter.yml 参照： 複数の構成。
Axe Linter Connector という名前の1つ以上のYAMLファイル axe-linter.yml 手順に従う： 複数の構成 を --config パラメータなしで使用する場合。
Axe Linter Connector という名前の1つのYAMLファイル filename との組み合わせ： --config filename。
Axe Linter REST API JSON構成オブジェクト 参照： 構成オブジェクト。

構成オプション

element

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

以下の構成例では、 as 属性が my-button コンポーネント上の既定の生成要素を変更できることを示しています： button：

YAML：

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

JSON：

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

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

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

生成された img 要素はリンティングされ、不足している alt 属性が検出されます。

exclude

この exclude オプションは、一致するファイルがリンティングされないようにします。ワイルドカードとグロブを使用できます。その使用は主にVS Codeの拡張機能やJetBrainsプラグインのためのものであり、RESTエンドポイントでは無視されます。

exclude: *.tmp

global-components

この global-components 構成オプションは、Axe DevTools Linterが独自のカスタムコンポーネントまたはサードパーティライブラリからのコンポーネントをネイティブHTML要素にどのようにマッピングするかを指示し、コンポーネントをネイティブ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.)

同等のJSONバージョン（ config オブジェクト内）は次のとおりです：

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

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

カスタムコンポーネントマッピングの使用方法についてのウォークスルーは、 カスタムコンポーネントのリンティングを参照してください。

global-libraries

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

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

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

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

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

または、 config JSON RESTリクエスト内のオブジェクトで：

{
  "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?