WCAG 2.0 実装方法集

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

-

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

適用(対象)

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

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

解説

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

事例

不適合となる事例 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. 見た目に加えて、適切なセマンティック構造によってテキストが表されている。

判定基準

日本語訳における注記:

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