longdesc属性(HTML5 Image Description Extension)が勧告候補になった。

HTML5 Image Description Extension (longdesc)が勧告候補になったので、HTML5のlongdesc属性の使い方を改めて確認することにする。

longdesc属性

longdesc属性はHTML 4.01でサポートされていて、画像フレームに詳細な説明が書かれたページへのリンクを設定することができます。


<img 
    src="image"
    alt="alt text"
    longdesc="explain.html"
>

longdesc属性はHTML 4.01の時から存在していましたが、ほとんどのブラウザでサポートされておらずHTML5の当初の仕様では廃止となっていましたが、議論されHTML5の拡張仕様として復活しています。

HTML5のlongdesc属性

HTML5のlongdesc属性の仕様はHTML 4.01の仕様をベースにはされていますが、値として指定できるのはURIだけではありません。
HTML5 Image Description Extension (longdesc)に書かれていることですが、指定できる値は以下のとおり画像などのオブジェクトを説明する別のドキュメントのURIや同じHTML文章内のIDやData URIです。

URIを指定(別ページ)


<img 
    src="image"
    alt="alt text"
    longdesc="http://explain.com"
>

URI:フラグメントID付き(別ページ)


<img 
    src="image"
    alt="alt text"
    longdesc="http://explain.com#fragment"
>

フラグメントID(同一ページ)


<img 
    src="image"
    alt="alt text"
    longdesc="#fragment"
>


<div id="flagment">
このdiv要素内に説明が入ります。
</div>

data: URI(HTMLのソースコードをBase64に変換)


<img 
    src="image"
    alt="alt text"
    longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E
%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3E説明文%3C/p%3E%3C/body%3E%3C/html%3E"
>

同じような仕様としてWAI-ARIAのaria-describedbyやaria-describedatがあります。それらについては以下のエントリーで書いていますので興味ありましたら合わせてお読みください

WAI-ARIA 1.1で追加されたaria-describedatプロパティについて

参考