WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F2: 達成基準 1.3.1 の失敗例 - 適切なマークアップ又はテキストを用いずに、テキストの見た目の表現の変化を用いて情報を伝えている

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

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

適用(対象)

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

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

解説

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

事例

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

コンテンツ制作者が、見出しの作成にあたってHTML の見出し要素のデフォルトとは異なる見た目にする目的で、p 要素に対して CSS を適用して見出しのような見た目を実現し、これを見出しとして扱っている場合。このような場合においては、適切なマークアップがされていないために支援技術がこれを見出しとして認識できない。

コード例:


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

 <p class="heading1">はじめに</p>
 <p>この章では、この製品の詳しい使い方について
 ........
 </p>

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

失敗例 2: 画像化されたテキストが見出しとして用いられている際、その画像が見出しタグでマークアップされていない場合

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

コード例:


      <img src="Chapter1.gif" alt="Chapter 1">
 
<p>むかしむかし、ウェブの国で.....
</p>

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

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

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

コード例:


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

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

コード例:

<p>
「<span class="yell">だめよ</span>、食事の前はだめだって言ったでしょ!」
ティミーが母親に 4 回アイスクリームをねだった時、彼女は苛立ってそう答えた。
 </p>

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

  1. 画像化されたテキストについて:

    1. 画像化されたテキストが、ドキュメントの持つ構造的な情報を表すために使用されている。

    2. 適切なセマンティック構造(例: HTML の見出し)を用いて画像化されたテキストの情報が表されている。

  2. (何らかの構造的な) 情報を表すために見た目が変更されているテキストについて:

    1. 構造的な情報を表現するために、見た目が変更されているテキストがある。

    2. 見た目に加えて、適切なセマンティック構造によってテキストが表されている。

判定基準