😈

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

2022/12/04に公開約800字

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

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

eslint-plugin-jsx-a11y の紹介

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 に含まれている主要なルールは以下 (それぞれの解説は整備中

alt-text

anchor-has-valid

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

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

aria-props

label-has-associated-control

jsx-a11y/control-has-associated-label

Discussion

ログインするとコメントできます