Webアクセシビリティに注目が集まっています。Webは多くの人たちが使うようになっており、健常者にだけ合わせて情報を発信すれば良いだけでなくなっています。また、幅広い層に提供することによって、新しい価値を生み出せる可能性もあるでしょう。 今回はWebアクセシビリティをチェックするツールとしてChromeLensを紹介します。Google ChromeのDevTools内で動くソフトウェアです。

ChromeLensの使い方

立ち上げたところです。DevToolsのタブとしてChromeLensが追加されます。

視力が少し弱い人が見る状況を再現。

さらに視力が弱い人の場合。

緑の認識が弱い人の視界を再現した例。

青を認識できない場合。文字によっては見づらそうです。

アクセシビリティチェックを実行した結果。多数のエラーが出ました…。

Tabキーを押した時の動きをトレースしています。この動きが激しいと情報を追いかけるのも大変です。

ChromeLensを使えば視力に何らかのハンディキャップを持っている人の見え方を手軽に再現できます。コントラストを高めたりしながら、みんなにとって使いやすいWebサイトを作ってください。

ChromeLensはGoogle Chrome用のオープンソース・ソフトウェア（MIT License）です。

chromelens/chromelens: Chrome DevTools extension for web accessibility development ChromeLens - Chrome ウェブストア