axe DevToolsを使ってみる

ウェブページのアクセシビリティテストツールのaxe DevToolsを使ってみます。

設定方法

axe DevToolsはchromeやFirefoxの拡張機能として提供されています。
今回はchromeの拡張機能を使ってみます。

axe DevToolsの拡張機能のページから、chromeに追加を行います。

これで拡張機能の追加ができたので、DevToolsを開いてaxe DevToolsのタブに移動します。

試してみる前に設定について確認してみます。
上部中央のメニューからSettingsを選択します。

主に確認した方がよさそうなのが Rules and Issues > Best Practices の項目で、「必ずしもWCAGの達成基準に適合しているわけではものの、UX向上のために一般的に行われているルール」を含めるかどうかになります。
まずはそのままの初期の設定(Disable)で試してみます。

今閲覧しているページをテストするには、左下にあるFull Page Scanを選択します。

以下のようなチェック結果を確認できました。
画面左側に結果の概要、右側に問題のあった項目が表示されます。

先ほど確認した Settings の中の Rules and Issues > Best Practices の値をEnableに変更してみます。
すると、先ほどと比べてBest Practiceのテスト項目が追加され、問題のあった項目が増えたのを確認できました。

問題のあった項目を選択すると、問題点の詳細を確認できます。