kito

こんにちは。
今回はESLintのプラグインであるeslint-plugin-jsx-a11yの導入手順について紹介します。

こちらを導入することでアクセシビリティに考慮された構文かチェックしてくれるので、対応漏れなど減らすことができるかと思います。

前提

• ESLintの導入済

インストール

まずは対象のパッケージをインストールします。

 # npm
 $ npm install eslint-plugin-jsx-a11y --save-dev

 # yarn
 $ yarn add eslint-plugin-jsx-a11y --dev

.eslintrc.json設定

次にeslintrc.jsonで以下設定を追加します。

• "extends"内に以下追加

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

• "plugins"内に以下追加

  {
  "plugins": ["jsx-a11y"],
  }
  

  以上で設定は完了です！

next/linkを使用する場合

最後に、Next.jsでlintを走らせたときにエラーが発生したので紹介します。
内容としてはnext/linkを使用した状態でlintを走らせると下記エラーが発生しました

 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.

エラー内容は、<a>には必ずhrefは書いてくださいよというエラーです。詳細はこちらをご覧ください
next/linkを使用する時は、Linkコンポーネントに対してhrefを指定する仕様なので必ずエラーが起きてしまいます。

import Link from 'next/link'
<Link href='./hoge'>
  <a>hoge</a>
</Link>

対策として、.eslintrc.jsonでLinkコンポーネントに対してのエラーを除外する記述を追加します。

{
  "extends": [
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["jsx-a11y"],
  "rules": {
  // 以下追加
    "jsx-a11y/anchor-is-valid": [ "error", {
      "components": [ "Link" ],
      "specialLink": [ "hrefLeft", "hrefRight" ],
      "aspects": [ "invalidHref", "preferButton" ]
    }]
  }
}

こちらにてエラーの対策*は完了です。
*上記の対策後にnext/linkを利用する際の影響は無く、hrefは正しく付与されます。
参考：https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/402

サポートされているルール一覧は以下で確認できるので、一度目を通すことをお勧めします。

• supported-rules

おわりに

アクセシビリティ向上のため様々な施策が推奨されていますが、eslint-plugin-jsx-a11yを導入することで簡単に対応漏れなどを防ぐことができるかと思います。
少しでも参考になると幸いです。
最後までお読み頂きありがとうございました！