react-axeでアクセシビリティの向上を目指す

はじめに

前回の記事で紹介させていただいたサイトのアクセシビリティをチェックしたら71点でした。

本記事では、下記の記事を参考にさせていただき、react-axeを用いてアクセシビリティの向上を目指します。

tech.mercari.com

本記事で記述しているのはこのWebサイトのトップページのみの修正箇所です。

はじめに
やったこと
- react-axeを導入
New aXe issues
おわりに
参考サイト

やったこと

react-axeを導入

react-axeを参考記事と同様に導入します

react-axeと@types/react-axeをインストール

npm i react-axe
npm i @types/react-axe

開発環境で結果を確認したいので dynamic import でライブラリをインポート

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then((axe) => {
    axe.default(React, ReactDOM, 1000)
    ReactDOM.render(<App />, document.getElementById('root'))
  })
} else {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )
}

こうする事でコンソールに New aXe issuesというのが出力されています。

さらにリンクをクリックすると詳しい詳細を確認する事ができました。(日本語に対応していました)

あとは New aXe issuesの通りに修正していきます。

New aXe issues

以下に実際に出力されたものを記します。

critical: Buttons must have discernible text

ボタンには認識可能なテキストが存在しなければなりません

詳細はこちらから確認できます

ボタン要素にaria-label属性を追加しました。

<Button
    aria-label="キーワードで検索"
    size="large"
    variant="contained"
    color="default"
    className={classes.button}
    onClick={() => history.push('/search')}
>
    キーワードで探す
</Button>