RESTエンドポイントを使用したカスタムコンポーネントのリンティング

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

RESTエンドポイントを使用してカスタムコンポーネントをリンティングするためのAxe DevTools Linterの使い方ガイド

Not for use with personal data

この記事では、Axe DevTools Linter RESTエンドポイントを使用して、カスタムコンポーネントのアクセシビリティエラーを見つける方法を紹介します。

important

この記事は、Axe DevTools Linter RESTエンドポイントの利用者向けです。VS Code用のAxe Accessibility Linter拡張機能やJetBrainsのプラグインを使用している場合は、 VS Code用のAxe Accessibility Linter拡張機能やJetBrainsのプラグインによるカスタムコンポーネントのリンティングをご覧ください。

前提条件

Axe DevTools LinterのSaaSバージョンまたはオンプレミスバージョンへのアクセスが必要です。詳しくは、 Axe DevTools Linter SaaS APIキーの取得または Axe DevTools Linterオンプレミスエディションのセットアップをご覧ください。

また、以下の条件を満たすRESTツールが必要です。

POSTリクエストを送信できる
ヘッダーを追加できる（Axe DevTools LinterのSaaSバージョン用） Authorization JSONリクエストボディを作成できる
カスタムコンポーネントリンティングのガイド

Axe DevTools Linterを使用してソースコードをリンティングする際、HTTPリクエストにソースと設定を含むJSONボディを提供します。たとえば、次のHTMLは

要素の使用例を示しています。 img （これは、実際の実世界の例ではなく、単にリンティングを示すために大幅に簡略化された例です。）

<img src="path/to/image.jpg"/>

Axe DevTools Linterに送信するリクエストのJSONボディは次のようになります。

このJSONをREST POSTリクエストとしてAxe DevTools Linterに送信します。

{ 
  "source": "<img src=\"path/to/image.jpg\"/>",
  "filename": "image-demo.html"
}

note

エンドポイントについて詳しくは、 /linter-source リントエンドポイントのリファレンスドキュメントをご覧ください。このガイドに従うには、JSONリクエストボディを持つPOSTリクエストを送信できる任意のRESTツールを使用できます。次の例は、Axe DevTools Linterに送信されるリクエストボディと、Axe DevTools Linterが見つけたアクセシビリティエラーを示すJSONレスポンスボディを示しています。

この

要素には img 属性がないため、Axe DevTools Linterからアクセシビリティエラーを受け取ります。 alt カスタム画像コンポーネント

{
  "report": {
    "errors": [
      {
        "column": 1,
        "description": "Ensures <img> elements have alternate text or a role of none or presentation",
        "endColumn": 31,
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/image-alt?application=axe-linter",
        "lineContent": "<img src=\"path/to/image.jpg\"/>",
        "lineNumber": 1,
        "linterType": "html",
        "ruleId": "image-alt"
      }
    ]
  }
}

次のサンプルは、

カスタムコンポーネントの例を示しています。 custom-image HTMLをAxe DevTools LinterにPOSTリクエストとして送信するためには、以下の内容をJSONボディとして使用します。

<custom-image src="path/to/image.jpg"></custom-image>

サーバーは、

{
  "source": "<custom-image src=\"path/to/image.jpg\"></custom-image>",
  "filename": "custom-image.html"
}

との間にマッピングがないため、アクセシビリティエラーがないと応答します。 custom-image , そのためAxe DevTools Linterは img属性が欠落していることを指摘できません。 alt マッピング

{
  "report": {
    "errors": []
  }
}

へのマッピング `custom-image` もし `img`

へのマッピングを提供すれば、 custom-image Axe DevTools Linterはカスタムコンポーネントを標準のHTML要素としてマップし、アクセシビリティエラーを見つけることができます。 imgマッピングを指定するには、 global-components 設定オプション（ config オブジェクトの一部）を使用します。

{
  "config": {
    "global-components": {
      "custom-image": "img"
    }
  },
  "filename": "c-image.html",
  "source": "<custom-image src=\"path/to/image.jpg\"></custom-image>\n\n"
}

Axe DevTools Linterは以下の応答を返します。

{
  "report": {
    "errors": [
      {
        "column": 1,
        "description": "Ensures <img> elements have alternate text or a role of none or presentation",
        "endColumn": 54,
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/image-alt?application=axe-linter",
        "lineContent": "<custom-image src=\"path/to/image.jpg\"></custom-image>",
        "lineNumber": 1,
        "linterType": "html",
        "ruleId": "image-alt"
      }
    ]
  }
}

同じマッピングを以下のいずれかの構文で示すこともできます。

{
  "config": {
    "global-components": {
      "custom-image": {
        "element": "img"
      }
    }
  }
}

または、 element を省略して elとしても大丈夫です。

{
  "config": {
    "global-components": {
      "custom-image": {
        "el": "img"
      }
    }
  }
}

important

上記のようにエレメントマッピングを使用する場合、カスタムコンポーネントからのすべての属性が発行されたエレメントにコピーされ、その発行されたエレメントがリンティングされます。

アクセシビリティの問題を修正する

属性を alt に追加することで、 custom-image アクセシビリティの問題を修正できます（要求のJSONボディとともに以下に示します）。

{
  "config": {
    "global-components": {
      "custom-image": "img"
    }
  },
  "filename": "c-image.html",
  "source": "<custom-image src=\"path/to/image.jpg\" alt=\"alt text\"></custom-image>\n\n"
}

サーバーは、以下の空の errors 配列を応答します。あなたのカスタムコンポーネントには必要な alt 属性があるためです（ すべての 他の属性と一緒に、 custom-image コンポーネントから発行された img エレメントにコピーされました）。

{
  "report": {
    "errors": []
  }
}

属性のマッピング `alternative-text`

カスタム画像コンポーネントが代わりに別の属性を使用して代替テキストを示す場合、その属性を設定で指定できます。たとえば、 custom-image コンポーネントが alternative-text 属性を使用していると仮定します。 alt以下に示すように：

<custom-image src="path/to/image.jpg" alternative-text="alt text"></custom-image>

この場合、 alternative-text 属性と alt 属性との間にマッピングを指定できます。 attributes 以下に示すJSONリクエストボディ内の配列とともに：

{
  "config": {
    "global-components": {
      "custom-image": {
        "element": "img",
        "attributes": [
          {
            "alternative-text": "alt"
          }
        ]
      }
    }
  },
  "filename": "c-image.html",
  "source": "<custom-image src=\"path/to/image.jpg\" alternative-text=\"alt text\"></custom-image>\n\n"
}

note

設定は、1つのカスタムコンポーネントを1つのHTMLエレメントにマッピングする以前の方法とは少し異なることに注意してください。エレメントのみを使用する場合、文字列（"custom-image"）から別の文字列（"img"）へのマッピングを使用します。 global-components 配列を含むと、 attributes プロパティを使用して発行されるHTMLエレメントを指定する必要があります（または element ）。 el

Axe DevTools Linterは以下の応答をします。これは、 alt-text ルールがあなたの alternative-text 属性によって満たされているためです：

{
  "report": {
    "errors": []
  }
}

important

設定に配列を指定したため、サーバーがマッピングするときに、 attributes custom-image から img、 指定された属性のみが attributes 配列 にコピーされ、発行されたHTMLエレメントに反映されます。

また、 attributes を次のように省略して表記することもできます。 attrs

{
  "config": {
    "global-components": {
      "custom-image": {
        "attrs": [
          {
            "alternative-text": "alt"
          }
        ],
        "element": "img"
      }
    }
  }
}

特別な属性値: `<text>`、 `aria-*` と `<element>`

次のように custom-button コンポーネントを使用すると仮定します。

<custom-button aria-controls="expand-region" aria-expanded="false" aria-colindex="1" message="Show Region"></custom-button>

（カスタムボタンは、ここでは含まれていないJavaScriptとCSSを使用して、 divを隠したり表示したりします。）

この使用法には2つの問題があります：

この custom-button コンポーネントを直接 button 要素には表示されるべきテキストコンテンツがありません。しかし、コンポーネント作成者の意図としては、 message 属性がテキストコンテンツとして使用されるべきです： <button> 属性の message 値 </button>
生成された button 要素には暗黙の役割があり、 buttonため、 aria-colindex 属性は不正確で削除されるべきです。

上記のコードをAxe DevTools Linterに送信すると（ global-components マッピングなしで）、次の応答が得られます：

{
  "report": {
    "errors": []
  }
}

特別な `<text>` 値

最初の問題（ button 要素のテキストコンテンツが message 属性から来る）を解決するために、特別な <text> 値を使用して、属性を生成された要素のテキストコンテンツにマッピングできます。この場合、 message 属性のテキストを生成された button 要素のテキストコンテンツにコピーする必要があります。

Axe DevTools Linterに、 message 属性をHTMLのテキストコンテンツと見なすよう要求を設定するには、 button 要素用として、特別な <text> 値を使用し、次のリクエストを送信できます：

{
  "config": {
    "global-components": {
      "custom-button": {
        "attributes": [
          {
            "message": "<text>"
          }
        ],
        "element": "button"
      }
    }
  },
  "filename": "aria-button.html",
  "source": "<custom-button aria-controls=\"expand-region\" aria-expanded=\"false\" aria-colindex=\"1\" message=\"Show Region\"></custom-button>\n"
}

