WCAG 2.0 実装方法集

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

-

F43: 達成基準 1.3.1 の不適合事例 - コンテンツにおける関係を表さない方法で、構造を示すマークアップを用いている

適用(対象)

HTML 及び XHTML

これは次の達成基準に関する不適合事例である:

解説

この不適合事例では、プレゼンテーション上の効果を実現するために用いられている構造的マークアップが、コンテンツ上には存在しない関係を示している場合に発生する不適合について解説する。この不適合は、コンテンツ上の構造的関係を頼りにナビゲーションを行ったり、コンテンツの一部と他の部分の関係を理解しているユーザーの混乱を招く。なお、<th>要素や<caption>要素など、不適切な構造的マークアップを含んでいなければ、レイアウトテーブルはこの不適合には当たらない。

事例

不適合となる事例 1: 視覚的効果の実現のみのために用いられている見出し

この例では、太字の大きな文字で連絡先住所を表示するために見出しが用いられている。しかし、この連絡先住所がページ中の新しい章や節の開始を示しているわけではないので、見出しとしてマークアップするのは不適切である。

コード例:


<p>詳細に興味をお持ちでしたら、以下までご連絡ください。</p> 
<h4>3333 Third Avenue, Suite 300 · New York City</h4>

<p>完全な情報を一切無料でお送りします。</p>

不適合となる事例 2: プレゼンテーション上の効果を目的とした見出し要素の使用

この例では、見出し要素が文書構造を表すため、そして視覚的な効果を実現するための二つの異なる目的で用いられている。h1及びh2要素はそれぞれ、文書全体の始まりと概要を示す目的で適切に使用されている一方で、タイトルと概要の間にあるh3及びh4要素は、作者の名前と日付を表示するためのフォントを制御する目的で使用されている。

コード例:


<h1>ウェブページにおける見出し要素の利用に関する研究</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>2006年3月14日</h4>
<h2>概要</h2>
<p>研究は2006年初頭に行われ ...
</p>

不適合となる事例 3: 追加の字下げを目的としたblockquote要素の使用

以下の例では、視覚的な表示を行うブラウザにおいてテキストを目立たせる目的で、引用文ではないテキストに対してblockquote要素が使用されている。

コード例:


<p>同社のウェブサイトに関する詳細な検討の結果、タスクフォースは
以下の問題がサイト全体に多く見られることを指摘した。</p>

<blockquote>
<p>視覚的効果を目的としたマークアップの利用により、ページが
スクリーンリーダーの利用者にとって分かりづらいものになっている。</p>
</blockquote>

<p>委員会では、これによってもたらされる問題の具体例を以下に
示している。</p>

不適合となる事例 4: テキストの枠線を表示する目的でfieldset要素とlegend要素を使用する

コード例:


<fieldset>
<legend>バーゲンコーナー</legend>
<p>今購入すると20パーセント割引</p>
</fieldset>

参考リソース

この不適合事例に関するリソースは、今のところない。

検証

チェックポイント

  1. 各要素について、その要素の持つセマンティックが要素の内容に対して適切である。

判定基準

日本語訳における注記:

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