alt属性
alt属性︵英語: alt attribute︶はHTMLとXHTMLで使われるHTML属性。HTML要素が表示できないときに代わりにレンダリングされるテキスト︵いわゆる代替テキスト、英語: alternative text/alt text︶を指定する。
ウェブページを読み上げるスクリーンリーダーがAlt属性を読み上げることで、ウェブページの内容を聞いている利用者︵例えば耳が聞こえる視覚障害者など︶もそのHTML要素の内容を理解できる。画像のアクセシビリティを向上するためにalt属性を指定すべきだが、alt属性には必ずしもテキストを指定する必要はなく、
alt=
のように何も指定しないこともできる[2]。
この属性はHTML 2.0で導入され[3]、HTML 4.01以降ではimg
タグとarea
タグにおいて必須となった[4]。またi
nput
タグと非推奨の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
属性には必ずしも画像の内容を記述する必要はなく、文脈、画像を置く目的、そして画像が見えない人にとって代わりにどんな文字列を表示するのが最も役に立つのも考慮すべきである。代替テキストとはすなわち画像の﹁代替﹂となるものなので、一般的には画像の目的を記述することが多い。例えば、警告標示の画像の代替テキストは﹁黄色い背景の三角に黒い枠、真ん中に感嘆符﹂ではなく、シンプルに﹁警告!﹂にすべきである。なお、主題が警告標示の形である場合、前者の代替テキストのほうが適切といえる。
title
という属性があるにもかかわらずである[8]。なお、この問題はInternet Explorer 8で修正され、alt属性がツールチップとしてレンダリングされることはなくなった[9]。
alt属性の間違いとして﹁altタグ﹂︵英: alt tag︶と呼称されることがある[6][10][11]。
装飾用の画像
編集関連項目
編集脚注
編集
(一)^ 参考‥クローズドキャプション、字幕放送、聴覚障害者、字幕
(二)^ "Alternative Text", WebAIM, last updated 3 September 2015.
(三)^ “Hypertext Markup Language – 2.0”. World Wide Web Consortium. 2017年4月4日閲覧。
(四)^ “13 Objects, Images, and Applets”. World Wide Web Consortium (1999年12月24日). 2017年4月4日閲覧。
(五)^ “Why doesn’t Mozilla display my alt tooltips?”. 2009年7月22日閲覧。
(六)^ abAnne van Kesteren (2004年12月16日). “Alt attribute (alt tag, alt tooltip)”. 2009年7月22日閲覧。
(七)^ 正しい実装をしたMozilla FirefoxのBugzillaではこの正しい実装がバグとして報告されたほどである。“Bug 25537 - Alt text is not displayed as a tooltip over <img>”. Mozilla Bugzilla. 2017年4月4日閲覧。
(八)^ W3C HTML WG (1999年12月24日). “7.4.3 The title attribute”. HTML 4.01 Specification. W3C. 2009年7月22日閲覧。
(九)^ “What's New in Internet Explorer 8 – Accessibility and ARIA”. MSDN. Microsoft. 2009年2月28日時点のオリジナルよりアーカイブ。2009年7月22日閲覧。
(十)^ Roger Johansson (2005年11月7日). “It’s alt attribute, not alt tag”. 456 Berea Street. 2009年6月8日時点のオリジナルよりアーカイブ。2009年7月22日閲覧。
(11)^ Tommy Olsson (2004年7月20日). “Alt tags”. The Autistic Cuckoo. 2007年12月25日時点のオリジナルよりアーカイブ。2009年7月22日閲覧。
(12)^ W3C. “Embedded content - HTML 5.1 Nightly”. 2013年1月7日閲覧。
(13)^ Steve, Faulkner. “HTML5: Techniques for providing useful text alternatives”. W3C. 2013年1月7日閲覧。
外部リンク
編集- 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 onimg
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属性の管理用ブックマークレット:[1] [2]