あなたが message 属性を定義したため、 <text>Axe DevTools Linterに、その属性をHTMLのテキストコンテンツを置き換えるものとして考慮するように指示しました button 要素の message 属性の値として。

残念ながら、 attributes 配列を使用すると、生成された button 要素に渡された唯一の属性は message 属性のみであり、 attributes 配列にない属性は渡されません。これにより、不正確な aria-colindex がサーバーによって検出されませんでした。

を使用して `aria-*`

特別な aria-* 値を使用して、次のようにすべてのARIA属性を渡すことができます：

{
  "config": {
    "global-components": {
      "custom-button": {
        "attributes": [
          {
            "message": "<text>"
          },
          "aria-*"
        ],
        "element": "button"
      }
    }
  },
  "filename": "aria-button.html",
  "source": "<custom-button aria-controls=\"expand-region\" aria-expanded=\"false\" aria-colindex=\"1\" message=\"Show Region\"></custom-button>\n"
}

サーバーは次のように応答します：

{
  "report": {
    "errors": [
      {
        "column": 1,
        "description": "Ensures ARIA attributes are allowed for an element's role",
        "endColumn": 124,
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr?application=axe-linter",
        "lineContent": "<custom-button aria-controls=\"expand-region\" aria-expanded=\"false\" aria-colindex=\"1\" message=\"Show Region\"></custom-button>",
        "lineNumber": 1,
        "linterType": "html",
        "ruleId": "aria-allowed-attr"
      }
    ]
  }
}

このエラーは、 button 要素が暗黙の role="button" を持ち、 aria-colindex ボタンと共に使用するのは無効だからです。 aria-*を使用すると、すべてのARIA属性が生成された要素にコピーされます。これには無効な aria-colindex 属性のコピーも含まれます。

`<element>`

複雑なコンポーネントでは、特定のケースでデフォルトの要素とは異なるHTML要素を発行したい場合があります。例えば、通常はボタンとして動作し、他の状態ではプレースホルダー画像として動作するボタンコンポーネントがあるかもしれません。 <element> 値を使用すると、カスタムコンポーネントに発行される要素を決定する属性を指定できます。

{  
  "config": {
    "global-components": {
      "my-button": {
        "element": "button",
        "attributes": [
         {
          "use": "<element>"
         },
         'src',
         'alt'
        ]
      } 
    }
  },

  "filename": "aria-button.html",
  "source": "<my-button use=\"img\" src=\"globe.jpg\"></my-button>"
}

この場合、 use コンポーネントの my-button 属性が発行する要素を示します。生成された img 要素には alt 属性が含まれていないため、エラーが発生します：

{
  "report": {
    "errors": [
      {
        "ruleId": "image-alt",
        "helpURL": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axe-linter",
        "description": "Images must have alternative text",
        "lineNumber": 1,
        "column": 1,
        "linterType": "html",
        "lineContent": "<my-button use=\"img\" src=\"globe.jpg\"></my-button>",
        "endColumn": 50
      }
    ]
  }
}

すべての属性を暗黙的に引き継ぐ

マッピングが attributes 配列を使用しない要素マッピングのみを使用した場合、すべての属性はデフォルトで button 要素にコピーされることに注意してください。以下に示します。

{
  "config": {
    "global-components": {
      "custom-button": "button"
    }
  },
  "filename": "aria-button.html",
  "source": "<custom-button aria-controls=\"expand-region\" aria-expanded=\"false\" aria-colindex=\"1\" message=\"Show Region\"></custom-button>\n"
}

このサーバー応答を使用すると、すべての属性が custom-button のアクセシビリティ問題がチェックされ、2つのエラーが見つかることがわかります。

{
  "report": {
    "errors": [
      {
        "column": 1,
        "description": "Ensures ARIA attributes are allowed for an element's role",
        "endColumn": 124,
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr?application=axe-linter",
        "lineContent": "<custom-button aria-controls=\"expand-region\" aria-expanded=\"false\" aria-colindex=\"1\" message=\"Show Region\"></custom-button>",
        "lineNumber": 1,
        "linterType": "html",
        "ruleId": "aria-allowed-attr"
      },
      {
        "column": 1,
        "description": "Ensures buttons have discernible text",
        "endColumn": 124,
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/button-name?application=axe-linter",
        "lineContent": "<custom-button aria-controls=\"expand-region\" aria-expanded=\"false\" aria-colindex=\"1\" message=\"Show Region\"></custom-button>",
        "lineNumber": 1,
        "linterType": "html",
        "ruleId": "button-name"
      }
    ]
  }
}

