達成基準 1.3.1 の失敗例 - 情報を伝えるために、適切なマークアップ又はテキストを用いずに、テキストの提示の変化を使用している

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

画像又は提示のマークアップをサポートする全てのウェブコンテンツ技術

これは達成基準 1.3.1: (情報及び関係性 (失敗例) に関する達成方法である。

解説

この文書では、テキストの見た目の変化が、適切なセマンティックマークアップを用いずに意味を伝える場合に発生する失敗例について説明する。この失敗例は、適切なセマンティックマークアップで囲まれていない文字画像にも適用される。

事例

事例 1: CSS を用いて p 要素を見出しのような見た目にする

コンテンツ制作者は見出しを作成しようとしたが、デフォルトの HTML 見出しの見た目を望まなかった。よって見出しのように見えるように P 要素をスタイル付けするために CSS を使用し、これを見出しと呼んだ。しかし、適切な HTML 見出し要素を使用しそこなった。したがって、支援技術はそれを見出しとして見分けることができない。

 <style type="text/css">
 .heading1{
        font-family: Times, serif;
        font-size:200%;
        font-weight:bold;
 }
 </style>

 <p class="heading1">Introduction</p>
 <p>This introduction provides detailed information about how to use this 
 ........
 </p>
注記

この事例で用いるべき適切な手法は、HTML の h1 要素を対象にした CSS を用いて見た目を制御する方法である。

事例 2: 見出しとして用いられる文字画像で、その画像が見出しタグでマークアップされていない

Chapter1.gif は、20 ピクセルの Garamond フォントで表示した「Chapter One」という文字列の画像である。この場合、少なくともこの画像を見出し要素に入れる必要があるため、失敗例である。よりよい手法は、このテキストを見出し要素でマークアップし、この要素に対する CSS を用いて見た目を指定する方法である。

<img src="Chapter1.gif" alt="Chapter One">
 
<p>Once upon a time in the land of the Web.....
</p>

事例 3: 単語やフレーズを強調するために CSS を用いて見た目を制御しているが、その強調のセマンティックを表すマークアップが行われていない場合

以下の例では、CSS の font-weight プロパティを用いて太字に変更している部分の持つ情報について、セマンティックマークアップがされておらず、また明示的なテキスト情報も提供されていないため失敗となる。

以下が CSS で太字の書体を指定するためのクラスである:

.yell {
  font-weight:bold;
  text-transform: uppercase;
}

そして以下が対応する HTML である:

<p>
 "I said, <span class="yell">no</span>, not before dinner!", 
 was the exasperated response when Timmy asked his mother for the 
 fourth time for an ice cream cone. 
 </p>

検証

手順

  1. 文字画像の場合:

    1. 全ての文字画像が、ドキュメントの構造情報を伝えるために使用されているかどうかを確認する。
    2. 適切なセマンティック構造 (例: HTML の見出し) が情報を伝えるためにテキストとともに使用されていることを確認する。
  2. (何らかの構造的な) 情報を表すために見た目が変更されているテキストの場合:

    1. 構造的な情報を表現するために、見た目が変更されているテキストがある。
    2. 見た目に加えて、適切なセマンティック構造によってテキストが表されていることを確認する。

期待される結果

  • 1. の a. の結果が真である場合は、1. の b. の結果が真である。
  • 2. の a. の結果が真である場合は、2. の b. の結果が真である。