はじめに

この記事では、アクセシビリティをチェックする 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 を追加します。

.eslintrc.json

{
  "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

適した値になると、エラーが消えます。

参考

eslint-plugin-jsx-a11y