WCAG 2.0 実装方法集

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

-

G115: セマンティックな要素を用いて、構造をマークアップする

適用(対象)

HTML 4.01及び XHTML 1.xを含むマークアップ言語

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

解説

この実装方法の目的は、適切なセマンティックな要素を用いてウェブコンテンツの構造をマークアップすることである。つまり、要素を、視覚的な見えかたではなく、その意味に基づいて用いることである。

適切なセマンティックな要素を用いることで、ユーザーエージェントが構造を利用できるようになる。この中には、コンテンツの意味を理解する際に、異なる構成要素が持っている役割(role)を明示することも含まれる。段落、見出し、強調されたテキスト、テーブルなどのコンテンツの構成要素の性質は、このようにして示すことができる。場合によっては、見出しと小見出し、テーブルとセルといった複数の構成要素間の関係も示されるべきである。そうすることで、ユーザーエージェントは、たとえば、異なる種類の構造に対しては異なる視覚表現にしたり、聴覚表現では、異なる声又は声の高さを用いたりして、利用者に構造を知覚させることができるようになる。

例えば、HTMLにおいては、emabbr及びciteといった語句レベルの要素は、それぞれ、強調させるため、略語及び引用であることを示すためにテキストをマークすることで、文の中でセマンティックな情報を付加する。 数学における構造と表現の重要な区別を保つために設計されたマークアップ言語であるMathMLには、数学的な概念を表すために用いられる複雑な記号のための特別な「表現」のマークアップも、数学的な概念自体のための「コンテンツ」(セマンティック)マークアップも含まれている。

事例

事例 1

段落には別のページへのハイパーリンクがある。ハイパーリンクはa要素を用いてマークアップされている。

<p>我々の新しいツールをご自身で試したいですか? 
<a href="download.html">ダウンロードコーナー</a>で無料の体験版が入手できます。</p>

事例 2

結婚の歴史についてのページには、ジェーン・オースティンの小説「高慢と偏見」からの引用が事例として用いられている。本への参照は、cite要素を用いてマークアップされ、引用部分自体はblockquote要素を用いてマークアップされている。

<p><cite>高慢と偏見</cite>という小説の第1章にあるように、
結婚は独身男性にとって必然的な段階と考えられていた:</p>
<blockquote>
<p>多くの財産を持った独身男性は妻を必要としているということは、
広く認められた普遍的な真実である。</p>
<p>しかしながら、彼が初めて隣人となったばかりのころは、
このような男性の気持ちやものの見方はほとんど知られてはいなかったが、
この真実は周囲の家々の人の心に定着し、彼は隣人たちの娘の誰か
の正当な所有物であると考えられるようになる。</p>
</blockquote>

事例 3

車の取扱説明書にエンジンのかけ方の説明がある。説明書きには、ギアがニュートラルになっていることを確かめるようにとの警告がある。筆者は、その警告は非常に重要で強調されるべきであると考えていたため、警告はstrong要素を用いてマークアップされている。

<h1>エンジンの始動法</h1>
<p>エンジンをかける前に<strong>ギアがニュートラルになっていることを確認する</strong>。
次にキーを点火の位置まで回しす。
エンジンは始動する。</p>

事例 4

この事例では、テキストを強調するためにem 及び strong要素をどのように用いたらよいかを示している。

<p>彼女が<em>本当に</em> 言おうとしていたのは、
「これは良いではない。それは <strong>すばらしいだ</strong>!」</p>

事例 5: 強調及び背景色を用いて重要な情報を視覚的かつセマンティックに特定する。

<style type="text/css">
.vocab {
background-color:cyan;
font-style:normal;
}
</style>
.......
<p>新出単語は強調され、背景色が空色になっている</p>
<p>その芝居への<em class="vocab">痛烈な</em> 批評はやや行きすぎのようであった。 </p>

参考リソース

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

検証

チェックポイント

  1. セマンティックな機能を有するコンテンツがある。

  2. セマンティックな機能がある部分に対応するセマンティックなマークアップがウェブコンテンツ技術に存在する場合、コンテンツがそのセマンティックなマークアップを用いてマークアップされている。

判定基準

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

日本語訳における注記:

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