アクセシビリティを見える化するJavascript "tota11y"
tota11yはウェブページのアクセシビリティを見える化するJavascriptで作られたツールキットです。MITライセンスで提供されています。
ウェブページ/ウェブブラウザの進化にアクセシビリティは欠かせなく、高度化するウェブページのフロントにあってもアクセシビリティは必要不可欠なものです。
写真を入れたimgタグのalt属性に代替えテキストを入れる、アイコンなど読み上げが必要ではないimgタグのalt属性は空にするなどが一般的に知られているアクセシビリティです。
"tota11y"をブックマークレットに登録すると簡単に自分のサイトでアクセシビリティチェックを試せます。
ブックマークレットはhttp://khan.github.io/tota11y/内のInstallationを参考にして下さい。下に該当箇所のキャプチャを載せます。
どのように表示されるかをこのブログを使って試しました。ブックマークバーからブックレートを押すと左下にメガネのアイコンが表示されます。
このアイコンを押すとメニューが開きます。メニュー内の各項目を押すとページ内でエラーになっている箇所が表示されます。
ヘッダーのエラーが1つ表示されました。
imgタグのaltを適切に入力していないので、エラーが多く表示されています。
オフィシャルブログにwikipediaとgithubを使ったサンプルが掲載されています。こちらの説明を見る方が分かり易いかも知れません。
tota11y - an accessibility visualization toolkit
ブラウザ自身のアクセシビリティ機能の対応もありますが、ウェブサイトは異なるブラウザ、異なるデバイス、異なるユーザーから(ある程度)普遍的に見れるのが望ましい状態です。
これはローカライズなど難しい対応の話ではなく、ウェブページに興味がある人が見たい情報を見れる状態を指しています。
アクセシビリティを見える化するJavascript "tota11y"を試して見て下さい。