webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

アクセシビリティを見える化するJavascript "tota11y"

tota11yはウェブページのアクセシビリティ見える化するJavascriptで作られたツールキットです。MITライセンスで提供されています。

khan.github.io

ウェブページ/ウェブブラウザの進化にアクセシビリティは欠かせなく、高度化するウェブページのフロントにあってもアクセシビリティは必要不可欠なものです。

写真を入れたimgタグのalt属性に代替えテキストを入れる、アイコンなど読み上げが必要ではないimgタグのalt属性は空にするなどが一般的に知られているアクセシビリティです。

"tota11y"をブックマークレットに登録すると簡単に自分のサイトでアクセシビリティチェックを試せます。

ブックマークレットhttp://khan.github.io/tota11y/内のInstallationを参考にして下さい。下に該当箇所のキャプチャを載せます。

f:id:tkosuga:20150630101430p:plain

どのように表示されるかをこのブログを使って試しました。ブックマークバーからブックレートを押すと左下にメガネのアイコンが表示されます。

f:id:tkosuga:20150630102039p:plain

このアイコンを押すとメニューが開きます。メニュー内の各項目を押すとページ内でエラーになっている箇所が表示されます。

f:id:tkosuga:20150630102125p:plain

ヘッダーのエラーが1つ表示されました。

f:id:tkosuga:20150630102220p:plain

imgタグのaltを適切に入力していないので、エラーが多く表示されています。

f:id:tkosuga:20150630102234p:plain

オフィシャルブログにwikipediagithubを使ったサンプルが掲載されています。こちらの説明を見る方が分かり易いかも知れません。

tota11y - an accessibility visualization toolkit

f:id:tkosuga:20150630101911p:plain

ブラウザ自身のアクセシビリティ機能の対応もありますが、ウェブサイトは異なるブラウザ、異なるデバイス、異なるユーザーから(ある程度)普遍的に見れるのが望ましい状態です。

これはローカライズなど難しい対応の話ではなく、ウェブページに興味がある人が見たい情報を見れる状態を指しています。

アクセシビリティ見える化するJavascript "tota11y"を試して見て下さい。