はじめに
axe Accessibility Linterは、コードを書きながらアクセシビリティの問題を検知できるVSCodeの拡張機能です。
今回は
- axe Accessibility Linterとは何か
- 導入方法
- axe-linter.ymlの設定方法
- 実際に使ってわかった良い点・注意点
を解説します。
axe Accessibility Linterとは
axe Accessibility Linterは、アクセシビリティ向けの静的解析Lintツールです。
VSCodeの拡張として利用でき、マークアップを記述している最中にアクセシビリティエラーをリアルタイムで検出します。
導入方法
導入方法は簡単で、VSCodeの拡張機能としてインストールするだけで利用できます。
拡張機能を有効にすると、コードを書きながらリアルタイムでチェックを受けられます。
特徴
- React／Vue／Angular／HTML／Markdown に対応
- WCAGベースのルールチェック
- 設定ファイル（axe-linter.yml）でルールを管理可能
基本的な使い方
マークアップ時、アクセシビリティに不備がある箇所にエラーメッセージが表示されます。
例えば、画像にalt属性を入れていないと以下のようなエラーが表示されます。
<img src="logo.png">
altを設定するか、装飾目的の画像であれば空のaltを設定すると、解消できます。
このように、実装中にリアルタイムで修正できます。
これまでの「後からまとめてアクセシビリティチェック＆対応」ではなく、「実装と同時にアクセシビリティ対応」へ進め方を変えることができます。
axe-linter.ymlでルールを共通化
axe Linterでは設定ファイル（axe-linter.yml）でアクセシビリティの方針を統一できます。
設定ファイルを共有することで、プロジェクト全体で同じ基準のアクセシビリティチェックを行えるようになります。
よく使う設定項目を紹介していきます。
1. rules：ルールを個別にON/OFFする
rulesは、公式サイトで一覧化されているアクセシビリティルールのチェックを、個別で有効／無効に設定できます。
ルール一覧
例えば、lang属性を共通コンポーネントやJavaScriptで動的に設定している場合、個別ファイルではエラーがずっと出てしまう場合があります。
そのような例外対応の時に、設定することで不要なエラーを減らすことができます。
rules: html-has-lang: false
2. tags：達成基準を指定する
tagsではWCAGのレベルやバージョンなどの、達成基準をまとめて指定できます。
達成基準一覧
tags: - wcag21a - wcag21aa
「プロジェクトとしてどのWCAGレベルまで対応するか」を定義します。
アクセシビリティ対応の基準を明文化できる点が大きなメリットです。
3. exclude：対象外にするディレクトリを指定する
excludeは、アクセシビリティチェックの対象外にするファイルやディレクトリを指定できます。
exclude: - node_modules/** - dist/**
以下のようなファイルは除外して、自分が管理・修正するコードだけを対象にします。
- node_modules（外部ライブラリ）
- dist（ビルド後の生成ファイル）
4. overrides：ファイルごとに挙動を変える
overridesは、特定のファイルやディレクトリに対して、設定を個別に細かく変更できます。
overrides:
- files:
- vue/**/*.html
linter: vue
上記の設定では、vue/配下の.htmlファイルをVueテンプレートとして解析するよう指定しています。
通常、.htmlファイルはプレーンなHTMLとして扱われ、Vueの独自構文がエラーとして検知されることがあります。
<img :src="imgSrc" :alt="imgAlt">
このようなVueのバインディング構文は、通常のHTMLとして解析すると不正な属性と判断される可能性があります。
そこでlinter: vueを指定することで、Vueの構文を理解したうえでアクセシビリティチェックを行えるようになります。
5. global-components：独自コンポーネントをHTML要素として扱う
global-componentsは、独自のコンポーネントを、特定のHTML要素として扱うよう指定できます。
例えば、Reactで下記のようなコンポーネントを作ることがあります。
<Link to="/about"> 概要 </Link>
扱いはaタグですが、Lintツールから見ると単なるカスタムタグです。
そこでglobal-componentsを適用します。
global-components: Link: a
これによりLinkコンポーネントもaタグとして認識し、「href相当の属性があるか」などaタグとしてのアクセシビリティチェックが正しく行われます。
実際に使ってみて
良かった点
- 導入が簡単
- 実装と同時にアクセシビリティチェックできる
- 設定ファイルで達成基準を統一できる
- React/Vueなどのモダンフレームワークに対応
登録も必要なくお手軽に使えるので、まずは試してみるというハードルが低いです。
また、アクセシビリティの方針を一括管理することで、チームで同じ基準でアクセシビリティ対応ができるのが良いと思いました。
惜しいと思った点
静的解析ツールのため、DOM状態やCSSの計算結果までは検証できません。
そのため以下は対象外でした。
- フォーカスの挙動
- CSS
- JavaScriptで動的に生成されるDOM
黒い文字と黒背景のスタイルを追加してもコントラストのエラーは検出されません。
<p style="background-color: black; color: black;">ダミーテキストです。</p>
まとめ
axe Accessibility Linterは決して万能なツールではありません。
それでも導入の手軽さや実装中のエラー検出、達成基準の統一という点は大きなメリットだと感じました。
アクセシビリティを意識するための第一歩として、非常に有効なツールだと思います。
簡単30秒