Webサイトを作った後、意外と忘れがちなのがアクセシビリティのチェック。Webサービスや、ソフトウェアなどもありますが、Google Chromeの開発者ツールで手軽にチェックできるのが『ChromeLens』です。
ページ内の「Download from the Chrome Store」をクリックすると、いつものインストール画面が起動してインストールすることができます。
追加されたアイコンは、グレーアウトしてクリックしてもなにも起こらないので戸惑いますが、ここで「開発者ツール」を起動(F12)すると、「ChromeLens」というメニューが追加されています。
このツールでチェックできるのは、次の3つ。
色覚異常のシミュレーション
世界に280万人いると言われる、色覚異常の状態をシミュレーションすることができます。「Enable lens」にチェックを入れて、ドロップダウンリストから選択すると、画面の色が変化します。
また、世界でどのくらいの方がその状態で見ているかを、WHOの統計から見ることもできます。
アクセシビリティチェック
Googleのアクセシビリティチェックサービスを、その場で起動することができます。異常があれば、警告が表示されます。
Tabキートレース
マウスが利用できず、キーボードで操作をする方が、「Tabキー」を使ってどのようにフォーカスを移動しているかを確認することができます。
TabIndexの設定がおかしくないかをチェックできます。
普段利用しているブラウザーソフトで、気軽にチェックできるのがうれしいですね。ぜひ、制作者は入れておきたい拡張機能です。