alt属性(オルトぞくせい、)はHTMLとXHTMLで使われる。HTML要素が表示できないときに代わりにレンダリングされるテキスト(いわゆる代替テキスト、)を指定する。
この属性はHTML 2.0で導入され、HTML 4.01以降ではimg要素とarea要素において必須となった。またinput要素と非推奨のapplet要素でも指定できるが、こちらは省略できる。
alt属性を指定する目的は大きく2つある。1つは検索エンジンや生成AIなどが画像(img要素)やリンク先(area要素)の意味を解釈できるようにマシンリーダビリティを確保するためである。もう1つは視覚的に情報が得られない人(視覚障害者や、一時的に画面を見ることができない環境にいる人など)が代替情報としてその内容を知ることができるようにアクセシビリティを確保するためである。
img要素におけるalt属性については、必ずしも意味のあるテキストを指定する必要はなく、alt=""のように空文字列を指定することもできる"Alternative Text", WebAIM, last updated 3 September 2015.。ただし、alt属性がないこととalt属性値が空文字列であることは意味が異なるので注意する必要がある。
alt属性の例 right|180px|link=|alt=赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。 例えば、ここにalt属性に「赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。」を指定した画像がある。
HTML において、これは下記のように実装できる。 <img alt="赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg">
Orcaなどのスクリーンリーダーを使う視覚障害者は画像を見る代わりに代替テキストを聞ける。またLynxなどテキストベースのウェブブラウザでは画像の代わりに代替テキストを表示する。GUIベースのブラウザは一般的には画像のみを表示し、ユーザーが明示的に画像のプロパティを表示させたり、ブラウザの設定で画像を表示しないようにしたり、何らかの原因で画像を取得できないかデコードできない場合のみ代替テキストを表示させる。
上記の長い代替テキストの代わりに、簡潔に「デンマークの国旗」とだけ指定することもできる。
一般的な誤解 right|thumb|180px|alt=警告標示|警告標示 alt属性には必ずしも画像の内容を記述する必要はなく、文脈、画像を置く目的、そして画像が見えない人にとって代わりにどんな文字列を表示するのが最も役に立つのも考慮すべきである。代替テキストとはすなわち画像の「代替」となるものなので、一般的には画像の目的を記述することが多い。例えば、警告標示の画像の代替テキストは「黄色い背景の三角に黒い枠、真ん中に感嘆符」ではなく、シンプルに「警告!」にすべきである。なお、主題が警告標示の形である場合、前者の代替テキストのほうが適切といえる。
thumb|Internet Explorer 7はalt属性をツールチップとしてレンダリングする。 Internet Explorer 7およびそれ以前のバージョンではalt属性をツールチップとしてレンダリングするが、これは規格に合致しない実装である。この実装により、多くのがalt属性を誤用し、画像の追加情報をツールチップで表示させるためにその情報をalt属性で記述するという状況が発生した正しい実装をしたMozilla FirefoxのBugzillaではこの正しい実装がバグとして報告されたほどである。。まさにこの目的のためにtitleという属性があるにもかかわらずである。なお、この問題はInternet Explorer 8で修正され、alt属性がツールチップとしてレンダリングされることはなくなった。
alt属性の間違いとして「altタグ」()と呼称されることがある。
装飾用の画像 W3Cの勧告では情報を持たない装飾用の画像はHTMLのマークアップではなくCSSで指定するべきとしている。しかし、時には装飾用の画像をHTMLのimg要素で指定しなければならないときもあり、そのときはalt=""のように代替テキストを空文字列にすべきとしている。このように指定した場合、スクリーンリーダーやテキストベースブラウザの利用者は装飾用の画像の代替テキストに邪魔されずにページを閲覧することができる。なお、仕様に従わずに空文字列ではなくalt属性自体を指定しなかった場合、ほとんどのブラウザは何も表示しないのではなく、画像のURL、または何らかの固定文字列を表示する。
関連項目
脚注
外部リンク Including an image: the IMG element (specially, How to specify alternate text) from the HTML 4.01 specification The img element (specially, Requirements for providing text to act as an alternative for images) from the HTML 5 specification Techniques for WCAG 2.0 (specially, H37: Using alt attributes on img elements) Providing text equivalents for images from Dive Into Accessibility Appropriate Use of Alternative Text from WebAIM Guidelines on alt texts in img elements by Jukka Korpela Alternative text for images: the alt attribute by Estelle Weyl Mini-FAQ about the alternate text of images by Ian Hickson alt属性の管理用ブックマークレット: