axeel

axeelはソースコードベースでaxe-coreによるチェックを行うためのツールです。読み方は「アクセル」です。

使い方

1. インストール

   npm i --save-dev @mitsue/axeel

2. プロジェクト内に設定ファイルを作成する

   html:
       include:
           - 'docs/**/*.html'

3. 実行する

   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のチェックなど、ブラウザでのレンダリング処理を前提とするチェックは実施できません。

もし包括的なチェックを実施したい場合は以下のようなツールを使ってみてください。

• Free accessibility browser extensions
• Pa11y

またhidden属性が付与されている要素はチェック対象となりません。