Google Chromeでアクセシビリティチェックができる『ChromeLens』

Webサイトを作った後、意外と忘れがちなのがアクセシビリティのチェック。Webサービスや、ソフトウェアなどもありますが、Google Chromeの開発者ツールで手軽にチェックできるのが『ChromeLens』です。

ページ内の「Download from the Chrome Store」をクリックすると、いつものインストール画面が起動してインストールすることができます。
追加されたアイコンは、グレーアウトしてクリックしてもなにも起こらないので戸惑いますが、ここで「開発者ツール」を起動(F12)すると、「ChromeLens」というメニューが追加されています。

ChromeLensのタブ

このツールでチェックできるのは、次の3つ。

色覚異常のシミュレーション

世界に280万人いると言われる、色覚異常の状態をシミュレーションすることができます。「Enable lens」にチェックを入れて、ドロップダウンリストから選択すると、画面の色が変化します。

色覚異常の確認

また、世界でどのくらいの方がその状態で見ているかを、WHOの統計から見ることもできます。

アクセシビリティチェック

Googleのアクセシビリティチェックサービスを、その場で起動することができます。異常があれば、警告が表示されます。

アクセシビリティチェッカー

Tabキートレース

マウスが利用できず、キーボードで操作をする方が、「Tabキー」を使ってどのようにフォーカスを移動しているかを確認することができます。
TabIndexの設定がおかしくないかをチェックできます。

タブトレース

普段利用しているブラウザーソフトで、気軽にチェックできるのがうれしいですね。ぜひ、制作者は入れておきたい拡張機能です。