React プロジェクトに入れておきたい eslint-plugin-jsx-a11y

Posted at 2022-12-04

アクセシビリティ何それ美味しの?

っていう人は以下のドキュメントを読んできてください
https://ja.reactjs.org/docs/accessibility.html

Github: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
a11y を意識したマークアップをかけているかチェックしてくれる eslint plugin です。

Next.js を利用している場合、eslint-config-next に含まれているので追加で入れる必要はありません。

(yarn ですでに eslint を導入している場合)

yarn add -D eslint-plugin-jsx-a11y

{
  "plugins": ["jsx-a11y"]
},
{
  "extends": ["plugin:jsx-a11y/recommended"]
}

細かい設定は他と同様 rules で設定できます。

recommended に含まれている主要なルールは以下 (それぞれの解説は整備中

React Router や Next.js <Link> の直下に置いている場合、# などで回避できます

<Link to="path/to/navigate">
  <a href="#" />
</Link>