WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

H50: 構造を示す要素を用いて、リンクをグループ化する

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、リンクを論理的な一組にグループ化する方法を示すことである。リンクを論理的な一組(たとえば、サイト内の各ページに設置するナビゲーションバーやメインメニュー)にグループ化する場合、それらはひとつの単位としてマークアップされるべきである。通常、ナビゲーションバーは、利用者がページ上で遭遇する最初のものである。目の見える利用者はナビゲーションパーツを無視でき、そのページのコンテンツから読み始めることがある。しかし、スクリーンリーダーの利用者は、興味のあるコンテンツを読み始める前に、ナビゲーションバーに含まれるリンクテキストそれぞれの読み上げを聞かなければならない。スクリーンリーダーの利用者がナビゲーションバーを飛ばしたり、そこに含まれる全てのリンクの読み上げを回避したりできるようにする、コンテンツのマークアップの方法は何通りかある。

次のメカニズム(上から好ましい順)のどれかを利用して、リンクをグループ化する:

事例

事例 1:リンクのグループ化にリストを利用

この事例では、リンクをul要素とli要素でグループ化している。

コード例:

<a name="categories" id="categories"></a><h2>商品カテゴリー</h2>
<ul class="navigation">
    <li><p><a href="kitchen.html">キッチン</a></p></li>
    <li><p><a href="bedbath.html">ベッドとバス</a></p></li>
    <li><p><a href="dining.html">ダイニング</a></p></li>
    <li><p><a href="lighting.html">照明</a></p></li>
    <li><p><a href="storage.html">収納</a><li><p>
</ul> 

CSSを利用してリスト要素のスタイルを変更できるので、この方法の視覚表現は多様である。

次のスタイルでは、リストのビュレットと、インデントを生成している左側のパディングをなくし、各リスト要素を横に並べるように設定している。

コード例:

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

次のスタイルでは、リストのビュレットと左側のパディングをなくし、各リスト項目を浮動化ブロックとして表示するように設定している。

コード例:

ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

事例 2:リンクのグループ化にmap要素を利用

この事例では、map要素でリンクを一組にグループ化し、title属性でナビゲーションバーという役割を特定している。

コード例:

 <map title="ナビゲーションバー">
  <p>
    [<a href="home.html">ホーム</a>] 
    [<a href="search.html">検索</a>] 
    [<a href="new.html">新着とハイライト</a>] 
    [<a href="sitemap.html">サイトマップ</a>]
  </p>
 </map>  

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

(現在、何も示されていない。)

検証

チェックポイント

コンテンツに一緒にグループ化すべきa要素がある。

  1. a要素をリストまたはmap要素でグループ化している。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。