ブラウザーのアクセシビリティチェックツール

Web Accessibility Advent Calendar 2016の14日目の記事です。

普段は受託でウェブサイトやウェブアプリケーションの制作を行っていますが、制作時には気をつけているつもりでも、やはり抜けもあります。余裕がなくなってくるとなおさらです。実際には実装屋のみでできる範囲には限界はありますが、それでも、実装屋でもなんとかなる範囲だけでもやろうと思った際に、コード書くときの心構えだけではなかなかうまく行きません。

そういった面において、Developer Toolsなどで一緒にチェックできるツールというのは、ひとつの助けになるだろうということで紹介します。

ちなみに公開しているサイトなどの継続的なチェックなどについては、Web Accessibility Advent Calendar 2016の12日目のWeb アクセシビリティ向け Node.js 製の自動チェックツールや DevTools 用の拡張機能など ::ハブろぐをご覧ください。今日紹介するツールもサラッと触れられています。

Accessibility Developer Tools

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

Google chromeのデベロッパーツールの「Audits」でのチェック時にアクセシビリティーのチェックも同時にしてくれるようになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-18-31-06
Accessibilityの項目が増えています

Accessibilityにチェックを入れた状態でRunすると表示しているページについてチェックを行い、結果をれぽーとしてくれます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-18-34-19
チェック後の画面

エラーや警告だけでなく、対象にならなかった項目や、パスした項目なども表示してくれるのは個人的にありがたいです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-18-37-30
問題のある箇所を参照している状態

エラー、警告に関しては問題の箇所を特定するのも早くできます。

また、Elementsの画面でも「Accessibility Properties」というタブが追加され、各要素に対してのチェックも可能です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-18-44-11
コントラストや読み上げられるテキスト情報などが表示されている状態

Tota11y Plugin, from Khan Academy

tota11y – an accessibility visualization toolkit

ちょっと小洒落た感じのチェックツールです。インストール後、ツールバーでアイコンをクリックすると、ブラウザーのウィンドウの左下にメガネのボタンが出てきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-18-54-18
ツールバーのアイコンをクリックすると色がつき、左下にメガネのボタンが出てきます

その状態で左下のボタンをクリックするとチェックできる項目が表示され、それぞれの項目をチェックしていきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-18-59-34
h*の構成に関してのエラーを表示している状態

エラーの項目があると右下にボックスが出て表示してくれます。

また、スクリーンリーダーがどのようにテキストを認識しているかも表示してくれます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-19-01-38
Screen Reader Wand

チェックしたい項目を選んで、問題があれば表示されるという形なので、Accessibility Developer Toolsとはまた違ったタイミングでチェックできます。

誰か教えてください

これらのツールで日本語のページをチェックしている時に問題がありまして‥‥

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-19-07-33
日本語のページの場合

「Link text in unclear」つまりはリンクのテキストの意味がはっきりしていないというエラーなのですが、日本語のページの場合は全滅です。英語基準だと確かに意味分からないということなんですが、このあたり、日本語で判定したりするパッケージなどあるのでしょうか?

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-14-19-10-30
英語のページでも「about」だけじゃわからないって出ます

まあ、このあたりはツールに頼れないから気をつけましょう、でもいいのですが、日本語でも判定してくれる方法あれば教えてもらえるとうれしいです。

まとめ

アクセシビリティーについては、冒頭にも書きましたが、実装だけで担保できるものではありません。なのでこういったチェックツールでカバーできる部分は、はあくまでも一部ですが、こういったもので対応できる部分を対応しておくことは「当たり前」という感じになると、より質の良い仕事になるんじゃないかなと考えています。

「そこだけでもできるのか?」といざ問われれば、「できています!」と応えられるように今後も精進していきたい所存です。

投稿者: maepon

okayama-js

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中