上記の例は、カスタムコンポーネントをリントし始める際の実用的な最初のステップとして、要素マッピングから始め（これにより、すべての属性を生成される標準HTML要素にコピーし）、その後、どの属性を設定に追加する必要があるかを確認することであることを示しています（カスタムコンポーネントの属性を他の属性にマッピングするべきか、あるいは <text> や aria-*を使用する必要があるかどうか）。

デフォルト属性

デフォルト属性を使うと、1つの属性を別の属性にマッピングするのではなく、設定ファイル内で属性の値を設定できます。例えば、以下のサンプル設定では custom-menu コンポーネントが li 要素にマッピングされ、 role が メニューとして設定されています。

{
  "config": {
    "global-components": {
      "custom-menu": {
        "element": "li",
        "attributes": [
          {
            "role": {
              "name": null,
              "default": "menu"
            }
          }
        ]
      }
    }
  }
}

なぜなら role 属性には設定ファイルでデフォルト値として メニューが設定されているため、ユーザーはコードで role コンポーネントを使用するときに custom-menu 属性を指定する必要がありません。つまり、あなたのカスタムコンポーネントの実装は、出力要素でこれらの属性を作成し、それらの値を設定します。ユーザーがコンポーネントを使用するときにそれらを設定する必要はありません。

オプションで、 name 値はコンフィギュレーションで null に設定され、Axe DevTools Linterがユーザーが role で指定した custom-menu 属性をリントコードで無視します。

note

と指定した値は文字列である必要があります。 default

カスタムコンポーネント違反の分析

多数のカスタムコンポーネントが設定されている場合、応答のどの違反がカスタムコンポーネントマッピングから来たものか、標準HTMLから来たものかを判別するのは難しいです。リクエストボディに "properties": ["customName"] を追加すると、Axe DevTools Linterは、カスタムマッピングされたコンポーネントからのエラーごとに customName プロパティを追加します。

上記の custom-image の例を基に、リクエストに "properties": ["customName"] を追加すると：

{
  "properties": ["customName"],
  "config": {
    "global-components": {
      "custom-image": "img"
    }
  },
  "filename": "c-image.html",
  "source": "<custom-image src=\"path/to/image.jpg\"></custom-image>\n\n"
}

応答には、どのカスタムコンポーネントが違反を引き起こしたかを示す customName プロパティがエラーに含まれます。

{
  "report": {
    "errors": [
      {
        "column": 1,
        "customName": "custom-image",
        "description": "Ensures <img> elements have alternate text or a role of none or presentation",
        "endColumn": 54,
        "helpURL": "https://dequeuniversity.com/rules/axe/4.4/image-alt?application=axe-linter",
        "lineContent": "<custom-image src=\"path/to/image.jpg\"></custom-image>",
        "lineNumber": 1,
        "linterType": "html",
        "ruleId": "image-alt"
      }
    ]
  }
}

カスタムマッピングの一部でないコンポーネントからのエラーには customName プロパティは含まれません。

RESTエンドポイントを使用したカスタムコンポーネントのリンティング

前提条件

Axe DevTools Linterを使用してソースコードをリンティングする際、HTTPリクエストにソースと設定を含むJSONボディを提供します。たとえば、次のHTMLは

次のサンプルは、

へのマッピング `custom-image` もし `img`

アクセシビリティの問題を修正する

属性のマッピング `alternative-text`

特別な属性値: `<text>`、 `aria-*` と `<element>`

特別な `<text>` 値

を使用して `aria-*`

`<element>`

すべての属性を暗黙的に引き継ぐ

デフォルト属性

カスタムコンポーネント違反の分析

関連情報

Is this page helpful?

Help us improve this page

Try

Still need help?

RESTエンドポイントを使用したカスタムコンポーネントのリンティング

前提条件

Axe DevTools Linterを使用してソースコードをリンティングする際、HTTPリクエストにソースと設定を含むJSONボディを提供します。たとえば、次のHTMLは

次のサンプルは、

へのマッピング custom-image もし img

アクセシビリティの問題を修正する

属性のマッピング alternative-text

特別な属性値: <text>、 aria-* と <element>

特別な <text> 値

を使用して aria-*

<element>

すべての属性を暗黙的に引き継ぐ

デフォルト属性

カスタムコンポーネント違反の分析

関連情報

Is this page helpful?

Help us improve this page

Try

Still need help?

へのマッピング `custom-image` もし `img`

属性のマッピング `alternative-text`

特別な属性値: `<text>`、 `aria-*` と `<element>`

特別な `<text>` 値

を使用して `aria-*`

`<element>`