読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

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

Javascript ウェブデザイン アクセシビリティ オープンソース

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

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

tota11y - an accessibility visualization toolkit

f:id:tkosuga:20150630101911p:plain

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

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

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