はじめに

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

値を追加すると、エラーが消えます。

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