alt属性 – Wikipedia
alt属性（英語: alt attribute）はHTMLとXHTMLで使われるHTML属性。HTML要素が表示できないときに代わりにレンダリングされるテキスト（いわゆる代替テキスト、英語: alt text）を指定する。
ウェブページを読み上げるスクリーンリーダーがAlt属性を読み上げることで、ウェブページの内容を聞いている利用者（例えば視覚障害者など）もそのHTML要素の内容を理解できる。画像のアクセシビリティを向上するためにalt属性を指定すべきだが、alt属性には必ずしもテキストを指定する必要はなく、alt=のように何も指定しないこともできる[1]。
この属性はHTML 2.0で導入され[2]、HTML 4.01以降ではimgタグとareaタグにおいて必須となった[3]。またinputタグと非推奨のappletタグでも指定できるが、こちらは省略できる。
alt属性の例[編集]
例えば、ここにalt属性に「赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。」を指定した画像がある。
HTML 4.01 Strictにおいて、これは下記のようなタグで実装できる。
<img alt="赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg" >
Orcaなどのスクリーンリーダーを使う視覚障害者は画像を見る代わりに代替テキストを聞ける。またLynxなどテキストベースのウェブブラウザでは画像の代わりに代替テキストを表示する。GUIベースのブラウザは一般的には画像のみを表示し、ユーザーが明示的に画像のプロパティを表示させたり、ブラウザの設定で画像を表示しないようにしたり、何らかの原因で画像を取得できないかデコードできない場合のみ代替テキストを表示させる。
上記の長い代替テキストの代わりに、簡潔に「デンマークの国旗」とだけ指定することもできる。
一般的な誤解[編集]
alt属性には必ずしも画像の内容を記述する必要はなく、文脈、画像を置く目的、そして画像が見えない人にとって代わりにどんな文字列を表示するのが最も役に立つのも考慮すべきである。代替テキストとはすなわち画像の「代替」となるものなので、一般的には画像の目的を記述することが多い。例えば、警告標示の画像の代替テキストは「黄色い背景の三角に黒い枠、真ん中に感嘆符」ではなく、シンプルに「警告！」にすべきである。なお、主題が警告標示の形である場合、前者の代替テキストのほうが適切といえる。
Internet Explorer 7およびそれ以前のバージョンではalt属性をツールチップとしてレンダリングするが、これは規格に合致しない実装である[4][5]。この実装により、多くのウェブデベロッパーがalt属性を誤用し、画像の追加情報をツールチップで表示させるためにその情報をalt属性で記述するという状況が発生した[6]。まさにこの目的のためにtitleという属性があるにもかかわらずである[7]。なお、この問題はInternet Explorer 8で修正され、alt属性がツールチップとしてレンダリングされることはなくなった[8]。
alt属性の間違いとして「altタグ」（英: alt tag）と呼称されることがある[5][9][10]。
装飾用の画像[編集]
W3Cの勧告では情報を持たない装飾用の画像はHTMLのマークアップではなくCSSで指定するべきとしている[11]。しかし、時には装飾用の画像をHTMLのimgタグで指定しなければならないときもあり、そのときはalt=""のように代替テキストを空白にすべきとしている[12]。このように指定した場合、スクリーンリーダーやテキストベースブラウザの利用者は装飾用の画像の代替テキストに邪魔されずにページを閲覧することができる。なお、仕様に従わずに空白ではなくalt属性自体を指定しなかった場合、ほとんどのブラウザは何も表示しないのではなく、画像のURL、または何らかの固定文字列を表示する。
関連項目[編集]
外部リンク[編集]
Recent Comments