画像の代替テキストとマイクロデータ

2013年5月29日 著

少し前に話題になった、組織のロゴの schema.org マークアップのサポートを開始しましたという記事。正直、だから何？という気がしなくもなかったけれど、実装するのはえらく簡単なので、勤務先のサイトに実装してみました。その際、同記事に掲載されていた、以下のようなマークアップを参考にしました。

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Home</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>

この例だと、img要素のalt属性が省略されているのが非常に微妙な感じですが、そこは本論ではないのでスルーしておきます。勤務先のサイトの場合、型にはOrganizationではなく、より詳細な型のCorporationを採用しました。プロパティの一覧を眺めるうち、社名も機械的に読み取れるようにすべきというか、ロゴ画像のURLなんかよりむしろそっちがずっと重要じゃないか！！というわけで、nameプロパティ値も指定したいと思い始めました。

社名は、多くの企業サイトもそうかもしれないけどけど、ロゴ画像の代替テキストに書いてあります。しかし画像の代替テキストって、マイクロデータのプロパティ値として利用できないんですよね（Bug 9533 - The Microdata extration algorithm should include image alt-text when extracting the contents of an element as a stringあたりを参照）。itemprop属性を付与されたimg要素では、常にsrc属性値つまりURLがプロパティ値として使われるよう定義されています。そのため、社名はどこか、ロゴ画像の代替テキストとは別に書かれている箇所から引っ張ってくるよう、itemref属性を使うなどする必要があるっぽい（あくまでも勤務先のサイトで今現在の設計をいじらない場合は）。

ロゴ画像の代替テキスト以外で、サイト内の全てのページで一貫して社名を書いてある場所といえば、title要素。しかし、title要素内で社名の部分をスパンキング（注：span要素でマークアップすることの俗称）し、itemprop属性を記述......なんてことはNG。HTML5におけるtitle要素のコンテンツ・モデルは「テキスト」であり、フレージング・コンテンツ（span要素含む）でもあるけれど、text/htmlな文書におけるtitle要素内容の解析ルールとしては、生テキストとして処理するのが正らしい。実際、title要素内でspan要素をマークアップしても、タグがそのままブラウザのタイトルバーに表示されてしまったりします。

......何の話でしたっけ。特にオチはないのですけど、要するに画像の代替テキストをマイクロデータで活用できないのは今更ながら残念に感じた、とまぁそういうお話。あるいは自分が盛大に勘違いしているだけで、何か良い解決策をご存知でしたら、どなたか教えてください m(_ _)m