Hatena::Groupweb

vantguarde

 | 

11.22

代替テキストをどう書いてるか

| 18:31

「altのつけかた」なるテキストファイルを見つけたので晒してみることに。

いつ書いたんだろう……今年だとは思いますが。

altのつけかた

「つけかた」とは書いたものの、ページにどんな情報が入るのかがまず重要。

画像にはおおざっぱにわけて3つある

1. 画像が一番重要なエレメントであるもの
壁紙であったり、写真やイラストであったり、画像が持つ視覚的な表現なしには成立しないもの。

2. 画像がコンテンツで有効に機能するもの
アイコンや図表など、テキストだけでは説明しにくい情報を補完するようなもの。

3. なくてもいいもの
無くても伝えたい情報のロスが起こらないもの。

で、altのつけかた。

あるいみ文書が大事。テキスト情報が画像から導けない、または画像の情報がテキストに影響を及ぼさないのなら、空でも問題ない。

「装飾画像はそもそもスタイルシートでやれよ」?
違うでしょ。スタイルシートならそういう装飾画像を、効率的に処理できる場合が多いっていうだけ。

画像の存在がテキストやページの内容から推測できる場合
・製品画像やギャラリーみたいなページ
・写真のあとに「これは~~で撮ったもの」とか、テキストが画像の存在を示唆しているもの
・リンクが張られているもの

これらにはaltに画像を示唆するaltをつけるほうがいいかも。
「写真:」などとはしたくないけれど、画像を切った時や、スクリーンリーダーの実装がいまいちなので、つける。

文字情報そのままか、補足的な情報を入れるか
・まずは文字情報をそのまま入れてみる
・そのあと状況に応じて書き換えるが、画像と極端に乖離しないよう

キャプション付き画像
・画像の存在ありきなので、「写真」などととりあえず。
・タイトルはキャプションに同じ情報がなく、短いものがあれば

アイコン
・アイコンに文字がある場合は、その文字を入れてみる
・アイコンしかない場合は、titleに補足的な情報を入れ、アイコンは短く

もう一度言うよ

「この画像だったらどうするか」という考えよりも前に、どんな情報があるのかが大事。
考えた画像と文章、情報構造の設計を。

書いたのを自分でも忘れてたくらいので、ちょっと意図をつかめないところがあるんですが、まあぼくが思うaltの書き方はだいたいこんな感じでしょうか。

W3C Validator + Validator.nu

| 18:10

HTML5のconformance checkerであるValidator.nuのコードがW3CのValidatorにも取り込まれました。

「できてもない仕様のチェッカー組み込むのはどうよ?」「新しい機能をちゃんと使えてるか確かめたいひとはどーすんのさ?」みたいな議論があったようですが、組み込まれたようです。

XMLくずれのXHTMLとかにも使えるので、マークアップのチェックには有用ですね。

 | 
Contact: @vant / lepetitcroissant@gmail.com.