MeLab.

img要素のalt属性の定義に関して、HTML4では画像をレンダリングできないブラウザの場合に表示する代替テキストとして使用され、画像の簡単な説明を入れるというものでした。
そして、詳細な説明をいれる場合にはlongdesc属性を使用することになっています。

HTML5のimg要素の仕様では、longdesc属性は廃止され、alt属性がその役割を果たすことになります。
画像のタイトルをalt属性にいれるのではなく、その画像が表すものを言葉で説明したテキストをいれる、という定義がされています。

詳細については、下記リンクからご覧ください。

• alt属性の使い方が厳密に規定されたHTML5のimg要素
• img 要素

画像が文書の一部として機能する場合

次の「テーマ機能」部分でこのalt属性での代替テキストを入れました。

ソースコードは下記のようになっています。

<h3><a href="https://www.sixapart.jp/movabletype/customize/theme.html">テーマ機能</a></h3>
<p><img src="img/im_function1.png" alt="デザインのテーマ一覧が表示されおり、各テーマをエクスポートするためのポップアップが上に乗っています。" title="テーマ機能（キャプチャ）" width="290" height="140" /></p>
<p>ウェブサイトをデザインするテンプレートや、カスタムフィールド、カテゴリーなどを、まとめて『テーマ』として保存、配布が可能です。</p>

まず、テーマ機能のキャプチャ画像が「テーマ機」という見出しの上にあり、最後に文章でテーマ機能についての紹介が記述されています。
デザインでは画像が先に来ていますが、文書として読んだときにタイトルより先に「説明要素として画像」が書かれているのはおかしいと思いCSSで位置を入れ替えています。

h3要素の下の画像は文章の前にどのような要素が画面にあるのかを表していると判断したので、その画像が表すものをalt属性にいれました。
「デザインのテーマ一覧が表示されおり、各テーマをエクスポートするためのポップアップが上に乗っています。」

画像が表示されない環境では、見出しから順に画像のalt属性、文章の順に読まれると予想されます。

最後に画像にalt属性を入れましたが、title属性でも画像のタイトルを入れておきました。
これはalt属性が入っているので必須ではないですが、入れておいたほうが丁寧かなと思い今までと同じような簡単な説明テキストを記述しました。

画像が文書の一部として機能するまではいかないが、HTML上に掲載する場合

では、alt属性にいれるほど、本文を表すことはないがHTML上に入れておきたい画像と思ったときはどうするのか？
導入事例から「森ビル」のサイトキャプチャの画像の例で見ていきます。

<h3><a href="https://www.sixapart.jp/business/12843.html">森ビル</a><span class="new">NEW!</span></h3>
<img src="img/im_case1.png" alt="" title="森ビルウェブサイト（キャプチャ）" width="146" height="114" />
<p>六本木ヒルズや表参道ヒルズなどの建設・運営で有名な総合ディベロッパーの森ビルは、2008年8月に企業ウェブサイトのリニューアルを行った。新サイトは、最新トピックスを既存のプレスリリースとは異なるアプローチで掲載するなど、一般の利用者を意識した積極的な情報発信が目を引く。</p>

デザインを見ると、森ビルのサイトキャプチャが左側に存在します。
文書として考えたときに、右側の文章にこのサイトのキャプチャが影響するものとは考えませんでした。
右側の文章ではサイトの色やレイアウトなどには触れていないからです。

よって、この画像はHTML上にはあったほうがいいけど、「画像が文書の一部として機能する場合」のようなテキストがなくても成り立つと考えました。
画像には、alt属性は空で、タイトルとしてtitle属性を入れました。

今までのマークアップでいうと、alt属性にタイトルを入れてOKでしたが、HTML5からはタイトルはtitle属性で、その画像を表すテキストはalt属性になりますので、ご注意ください。

ここではコンテストに提出したソースコードの一部を紹介しました。
全体的にご覧になりたい方は、下のリンクから参照してください。

• 応募作品
• 第2回コーディングコンテスト結果発表
• 第2回コーディングコンテスト 開催決定。

勉強中なので、もし間違いなどありましたらご指摘ください。よろしくお願いします！

Similar Posts:

None Found