alt属性（英語: alt attribute）はHTMLとXHTMLで使われるHTML属性。HTML要素が表示できないときに代わりにレンダリングされるテキスト（いわゆる代替テキスト、英語: alternative text/alt text）を指定する。

この属性はHTML 2.0で導入され[2]、HTML 4.01以降ではimg要素とarea要素において必須となった[3]。またinput要素と非推奨のapplet要素でも指定できるが、こちらは省略できる。

alt属性を指定する目的は大きく2つある。1つは検索エンジンや生成AIなどが画像（img要素）やリンク先（area要素）の意味を解釈できるようにマシンリーダビリティを確保するためである。もう1つは視覚的に情報が得られない人（視覚障害者や、一時的に画面を見ることができない環境にいる人など）が代替情報としてその内容を知ることができるようにアクセシビリティを確保するためである。

img要素におけるalt属性については、必ずしも意味のあるテキストを指定する必要はなく、alt=""のように空文字列を指定することもできる[4]。ただし、alt属性がないこととalt属性値が空文字列であることは意味が異なるので注意する必要がある。

alt属性の例

赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。

例えば、ここにalt属性に「赤い背景に白い十字の旗が空をはためいており、旗の十字の縦棒はやや旗竿に寄っている。」を指定した画像がある。

HTML において、これは下記のように実装できる。

<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属性をツールチップとしてレンダリングする。

Internet Explorer 7およびそれ以前のバージョンではalt属性をツールチップとしてレンダリングするが、これは規格に合致しない実装である[5][6]。この実装により、多くのウェブデベロッパー（英語版）がalt属性を誤用し、画像の追加情報をツールチップで表示させるためにその情報をalt属性で記述するという状況が発生した[7]。まさにこの目的のためにtitleという属性があるにもかかわらずである[8]。なお、この問題はInternet Explorer 8で修正され、alt属性がツールチップとしてレンダリングされることはなくなった[9]。

alt属性の間違いとして「altタグ」（英: alt tag）と呼称されることがある[6][10][11]。

装飾用の画像

W3Cの勧告では情報を持たない装飾用の画像はHTMLのマークアップではなくCSSで指定するべきとしている[12]。しかし、時には装飾用の画像をHTMLのimg要素で指定しなければならないときもあり、そのときはalt=""のように代替テキストを空文字列にすべきとしている[13]。このように指定した場合、スクリーンリーダーやテキストベースブラウザの利用者は装飾用の画像の代替テキストに邪魔されずにページを閲覧することができる。なお、仕様に従わずに空文字列ではなくalt属性自体を指定しなかった場合、ほとんどのブラウザは何も表示しないのではなく、画像のURL、または何らかの固定文字列を表示する。

関連項目

脚注

  1. ↑ 参考：クローズドキャプション、字幕放送、聴覚障害者、字幕
  2. ↑ “Hypertext Markup Language – 2.0”. World Wide Web Consortium. 2017年4月4日閲覧。
  3. ↑ “13 Objects, Images, and Applets”. World Wide Web Consortium (24 December 1999). 2017年4月4日閲覧。
  4. ↑ "Alternative Text", WebAIM, last updated 3 September 2015.
  5. ↑ “Why doesn’t Mozilla display my alt tooltips?”. 22 July 2009閲覧。
  6. 1 2 Anne van Kesteren (16 December 2004). “Alt attribute (alt tag, alt tooltip)”. 22 July 2009閲覧。
  7. ↑ 正しい実装をしたMozilla FirefoxのBugzillaではこの正しい実装がバグとして報告されたほどである。“Bug 25537 - Alt text is not displayed as a tooltip over <img />”. Mozilla Bugzilla. 2017年4月4日閲覧。
  8. ↑ W3C HTML WG (24 December 1999). “7.4.3 The title attribute”. HTML 4.01 Specification. W3C. 22 July 2009閲覧。
  9. ↑ “What's New in Internet Explorer 8 – Accessibility and ARIA”. MSDN. Microsoft. February 28, 2009時点のオリジナルよりアーカイブ。22 July 2009閲覧。
  10. ↑ Roger Johansson (7 November 2005). “It’s alt attribute, not alt tag”. 456 Berea Street. 8 June 2009時点のオリジナルよりアーカイブ。22 July 2009閲覧。
  11. ↑ Tommy Olsson (20 July 2004). “Alt tags”. The Autistic Cuckoo. 25 December 2007時点のオリジナルよりアーカイブ。22 July 2009閲覧。
  12. ↑ W3C. “Embedded content - HTML 5.1 Nightly”. 7 January 2013閲覧。
  13. ↑ Steve, Faulkner. “HTML5: Techniques for providing useful text alternatives”. W3C. 7 January 2013閲覧。

外部リンク

⌬ Phoenix Mesh CID: 未登録 IPFS未登録 📡 0ピア N=1 CRITICAL PQS C52