noguzo blog

Next.jsアプリにreact-axeを導入する

2019.12.15


react-axe

react-axeはReactアプリケーションのアクセシビリティをチェックしてくれるツールです。 chrome devToolのconsoleから問題点を確認できるので開発時にアクセシブルかどうか確認しながら実装できます。

yarn add --dev react-axe

設定

チェックは開発時だけで良いので、その設定をしていきます。

まずは、package.json。 わかりやすいように、CHECK_AXEという環境変数を追加します。

{
  ...,
  "scripts": {
    "dev": "CHECK_AXE=true next", // CHECK_AXEを追加
    "build": "next build",
    "start": "next start"
  },
  ...

next.config.js

これで、jsファイルでprocess.env.CHECK_AXEを呼べばいいかなぁと思ったのですが、それでは解決できず。。

Next.jsアプリでは、クライアントサイドで環境変数を利用する場合、next.config.jsに追記して上げる必要があります。

自分の場合は、sassの設定もしていたので、↓のような形になります。

// next.config.js
const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64]',
  },
  env: { // ここ!
    CHECK_AXE: process.env.CHECK_AXE
  }
})

react-axeを有効化

どこにaxeを有効化する処理を書くか悩みどころなのですが、ページ初期化時にこの設定に追記していきます。

初期化時の設定は、pagesディレクトリ配下に_app.jsファイルを作成し、そちらに記述することで上書きしていくことができます。

// _app.js
import App from 'next/app'
import React from 'react'
import ReactDOM from 'react-dom'

// React-axe
// https://github.com/dequelabs/react-axe
if (process.env.CHECK_AXE) {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000)
  })
}

export default App

確認する

yarn dev

ディベロッパーツールのコンソールを確認すると、アクセシビリティのチェックが行われていることが確認できます。 (serious出ちゃってる…)

react-axe result

あとはひたすら直すのみ!

おしまい。


Frontend engineer.