画像又は表現のマークアップをサポートする全てのウェブコンテンツ技術
これは次の達成基準に関する不適合事例である：
この文書では、何らかの意味を伝えるためのテキストの見た目の変化が、適切なマークアップを用いずに実現されている場合に発生する不適合について解説する。この不適合事例は、適切なセマンティック・マークアップを用いて表されていない画像化されたテキストにも適用されるものである。
コンテンツ制作者が、見出しの作成にあたって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を用いて見た目を制御する方法である。
Chapter1.gifは、20ピクセルのGaramondフォントで表示した「Chapter 1」という文字列を画像化したものである。この場合、少なくともこの画像を見出し要素に入れる必要があるため、不適合である。よりよい手法は、このテキストを見出し要素でマークアップし、この要素に対するCSSを用いて見た目を指定する方法である。
コード例:
<img src="Chapter1.gif" alt="Chapter 1">
<p>むかしむかし、ウェブの国で.....
</p>
以下の例では、CSSのfont-weightプロパティを用いて太字に変更している部分の持つ情報について、セマンティックを表すマークアップがされておらず、また明示的なテキスト情報も提供されていないため不適合となる。
以下がCSSで太字の書体を指定するためのクラスである:
コード例:
.yell {
font-weight:bold;
text-transform: uppercase;
}
そして以下が対応するHTMLである:
コード例:
<p>
「<span class="yell">だめよ</span>、食事の前はだめだって言ったでしょ！」
ティミーが母親に4度目にアイスクリームをねだった時、彼女はいらだってそう答えた。
</p>
この不適合事例に関するリソースは、今のところない。
画像化されたテキストについて:
画像化されたテキストが、ドキュメントの持つ構造的な情報を表すために使用されている。
適切なセマンティック構造（例： HTMLの見出し）を用いて画像化されたテキストの情報が表されている。
（何らかの構造的な) 情報を表すために見た目が変更されているテキストについて:
構造的な情報を表現するために、見た目が変更されているテキストがある。
見た目に加えて、適切なセマンティック構造によってテキストが表されている。
1.のa.に該当する場合は、1.のb.を満たしている。
2.のa.に該当する場合は、2.のb.を満たしている。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。