はじめに
この記事では、アクセシビリティをチェックする ESLint のプラグインである eslint-plugin-jsx-a11y の設定方法と各ルールの概要を実際にコードを書きながら確認していきます。
（たくさんルールがあるので、随時更新・補足していきます。）
開発環境
開発環境は以下の通りです。
- Windows11
- eslint-plugin-jsx-a11y 6.8.0
- ESLint 8.57.0
- npm 10.5.2
- Node.js 20.13.1
- TypeScript 5.4.2
- React 18.2.0
インストールと設定
まずは以下のコマンドで ESLint と eslint-plugin-jsx-a11y をインストールします。
npm install eslint --save-dev
npm install eslint-plugin-jsx-a11y --save-dev
次に .eslintrc.json の extends に plugin:jsx-a11y/strict を追加します。
{
"extends": ["plugin:jsx-a11y/strict"]
}
これで eslint-plugin-jsx-a11y が有効になります。
strict と recommended の差異については、Supported Rules に記載があります。
ただ、2024年5月現在、anchor-ambiguous-text というルールがstrict では有効、recommended では無効という違いしかありません。
各ルールの設定内容のカスタマイズやルールを適用するコンポーネントの指定、独自のルールの追加などもできます。
ルール
インストールと設定が完了したので、各ルールの動作確認をしていきます。
各ルールは全てデフォルト状態です。
alt-text
以下のタグで alt 属性が抜けている場合、エラーになります。
<img><area><input type="image"><object>
エラーメッセージは以下の通りです。
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.
alt 属性を追加すると、エラーが消えます。
anchor-has-content
a タグ内に値がない場合、エラーになります。
Anchors must have content and the content must be accessible by a screen reader.
値を追加すると、エラーが消えます。
anchor-is-valid
a タグに有効な href 属性がない場合、エラーになります。
The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md
有効な href 属性を追加すると、エラーが消えます。
aria-activedescendant-has-tabindex
aria-activedescendant 属性を含むタグに tabindex 属性がない場合、エラーになります。
An element that manages focus with `aria-activedescendant` must have a tabindex
tabindex 属性を追加すると、エラーが消えます。
※他のルール（no-noninteractive-tabindex）で、tabindex 属性に別のエラーが表示されています。
aria-props
WAI-ARIA States and Properties に記載がない aria-* 属性を利用すると、エラーが表示されます。
aria-labeledby: This attribute is an invalid ARIA attribute. Did you mean to use aria-labelledby?
記載がある aria-* 属性を利用すると、エラーが消えます。
aria-proptypes
aria-proptypes 属性に boolean 以外の値の場合、エラーが表示されます。
The value for aria-hidden must be a boolean.
boolean にすると、エラーが消えます。
aria-role
WAI-ARIA に記載がない ARIA role を利用すると、エラーが表示されます。
Elements with ARIA roles must use a valid, non-abstract ARIA role.
記載がある ARIA role を利用すると、エラーが消えます。
aria-unsupported-elements
meta, html, script, style など ARIA Role をサポートしていないタグで ARIA Role を利用すると、エラーが表示されます。
This element does not support ARIA roles, states and properties. Try removing the prop 'role'.
autocomplete-valid
autocomplete 属性がフォームに適した値となっていない場合、エラーが表示されます。
the autocomplete attribute is incorrectly formatted
適した値になると、エラーが消えます。
