【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
CSS
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、1 行が平均 80 字 (日本語なら 40 字) 以下になるようにして利用者がコンテンツを見ることができるように、CSS で指定することである。 こうすることで、テキストの長い行を読む際に、現在読んでいる位置を維持することが困難な読字障害や視覚障害のある利用者が、より効率よくコンテンツをを閲覧したり操作したりできるようになる。 この達成方法はまた、文字サイズの拡大に合わせてカラム幅を広くすることにもなり、それによって、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなる。
この達成方法は、コンテンツ制作者に対して、CSS を使ってデフォルトでテキストの各行の幅を 80 字 (日本語は 40 字) 以下に制限することを要求するものではない、という点に注意してほしい。 それよりもむしろ、CSS レイアウトに相対サイズを用いることを推奨して、利用者が 1 行 80 字以下で読むことができないようなカラム幅には、設定しないようにする。
この例では、div 要素の幅はスタイルシートで em 単位で指定されている。
注記:
CSS プロパティの max-width は、Internet Explorer 6 以前のバージョンではサポートされていない。
コード例:
#main_content {max-width: 70em}
テキストのブロックは、コンテンツ内の div 要素の中に収められる。
コード例:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>
この例では、div 要素の幅はスタイルシートでパーセントで指定されている。
コード例:
#main_content {width: 90%}
テキストのブロックは、コンテンツ内の div 要素の中に収められる。
コード例:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: CSS2 の「Box Model」は、CSS Box Model Module Level 3 で再定義されている。
カラム幅が、相対的な単位で定義されているかどうかの検査をする。
行の長さが、ブラウザのウィンドウをリサイズしても 80 字 (日本語は 40 字) 以下を維持していることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。