axeを使用したアクセシビリティー・チェック

axeは非常によく使われているアクセシビリティー・チェック・ツールです。基本機能がaxe-coreとして実装されているため様々な方法で使用することができますが、ここではブラウザー拡張機能として利用して、出来上がっているWebページのアクセシビリティーの対応状況をチェックする方法を紹介します。

なお、axeを用いた具体的なチェックの実施方法については、axeを用いたチェック実施方法の例を参照してください。

axeのインストールと起動の仕方

ChromeウェブストアからChrome拡張をインストールできます。

https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd

axe拡張機能はデベロッパーツール内で使用します。

分析対象のページを開いた状態で、ツールバー右端のボタンからその他のツール ‣ デベロッパーツールを選択するか、ショートカットキー(WindowsではCtrl+Shift+I、macOSではCommand+Option+I)を使用してください。

メニューからデベロッパーツールを開こうとしているスクリーンショット

デベロッパーツールのタブから「axe」を選択します。

デベロッパーツールのタブバーのスクリーンショット。右端に「axe」がある

デベロッパーツールの表示領域が狭い場合は「>>」アイコンに隠されていることがあります。

axeが「>>」アイコンに隠されているときのスクリーンショット。アイコンをクリックしたメニュー内に「axe」がある

axeで今見ているページを分析する

分析対象のページを開いた状態でデベロッパーツール内のaxeのタブを開き、「分析する」ボタンをクリックします。

axeタブのスクリーンショット

今見ているページの問題を瞬時に発見することができます。

表示されているページの問題をaxeで表示しているスクリーンショット

レポートの見方

axeの画面には発見された問題のリストと、その詳細を表示するビューがあります。

リストには「すべての問題」「レビューが必要」などのフィルターが用意されています。

発見された問題のリスト部分のスクリーンショット

詳細ビューにはその問題が起きているHTML上の場所や、修正するための情報が表示されています。

問題の詳細部分のスクリーンショット

同じ問題が複数箇所で見つかっている場合は、リスト上にその件数が表示され、詳細ビューのページャーで1つ1つ確認していくことができます。

問題リストの項目のスクリーンショット。右側に件数が表示されている 詳細ビューにあるページャーのスクリーンショット。

axeを使用する上での注意点

  • モーダルやアコーディオンが開閉するような場所では、開いた状態や閉じた状態で何度かaxeで分析してみる必要があります

  • axeだけではすべての問題を発見することはできませんが、機械的に発見できる問題を瞬時に発見することができます。また、調査の必要そうな場所を発見するために非常に有用です。