サイト内検索

HTML5 の “ブロック・レベル“ リンク

この記事は、html5doctor に掲載されている記事「“Block-level“ links in HTML5」を日本語訳したものです。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

HTML5 の “ブロック・レベル“ リンク

HTML5 の中には、新しくてエキサイティングなことがある。それは、“ブロック・レベル”の要素をリンクで囲むことができるということだ。

あなたは、たくさんのニュース記事のティザーがあるフロント・ページを持っており、それぞれのティザーはその記事の全文が掲載された専用のページにリンクされていると、想像してほしい。間違いなく、それぞれの記事には見出しが必要だし、あなたはイメージも入れ、すべてクリッカブルにしたいだろう。今のところ、あなたなら、こんな風にマークアップするだろう:

<div class="story">
<h3><a href="story1.html">Bruce Lawn は地球でもっともセクシーな男に選ばれました</a></h3>
<p><a href="story1.html"><img src="bruce.jpg" alt="全文" />地球上のすべての女性を代表する評議会は、全会一致で、Bruce Lawson をもっともセクシーな男として選出しました。</a></p>
<p><a href="story1.html">もっと読む</a></p>
</div>

3 つの別々のリンクがあることに注目してほしい(BBC News のサイトのように、読者に “もっと読む” のリンクを提示する必要がないのであれば、2 つだ)。

HTML5 では、このようなコードになる:

<article>
<a href="story1.html">
<h3>Bruce Lawn は地球でもっともセクシーな男に選ばれました</h3>
<p><img src="bruce.jpg" alt="ゴージャスなラブバンドル">地球上のすべての女性を代表する評議会は、全会一致で、Bruce Lawson をもっともセクシーな男として選出しました。</p>
<p>もっと読む</p>
</a>
</article>

これで、ひとつのリンクでティザー全体を囲み、重複が削除され、クリックできる領域がずっと広くなった。

ついでに、アクセシビリティについて 2 つ指摘しておこう:1 つ目だが、あなたは、それぞれの "もっと読む" が違うページに行ってしまうという心配する必要がなくなる(WCAG 2 を見てほしい)。なぜなら、そのストーリ全体がリンクだからだ。それで、そのリンク・テキストはひとつしかない。2 つ目だが、イメージの代替テキストを変更した点に注目してほしい。最初の例では、イメージはリンクだから、私はそのリンク先の説明を入れた。しかし、2つ目の例は写真だけだ。だから私はそのイメージそのものの説明 —”ゴージャスなラブバンドル”— を入れたんだ。そのため、スクリーン・リーダーのユーザーに、より多くの情報を伝えることができるようになる。

輝かしいけれども新しくはない

このテクニックでとてもおもしろいことは、本当のところ、これは新しいわけではないということだ:あなたは、今でもそれをすることができる。XHTML 2 はよく似たメカニズムがあり、どんな要素にも href を入れることができる。Eric Meyer はこれを HTML5 に導入するよう求めたが、もちろん、これは後方互換性がない。同じ問題に対する彼の他の解決策に、a に対する規則を変えるというのがあった。私のテストページは、それはすべてのブラウザーで今でもうまく動くということを示している。

これは、HTML5 の興味深いことのひとつだ。— HTML5 は既存のブラウザーの挙動を明文化しているのだ。ブラウザーはすでにブロック・レベルの要素を取り囲むリンクに対応している。そして、明らかな利用事例があり、人為的にその構造を非準拠としておく理由はなかったのだ。

(ちょっと皮肉を:Eric Meyer がもともとの想定していた利用シーンは、テーブルの行のすべてのセルをリンクにすることだった。これは HTML5 では動かない;そうするにはスクリプトが必要だ。)