このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

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

-

H42: h1要素~h6要素を用いて、見出しを特定する

適用(対象)

HTML 及び XHTML

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

解説

この実装方法の目的は、HTML及びXHTMLの見出しマークアップを用いて、コンテンツ構造を伝達することである。

単にテキストの外観を変えるために見出しマークアップを使うのは、コンテンツの構成をうまく伝達できないばかりか、見出しを構造の理解に用いる利用者や、見出しを使ったナビゲーションを用いる利用者を混乱させる恐れがある。逆に、テキストを太字にしたり、"class=heading"と指定したりしたとしても、見た目が見出しのようになるだけで、支援技術はそのテキストを見出しとは認識できないだろう。

事例

[ここから追加]

事例 1: 階層的な見出し構造

以下の事例では、h3h2のサブセクションで、h2h1のサブセクションとなっていて、見出しが階層的なレイアウトに用いられている。

コード例


<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
  seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
  sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
  group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
  sweetness of their pods...</p>
[追加ここまで]

事例 [ここから変更]2[変更ここまで] :3段組レイアウトの見出し設定

この事例では、3段組の真ん中にページのメインコンテンツがある。メインコンテンツは、ページ内で最初のコンテンツではないが、そのタイトルはページタイトルと同じで、h1要素でマークアップされている。3段組のうち1番目と3番目のコンテンツは重要度が低いため、タイトルがh2要素でマークアップされている。【訳注:見出しを適切にマークアップする方法は、H69: コンテンツの各セクションの開始位置に見出し要素を提供する及びG141: 見出しを用いてウェブページを構造化するを参照するとよい。】

[ここから追加]

注記:以下のコード例は、ウェブページの特定のセクションに対して用いるべき見出しレベルを規定するものではないことに留意することが重要である。レイアウトする際には、各カラムの最初に見出しを同じ見出しレベル(例えば、h1)で提示したり、またはコード例にあるようにメインコンテンツに関してその重要度を反映した見出しレベルで提示したりすることが可能である。

[追加ここまで]

コード例:


<head>
 <title>株式市場アップ・トゥデイ</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>サイトナビゲーション</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>株式市場アップ・トゥデイ</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>関連リンク</h2>
 <!-- content here -->
 </div>
 </body>

参考リソース

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

検証

チェックポイント

  1. コンテンツが見出しであるときに、見出しマークアップを利用している。

  2. コンテンツが見出しでないときは、見出しマークアップを利用していない。

判断基準

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

日本語訳における注記:

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