WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する失敗例である:

解説

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

注記: 要素のセマンティックな意味は一般的に支援技術に受け渡されているが、WAI-ARIA presentation roleは、要素のネイティブなセマンティクスを隠してアクセシビリティ API にマップされないようにするために使用できる。要素の role を presentation に設定すると、その要素のセマンティクスを利用者から隠すことでこの失敗を避けられるかもしれない。

事例

失敗例 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. 要素のセマンティックな意味が支援技術に受け渡され、かつ要素の内容に対して適切であることを確認する。

判定基準