WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

G115: 構造をマークアップするために、セマンティックな要素を使用する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

解説

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

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

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

事例

事例 1

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

コード例:


<p>我々の新しいツールをご自身で試したいですか?
<a href="downlod.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. セマンティックな機能がある部分に対応するセマンティックなマークアップがウェブコンテンツ技術に存在する場合、コンテンツがそのセマンティックなマークアップを用いてマークアップされている。

判定基準

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