画像alt属性の正誤チェック効率化を考えてみる

alt属性の“有無”は、Dreamweaverなどで簡単にチェックできますが、“正誤”チェックはみなさんなどうやってるんでしょうね。ソースコードをコピーして使い回したりすると、たまにalt属性を変更し忘れるなんてミスもあるので、正誤チェックもちゃんとやりたいですね。

更新業務等で画像が数ヶ所とかなら特に問題ないのですが、新規制作で数十ページもチェックしなくちゃいけない時ちょっと途方に暮れて逃げ出したくなります^^;

“安直に”考えつくところでは…

1. 画像にマウスカーソルをhoverしてチップを表示（IEやFxのPopup ALT Attributes）
2. Web Developerで画像を非表示にしてalt属性を表示
3. Web Developerでalt属性を画面上に表示させる（Images→Display Alt Attributes）

画像を非表示にすると画像との比較ができないし（一番現実的じゃないし…）、ひとつひとつhoverして表示させるのもばかげてるしなぁ。WebDeveloperのalt属性を表示させる機能は便利だけど、ページ全てのalt属性が表示されるので必要のない箇所はかえって邪魔に。しかも画像の左側に表示されるのでレイアウトが崩れて余計見にくくなってしまう。（印刷しても同様でした）

ググったら、アライド・ブレインズさんの出してる「情報伝達度チェッカー」というシェアウェアが見つかったんだけど、ページ単位でしかチェックができないみたい。

A.A.O.｜情報伝達度チェッカー

http://www.aao.ne.jp/service/tool/checker.html

 

最終の本文校正と併せて一気に処理するのが理想なんだけど、上記方法ではなかなかうまくいきそうにないので、CSSで何とかできないか考えてみました。

div#main img:after{
 	content:attr(alt);
 	display:block;
 	}

[via] スタイルシートサンプル&リファレンス

上記を追記すると、alt属性が画像の下に表示されます。
after要素でalt属性を画像の直後にブロック要素として表示しています。div#mainはコンテンツを囲っているID名に変えてください。こんな感じで表示されます。

ただし、この方法はOpera6～9とNC6～7しか対応していないので、Operaでプリントアウトし、全ページ目視でチェックという流れがいいんじゃないかと思います。（今回はOpera9で検証しました。）
※alt属性が極端に長かったり、画像が密なところはそれでも崩れます、やっぱり。

誰か他になにかいい方法があったら、教えてください。（他力本願）