axe core
Release 4.10.2
Ax は、Web サイトおよびその他の HTML ベースのユーザー インターフェイス用のアクセシビリティ テスト エンジンです。高速、安全、軽量で、既存のテスト環境とシームレスに統合できるように構築されているため、通常の機能テストと並行してアクセシビリティ テストを自動化できます。
axe ニュースにサインアップして、axe の最新機能、今後のリリース、イベントを入手してください。
Axe-core には、レベル A、AA、および AAA の WCAG 2.0、2.1、2.2 用のさまざまなタイプのルールがあり、また、すべてのページにh1見出しがあることを確認するなど、一般的なアクセシビリティの実践を特定するのに役立つ多くのベスト プラクティスも含まれています。使用した ARIA 属性が無視されるなど、ARIA の「落とし穴」を回避できます。ルールの完全なリスト、グループ化された WCAG レベルおよびベスト プラクティスは、doc/rule-descriptions.md にあります。
axe-core を使用すると、 WCAG の問題の平均 57% を自動的に見つけることができます。さらに、axe-core が確実ではない場合、axe-core は要素を「不完全」として返し、手動でのレビューが必要になります。
開発サイクルの早い段階でバグを発見するには、axe-linter vscode 拡張機能を使用することをお勧めします。テスト カバレッジをさらに向上させるには、ax 拡張機能のインテリジェントなガイド付きテストをお勧めします。
まずパッケージをダウンロードします。
npm install axe-core --save-dev次に、フィクスチャまたはテスト システムの各 iframe に JavaScript ファイルを含めます。
< script src =" node_modules/axe-core/axe.min.js " > script >次に、新しい UI が表示または公開されるテスト内の各ポイントに呼び出しを挿入します。
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ; 開発者がアクセシビリティ テストとアクセシブルなコーディングの実践に責任を負う権限を与えられた場合にのみ、Web はアクセシブルで包括的な空間になることができます。
自動化されたアクセシビリティ テストは時間を大幅に節約し、特別な専門知識を必要とせず、チームは本当に必要なアクセシビリティの問題に専門リソースを集中させることができます。残念ながら、ほとんどのアクセシビリティ ツールは、開発プロセスが終了したサイトやアプリケーションで実行されるように設計されており、多くの場合、明確で一貫した結果が得られず、製品の出荷準備ができたと思ったときにフラストレーションや遅延が発生します。
Axe は、Web 開発が実際にどのように機能するかを反映するために構築されました。開発チームが使用する可能性のあるすべての最新のブラウザ、ツール、テスト環境で動作します。 axe を使用すると、アクセシビリティ テストを、単体テスト、統合テスト、ブラウザ テスト、およびチームが日常的に実行しているその他の機能テストの一部として実行できます。初期の開発プロセスにアクセシビリティ テストを組み込むと、時間、リソース、あらゆる種類のフラストレーションが節約されます。
axe-core API は次のブラウザを完全にサポートしています。
サポートとは、バグを修正し、各ブラウザを定期的にテストすることを意味します。現在、すべてのプル リクエストで Chrome と Firefox のみがテストされています。
JSDOM のサポートは限定的です。すべてのルールを JSDOM と互換性のあるものにするよう努めますが、それが不可能な場合は、それらのルールをオフにすることをお勧めします。現在、 color-contrastルールは JSDOM では機能しないことが知られています。
機能がネイティブにサポートされているか、正しくポリフィルされている環境のみをサポートできます。非推奨の v0 Shadow DOM 実装はサポートされていません。
axe-core API パッケージは次のもので構成されます。
axe.js - テスト対象の Web サイト (API) に含める JavaScript ファイルaxe.min.js - 上記のファイルの縮小バージョンAxe は現地の言語を使用して作成できます。これを行うには、ローカリゼーション ファイルを./localesディレクトリに追加する必要があります。このファイルには、 --langフラグを指定して ax を実行します。
grunt build --lang=nl
または同等の意味で:
npm run build -- --lang=nl
これによりaxe.およびaxe.という名前の axe の新しいビルドが作成されます。すべてのローカライズされたバージョンをビルドしたい場合は、代わりに--all-langを渡します。複数のローカライズされたバージョン (すべてではない) をビルドしたい場合は、 --lang=nl,jaのように、カンマ区切りの言語リストを--langフラグに渡すことができます。
axe の新しい翻訳を作成するには、 grunt translate --lang=を実行します。これにより、 ./locales locales ディレクトリに json ファイルが作成され、その中に翻訳用のデフォルトの英語テキストが含まれます。あるいは、 ./locales/_template.jsonをコピーすることもできます。 axe-core のローカライズは歓迎します。貢献方法の詳細については、以下の「貢献」セクションを参照してください。メッセージ構文の詳細については、「メッセージ テンプレートの確認」を参照してください。
既存の翻訳ファイルを更新するには、 grunt translate --lang=を再実行します。これにより、英語で使用される新しいメッセージが追加され、英語で使用されなかったメッセージが削除されます。
さらに、 localeオブジェクトをaxe.configure()に渡すことで、実行時にロケールを適用できます。ロケール オブジェクトは、 ./locales locales ディレクトリ内の既存のロケールと同じ形状である必要があります。例えば：
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;Axe-core は次のロケールをサポートします。ロケールはコミュニティによって提供されるため、リリースに必要なすべての翻訳が含まれるとは保証されないことに注意してください。
Axe-core には 3 ～ 5 か月ごとに新しいマイナー リリースがあり、通常は新しいルールや機能が導入されます。これらのバージョンにアップグレードする時間をスケジュールすることをお勧めします。セキュリティ アップデートは、最長 18 か月前のマイナー バージョン ラインに対して利用可能になります。
DEQUE、DEQUELABS、AXE®、および AXE-CORE® は、Deque Systems, Inc. の商標です。Deque 商標の使用は、Deque の商標ポリシーに従う必要があります。
axe ごとにサポートされる ARIA のロールと属性の完全なリストについては、axe-core ARIA サポートを参照してください。
Axe-core ルールの提案ガイドを読む
アーキテクチャに関するドキュメントを読む
貢献に関するドキュメントを読む
axe-coreを使用したプロジェクトの一覧
Shadow DOM サポートに含まれる css-selector-parser 実装については、Marat Dulin に感謝します。さらに、Slick Parser 実装者の貢献に感謝します。シャドウ DOM サポート コードで彼らのアルゴリズムの一部を使用しました。カラー形式間の変換に使用した colorjs.io ライブラリについては、Lea Verou と Chris Lilley に感謝します。
Axe-core は、Mozilla Public License バージョン 2.0 に基づいて配布されています。これには、独自の条件に基づいて配布されるいくつかの依存関係がバンドルされています。 (LICENSE-3RD-PARTY.txtを参照)
