HTML5 Image Description Extension (longdesc 属性) が W3C 勧告候補に

画像に対する長文の説明へのリンクを提供する属性、longdesc 属性に関する HTML5 拡張仕様、「HTML5 Image Description Extension」 が、勧告候補として公開されました。

HTML5HTML5 拡張仕様として策定が進んでいる、「HTML5 Image Description Extension」 が、勧告候補 (Candidate Recommendation / CR) として公開されました。

HTML5 Image Description Extension は、画像に対する、(alt 属性だけでは難しいレベルの) 長文の説明へのリンクを提供する属性、longdesc 属性の仕様を策定するものです。longdesc 属性自体は HTML 4.01 の時代から存在していたものの、HTML5 の仕様には含まれなかったのですが、アクセシビリティ上の理由から必要性が議論され、改めて HTML5 拡張仕様としての策定が進められています。

longdesc 属性についての簡単な説明

longdesc 属性は、img 要素に対して指定することができます。属性値は URI になります。例えば下記のような指定ができます。

<!-- 説明が同一ページにある場合。フラグメント識別子によるリンク -->
<img src="http://example.com/graph.png" alt="○○に関するグラフ"
     longdesc="#graph-explained">
 
<!-- 別ページに説明がある場合 -->
<img src="figure01.png" alt="図版:○○の分解方法"
     longdesc="http://example.com/desc">
 
<!-- 別ページ + フラグメント識別子でリンク -->
<img src="figure02.png" alt="図版:○○の組み立て方法"
     longdesc="http://example.com/descs#section02">
 
<!-- data URI -->
<img src="logo.png" alt="W3C ロゴ" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E
%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E
%3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20
touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20
capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E">

比較的長い説明文でも、通常は alt 属性値に入れてしまえば問題ないのですが、それでは入りきらないくらい細かい説明をしなければならない複雑な図版や、グラフなどは、この longdesc 属性を使用することで、URI によってより詳細な説明を提供することができます。

もちろん、alt 属性に十分な説明を入れた上で、longdesc 属性を併用して、より詳細な説明を別ページでも提供するというように役割分担しても構いません。ただし、longdesc 属性だけ書いて、alt 属性を適当にというような使い方はしないようにしましょう。

ということで、HTML5 Image Description Extension は 8月 26日まで、実装例、テストケースの募集を行っています。

関連エントリー