Axe DevTools Linter REST API リファレンス
Axe DevTools Linter が提供する REST エンドポイントのリファレンスガイド
Axe DevTools Linter は、REST API を使用してアクセシビリティの問題をコードでチェックすることができます。リクエストのボディに JSON オブジェクトとしてチェックしたいソース行を含む HTTP リクエストオブジェクトを作成すると、サーバーは検出したアクセシビリティの問題を示すレスポンス JSON オブジェクトを返します。
サーバーは、React(.js、.jsx、.ts、.tsx)、Vue(.vue)、Angular(.component.html)、HTML(.html、.htm、.xhtml)、LiquidJS(.liquid)、HTL(.htl)、Markdown(.md、.markdown)ファイルを確認できます。
REST エンドポイント
サーバーは6つのRESTエンドポイントを提供します。最初のエンドポイント(/lint-source)はPOSTリクエストに応答し、コードのアクセシビリティ問題をチェックします。2番目のエンドポイント(/status)はGETリクエストに応答し、サーバーが利用可能かどうかを示し、サーバーが聞いていることを示す200の応答コードを返します。3番目のエンドポイント(/healthcheck)はGETリクエストに応答し、サーバーが稼働しているかどうかを示し、実行中のサーバーのバージョン番号を返します。残りの3つのエンドポイントは、SaaSエディションユーザーが企業全体(/billing/enterprise)、ユーザー(/billing/user)、APIキー(/billing/key)の使用情報を取得することを可能にします。
REST エンドポイントは以下の通りです:
| エンドポイント | リクエストタイプ | 注釈 |
|---|---|---|
/lint-source |
POST |
|
/status |
GET |
非推奨: 将来的にAxe DevTools Linterのバージョンから削除される予定です |
/healthcheck |
GET |
|
/billing/enterprise/:year/:month |
GET |
SaaS サーバーでのみ有効 |
/billing/user/:year/:month |
GET |
SaaS サーバーでのみ有効 |
/billing/key/:year/:month |
GET |
SaaS サーバーでのみ有効 |
リントエンドポイント(/lint-source)
リントエンドポイントは主要なサービスエンドポイントです。これを使用して、Axe DevTools Linterにコードを送信し、アクセシビリティ問題を確認できます。POSTリクエストを受け付け、チェックするコードが含まれているJSONボディを含みます。
リクエスト
このエンドポイントを使用するには、サーバーのリントエンドポイントにPOSTリクエストを作成します。以下の例を参照してください:
POST /lint-sourceまた、リクエストのボディがJSONオブジェクトを含んでいることをサーバーに伝えるためにContent-Typeヘッダーを含める必要があります。
Content-Type: application/jsonAxe DevTools Linter SaaSを使用している場合は、以下のようにAPIキーを含むAuthorizationヘッダーを含める必要があります:
Authorization: <YOUR API KEY>APIキーの取得方法についてはAxe DevTools Linter SaaS APIキーの取得で詳しく学べます。
リクエストのボディには、チェックしたいコード(JSON オブジェクト内)が含まれている必要があります。例えば、以下の JSON オブジェクトはマークダウンのサンプルをチェックします:
{
"source": "# heading\n### Another heading\n",
"filename": "file.md"
}上記のMarkdownサンプルにはアクセシビリティエラーがあります:最初の見出し(レベル1の見出し)と2番目の見出し(レベル3の見出し)の間にギャップがあります。このエラーに対するサーバーの応答を見るには、以下のレスポンスセクションをご覧ください。
JSON リクエストオブジェクト
次の表は、JSON リクエストオブジェクトに使用されるプロパティを示しています:
| 名前 | タイプ | 説明 |
|---|---|---|
source |
文字列 | チェックしたいコードです。引用符や行末をエスケープする必要があります。 |
filename |
文字列 | コードのファイル名。サーバーはファイル名の拡張子を使用してsourceに含まれるコードの種類を判断し、使用するリンターを選択します。 |
config |
LinterConfig |
リントの設定を行うためのオプションの設定オブジェクトです。詳細についてはconfigオブジェクトを参照してください。 |
language |
文字列 | コードをチェックするために使用するリンターを指定するためのオプションの文字列。 |
properties |
文字列の配列 | レスポンス内の各errorオブジェクトに含める追加プロパティのオプションの配列です。現在サポートされている値は"customName"のみです。詳細はerrorオブジェクトのcustomNameでご覧ください。 |
リクエストJSONオブジェクト内のsource文字列は、チェックしたいコードです。引用符と改行はすべてエスケープする必要があります(バックスラッシュを前に付けてください)。
language文字列は次のいずれかの値を取ることができます:
| 言語 | 説明 |
|---|---|
md |
マークダウン |
jsx |
JavaScript構文拡張(HTMLとJavaScriptの混在を許可) |
html |
HTML |
vue |
Vue.js |
tsx |
TypeScript構文拡張(jsxのような) |
angular |
Angular |
htl |
HTL(Adobe Experience Manager) |
サーバーはfilenameプロパティとlanguageプロパティを使用して、どのリンターを使用するかを判断します。通常、Axe DevTools Linterはfilenameプロパティの拡張子を使用してリンターを選択します。代わりに使用するリンターを指定したい場合は、上記の表で指定されたlanguageプロパティと値を使用できます。この場合、必須パラメータとしてfilenameを指定する必要がありますが、languageがファイル名の拡張子よりも優先されます。例えば、「somefile.html」というfilenameを指定し、mdというlanguageを指定した場合、サーバーはMarkdownリンターを使用します。
レスポンス
サーバーはアクセシビリティエラーの有無にかかわらず、レスポンスコード200で応答します。レスポンスの本文にあるJSONを確認して、エラーがあるかどうかを判断する必要があります。
コードにエラーがない場合、JSONレスポンスオブジェクトは次のようになります:
{
"report": {
"errors": []
}
}次の例は、エラーがあるソースのレスポンスJSONオブジェクトを示しています(errorsはerrorオブジェクトの配列であることに注意してください)。
{
"report": {
"errors": [
{
"ruleId": "heading-order",
"helpURL": "https://dequeuniversity.com/rules/axe/4.3/heading-order?application=axe-linter",
"description": "Ensures the order of headings is semantically correct",
"lineContent": "### Another heading",
"lineNumber": 2,
"linterType": "md",
"column": 1,
"endColumn": 20
}
]
}
}errorオブジェクト
errors配列にはerrorオブジェクトが含まれており、次のプロパティがあります:
| 名前 | タイプ | 説明 |
|---|---|---|
ruleId |
文字列 | このコードによって破られたアクセシビリティルールのルールID。 |
helpURL |
文字列 | エラーを説明するウェブページのURL。 |
description |
文字列 | エラーの説明。 |
lineContent |
文字列 | エラーのソースコード。 |
lineNumber |
数値 | エラーのソースの行番号。 |
linterType |
文字列 | エラーを見つけるために使用したリンター。アクセシビリティの問題を見つけるために使用される複数のリンターがあります。 |
column |
数値 | エラーのある行lineNumberの開始列。 |
endColumn |
数値 | エラーのある行lineNumberの終了列。 |
customName |
文字列 | 違反を引き起こしたのタグ名のタグ名。"customName"がリクエストのproperties配列に含まれており、その違反がカスタムマッピングされたコンポーネントからのものである場合にのみ存在します。このプロパティのレスポンスオブジェクトにおける例はカスタムコンポーネント違反の分析を参照してください。 |
configオブジェクト
Axe DevTools Linterがアクセシビリティエラーをチェックする際に使用するルールをより詳細にコントロールしたい場合は、configプロパティを指定できます。
{
"source": "<html></html>",
"filename": "file.html",
"config": {
"rules": {
"html-has-lang": false
},
"exclude": [],
"tags": []
}
}前の例は、ソースにアクセシビリティエラー(html要素のlang属性が欠けている)があるにもかかわらず、そのルールがオフになっているため、エラーは返されないことを示しています。
global-componentsオブジェクト
global-componentsオブジェクトは、カスタムコンポーネントとそれらの属性を既存のHTML要素や属性にマッピングします。カスタムコンポーネントのリンティングの入門情報についてはカスタムコンポーネントのリンティングを参照してください。
以下の例は、完全なカスタムコンポーネントマッピングを示しています。
{
"config": {
"global-components": {
"custom-component": {
"element": "html-element",
"attributes": [
{ "custom-attribute-1": "html-element-attribute-1" },
{ "custom-attribute-2": "<text>" },
"aria-*"
],
"replace": true
}
}
}例では、カスタムコンポーネントcustom-componentからhtml-elementへのマッピングを示し、custom-attribute-1属性がhtml-element-attribute1にマッピングされ、custom-attribute-2が<text>にマッピングされた特別な属性値であり、custom-attribute-2を出力HTML要素のテキストコンテンツにマッピングします。詳細は特別な<text>値を参照してください。
特別なaria-*値は、カスタム要素のすべてのARIA属性を出力HTML要素にコピーすることを示します。詳細はaria-*を使用を参照してください。
replaceプロパティは、custom-componentを出力DOMツリーから削除するかどうかを示します。これは、AngularとJavaScriptのカスタム要素に含まれます。デフォルトは使用する技術のデフォルトと同じです。例えば、AngularとHTMLではtrue、JSX、TSX、Vueではfalseです。
プロパティelementとattributesはそれぞれelとattrsとして省略することができますが、elementとelやattributesとattrsを一緒に使うことはできません。
カスタムコンポーネントが属性のマッピングを必要としない場合、これはcustom-componentをhtml-elementにマッピングする省略形式を使用できます。
{
"config": {
"global-components": {
"custom-component": "html-element"
}
}
}rulesプロパティ
rulesプロパティは、ルールIDによってルールを有効または無効にすることを可能にするLinterRulesetオブジェクトを参照します。アクセシビリティルールについての詳細はAxe DevTools Linter のアクセシビリティルールを参照してください。
例えば、次の設定ではimage-altルールを有効にし、tabindexルールを無効にします:
{
"config": {
"rules": {
"image-alt": true,
"tabindex": false
}
}
}サーバーがチェックするルールのリストについてはAxe DevTools Linter のアクセシビリティルールを参照してください。
excludeプロパティ
excludeプロパティは、リンティング時にAxe Linterに特定のファイルをスキップするように指示するために使用できます。詳細はAxe DevTools Linter Connectorのドキュメント設定ファイルを参照してください。
tagsプロパティ
tagsプロパティは、文字列または*タグ*の配列です。各タグは1つ以上のアクセシビリティルールに付加されますので、ここで複数のタグを指定することにより、多くの異なるアクセシビリティルールを有効にすることができます(指定されたタグでタグ付けされていないルールを無効にします)。タグは通常、異なるアクセシビリティ標準に対応しており、各ルールは多くの異なるタグのメンバーとなることができます。
複数のタグを指定した場合、すべてのタグに属するルールではなく、すべてのタグに含まれるルールが有効になります。つまり、ルールの交差ではなく、和集合です。
ステータスエンドポイント(/status)
/statusエンドポイントは非推奨であり、使用しないでください。代わりに/healthcheckエンドポイントを使用してください。
ヘルスチェックエンドポイント(/healthcheck)
サーバーが稼働中かどうかを確認し、バージョン番号を返すには、ヘルスチェックエンドポイントにGETリクエストを送信します。以下に例を示します:
GET /healthcheckサーバーが稼働している場合、以下の例に示すように、サーバーのバージョン番号を返します。
{
"version": "4.10.3"
}エンタープライズ課金エンドポイント(/billing/enterprise)
このエンドポイントは、Axe DevTools Linter SaaSおよびプライベートクラウド製品でサポートされています。プライベートクラウドでの導入の場合、SaaSサーバーURLをプライベートクラウドサーバーURLに置き換えてください。
エンタープライズ請求エンドポイントを使用すると、エンタープライズ全体の使用情報や個別のAPIキーごとの使用状況を取得できます。このエンドポイントはGETリクエストに応答し、以下のように年と月(ここでは2022年5月)を指定する必要があります。
GET https://axe-linter.deque.com/billing/enterprise/2022/4
authorization: <YOUR-API-KEY>JavaScriptのDateオブジェクトでは、月は0から11の範囲で、0が1月、11が12月です。しかし、サーバーレスポンス内のmonth値は1から12の範囲で、1が1月、12が12月です。
このリクエストには、APIキーを含むauthorizationヘッダーが必要です。詳細はAPIキーの取得を参照してください。
デフォルトでは、サーバーは1か月分のデータを返しますが、オプションのmonths=<number-of-months-data>クエリ文字列を使用してさらに指定できます。monthsパラメータは1から12までの範囲です(含まれます)。以下の例では、2022年5月から始まる3か月間のデータを取得する例を示しています。
GET https://axe-linter.deque.com/billing/enterprise/2022/4?months=3
authorization: <YOUR-API-KEY>レスポンス
SaaSリンターサーバーは、2つのオブジェクトを含むJSONオブジェクトで応答します。1つ目はsummaryオブジェクトで、2つ目のapi_keysは、各APIキーがリンターサービスを使用した情報を含むオブジェクトのコレクションです。
以下に例として、応答オブジェクトが示されています:
{
"summary": {
"year": 2022,
"month": 5,
"total_lines_linted": 500,
"total_scans": 40
},
"api_keys": [{
"id": "a2fd58d0-4810-4fbb-b928-7befa01bf89c",
"name": "My Project",
"keycloak_id": "d117bb33-1308-41b0-8960-06301eefb169",
"user_email": "someone@example.com",
"total_lines_linted": 500,
"total_scans": 40
}]
}指定された期間にデータがない場合、レスポンスは次のようになります。
{
"summary": {
"year": 2022,
"month": 5
},
"api_keys": []
}summaryオブジェクト
summaryオブジェクトは、リントされた行の総数およびエンタープライズ内のユーザーによって開始されたスキャンの数についての情報を提供します。
| 名前 | タイプ | 説明 |
|---|---|---|
year |
数値 | 結果の開始年 |
month |
数値 | 結果の開始月(1-12) |
total_lines_linted |
数値 | エンタープライズによってリンターサービスに送信された総行数 |
total_scans |
数値 | エンタープライズによって実行されたスキャンの総数 |
api_keys配列
api_keys配列は、次のプロパティを含むオブジェクトで構成されています。
| 名前 | タイプ | 説明 |
|---|---|---|
id |
文字列 | ユーザーを識別するUUID |
name |
文字列 | APIキーが作成されたときの名前 |
keycloak_id |
文字列 | ユーザーのKeycloak ID |
user_email |
文字列 | ユーザーのメールアドレス |
total_lines_linted |
数値 | リンターサービスに送信された合計行数 |
total_scans |
数値 | このユーザーが開始したスキャンの総数 |
ユーザー課金エンドポイント(/billing/user)
このエンドポイントは、Axe DevTools Linter SaaSおよびプライベートクラウド製品でサポートされています。プライベートクラウドでの導入の場合、SaaSサーバーURLをプライベートクラウドサーバーURLに置き換えてください。
このエンドポイント、使用課金エンドポイントにより、SaaSサーバーへのアクセスに使用されたすべてのAPIキーに対するユーザーの課金情報を取得できます。デフォルトでは1か月分のデータが返されます。
次の例は、提供されたAPIキー(authorizationヘッダー内)で表されるユーザーのための2022年5月のリクエストを示しています。
GET https://axe-linter.deque.com/billing/user/2022/4
authorization: <YOUR-API-KEY>JavaScriptのDateオブジェクトでは、月は0から11の範囲で、0が1月、11が12月です。しかし、サーバーレスポンス内のmonth値は1から12の範囲で、1が1月、12が12月です。
他の請求エンドポイントと同様に、以下のようにオプションのmonthsクエリ文字列を指定できます。
GET https://axe-linter.deque.com/billing/user/2022/4?months=2
authorization: <YOUR-API-KEY>以下は、例としての応答オブジェクトを示しています:
{
"summary": {
"year": 2022,
"month": 5,
"total_lines_linted": 500,
"total_scans": 40
},
"api_keys": [{
"id": "a2fd58d0-4810-4fbb-b928-7befa01bf89c",
"name": "My Project",
"keycloak_id": "d117bb33-1308-41b0-8960-06301eefb169",
"user_email": "someone@example.com",
"total_lines_linted": 500,
"total_scans": 40
}]
}指定された期間にユーザーが使用していない場合、次の応答が返されます:
{
"summary": {
"year": 2022,
"month": 5
},
"api_keys": []
}レスポンスオブジェクトには、ユーザーに属する2つのオブジェクトsummaryとapi_keysが含まれています。詳細は上記のsummaryオブジェクトとapi_keys配列を参照してください。
APIキー課金エンドポイント(/billing/key)
このエンドポイントは、Axe DevTools Linter SaaSおよびプライベートクラウドのインストールでサポートされています。プライベートクラウドのインストールの場合は、以下の例のサーバーURL(https://axe-linter.deque.com)をプライベートクラウドのサーバーURLに置き換えてください。
APIキーに対する使用データを取得するには、APIキー課金エンドポイントを利用できます。以下のように年と月を指定する必要があります:
GET https://axe-linter.deque.com/billing/key/2022/4
authorization: <YOUR-API-KEY>JavaScriptのDateオブジェクトでは、月は0から11の範囲で、0が1月、11が12月です。しかし、サーバーレスポンス内のmonth値は1から12の範囲で、1が1月、12が12月です。
他の請求エンドポイントと同様に、以下のようにオプションのmonthsクエリ文字列を指定できます。
GET https://axe-linter.deque.com/billing/key/2022/4?months=2
authorization: <YOUR-API-KEY>以下に例として、応答オブジェクトが示されています:
{
"name": "My Project",
"total_lines_linted": 1000,
"total_scans": 200
}指定された期間にAuthorizationヘッダーで指定されたAPIキーを使用してリントされた行がない場合は、以下のようなレスポンスを受け取ります。
{
"name": "My Project",
"total_lines_linted": 0,
"total_scans": 0
}name値はAPIキーを作成したときに割り当てられた名前です。他の値total_lines_lintedとtotal_scansは、指定された期間にリントされた行数と、その期間にこのAPIキーによって開始されたスキャンの総数を示します。
URLクイックリファレンス
Axe DevTools Linter SaaSで使用する重要なURLは次のとおりです。
| URL | 説明 |
|---|---|
| https://axe-linter.deque.com | 公開アクセス可能なAxe DevTools Linter SaaSサーバー。利用にはAPIキーが必要です。 |
| https://axe.deque.com/settings | Axe DevTools Linter SaaS認証APIキーを取得するためのウェブアプリのURLです。 |
APIキーを取得するために必要な手順の詳細については、Axe DevTools Linter SaaS APIキーの取得を参照してください。
