適用 (対象)
HTML 及び XHTML
これは達成基準 1.3.1: 情報及び関係性 (失敗) に関する達成方法である。
解説
この失敗例では、プレゼンテーション上の効果を実現するために用いられている構造的マークアップが、コンテンツ上には存在しない関係を示している場合に発生する失敗について解説する。この失敗例は、コンテンツ上の構造的関係を頼りにナビゲーションを行ったり、コンテンツの一部と他の部分の関係を理解している利用者の混乱を招く。なお、<th> 要素や <caption> 要素など、不適切な構造的マークアップが含まれていない限り、HTML テーブルをレイアウトに使用することはこの失敗例には当たらない。
要素のセマンティックな意味は一般的に支援技術に受け渡されているが、WAI-ARIA presentation role は、要素のネイティブなセマンティクスを隠してアクセシビリティ API にマップされないようにするために使用できる。要素の role を presentation に設定すると、その要素のセマンティクスを利用者から隠すことでこの失敗を避けられるかもしれない。
事例
例 1: 視覚的効果の実現のみのために用いられている見出し
この例では、太字の大きな文字で連絡先住所を表示するために見出しが用いられている。しかし、この連絡先住所がページ中の新しい章や節の開始を示しているわけではないので、見出しとしてマークアップするのは不適切である。
<p>Interested in learning more? Write to us at</p> <h4>3333 Third Avenue, Suite 300 · New York City</h4> <p>And we'll send you the complete informational packet absolutely Free!</p>
例 2: プレゼンテーション上の効果を目的とした見出し要素の使用
この例では、見出し要素が文書構造を表すため、そして視覚的な効果を実現するための二つの異なる目的で用いられている。h1 及び h2 要素はそれぞれ、文書全体の始まりと概要を示す目的で適切に使用されている一方で、タイトルと概要の間にある h3 及び h4 要素は、作者の名前と日付を表示するためのフォントを制御する目的で使用されている。
<h1>Study on the Use of Heading Elements in Web Pages</h1> <h3>Joe Jones and Mary Smith<h3> <h4>March 14, 2006</h4> <h2>Abstract</h2> <p>A study was conducted in early 2006 ... </p>
例 3: 追加の字下げを目的とした blockquote 要素の使用
以下の例では、視覚的な表示を行うブラウザにおいてテキストを目立たせる目的で、引用文ではないテキストに対して blockquote 要素が使用されている。
<p>After extensive study of the company Web site, the task force identified the following common problem.</p> <blockquote> <p>The use of markup for presentational effects made Web pages confusing to screen reader users.</p> </blockquote> <p>The committee lists particular examples of the problems introduced by this practice below.</p>
例 4: テキストの枠線を表示する目的で fieldset 要素と legend 要素を使用する
<fieldset> <legend>Bargain Corner</legend> <p>Buy today, and save 20%</p> </fieldset>
検証
手順
- 要素のセマンティックな意味が支援技術に公開され、かつ要素のコンテンツに対して適切であることを確認する。
期待される結果
- #1 の結果が偽である場合、この失敗条件が適用される。