0.1.1 • Published 3 days ago
@mitsue/axeel v0.1.1
axeel
axeelはソースコードベースでaxe-coreによるチェックを行うためのツールです。読み方は「アクセル」です。
使い方
インストール
npm i --save-dev @mitsue/axeel
プロジェクト内に設定ファイルを作成する
html: include: - 'docs/**/*.html'
実行する
npx axeel --config .axeelrc.yml
コマンドライン引数
axeelでは以下のコマンドライン引数を指定できます。
引数 | 省略型 | 用途 | デフォルト値 |
---|---|---|---|
--config | -c | 設定ファイルへのパス | 指定必須 |
--out | -o | チェック結果を出力するファイル名 | なし(標準出力) |
--domType | -d | DOM実装の選択(jsdom | happy-dom ) | jsdom |
parallel | -p | 並列実行数 | 実行デバイスのCPUコア数 |
チェック結果の出力
チェック結果の出力は、標準出力とテキストファイルの出力のみサポートしています。
axeelの設定
設定ファイルにはチェック対象とするファイルと、除外対象とするファイルを指定できます。
html:
include:
- 'docs/**/*.html'
ignore:
- '**/node_modules/**'
axe-coreの設定
VSCodeにはaxe Accessibility Linterという拡張機能があります。
この拡張機能はaxe-linter.ymlという設定ファイルでルールの有効無効を切り替えることができます。
axeelはaxe-linter.ymlがプロジェクトのルートにある場合はその設定を適用します。設定がない場合はすべてのルールを適用します。
axe-linter.ymlに設定できるルールはAvailable Rulesを参照してください。
axeelにチェックできないこと
axeelは、大量のファイルを速くチェックすることを第一目的としているため、HTMLコードベースのチェックのみを実施しています。
そのため、カラーコントラストのチェックやJavaScript実行後のHTMLのチェックなど、ブラウザでのレンダリング処理を前提とするチェックは実施できません。
もし包括的なチェックを実施したい場合は以下のようなツールを使ってみてください。
またhidden
属性が付与されている要素はチェック対象となりません。