適用 (対象)
CSS
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.4: テキストのサイズ変更 (参考)
- 達成基準 1.4.8: 視覚的提示 (十分な達成方法)
解説
この達成方法の目的は、1 行が平均 80 字 (日本語なら 40 字) 以下になるようにして利用者がコンテンツを見ることができるように、CSS で指定することである。 こうすることで、テキストの長い行を読む際に、現在読んでいる位置を維持することが困難な読字障害や視覚障害のある利用者が、より効率よくコンテンツを閲覧したり操作したりできるようになる。 この達成方法はまた、文字サイズの拡大に合わせてカラム幅を広くすることにもなり、それによって、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなる。
この達成方法は、コンテンツ制作者に対して、CSS を使ってデフォルトでテキストの各行の幅を 80 字 (日本語は 40 字) 以下に制限することを要求するものではない、という点に注意してほしい。 それよりもむしろ、CSS レイアウトに相対サイズを用いることを推奨して、利用者が 1 行 80 字以下で読むことができないようなカラム幅には、設定しないようにする。
事例
例 1
この例では、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>
例 2
この例では、div 要素の幅はスタイルシートでパーセントで指定されている。
#main_content {width: 90%}テキストのブロックは、コンテンツ内の div 要素の中に収められる。
<div id="main_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p> </div>
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- CSS 2 Box Model
- CSS 2 Visual formatting Model
- CSS 2 Visual formatting Model Details
- About fluid and fixed width layouts
- Accessible CSS
- Ideal line length for content
CSS2 の「Box Model」は、CSS Box Model Module Level 3 で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2020 によれば、今日の CSS を構成する仕様として位置づけられている。
検証
手順
- カラム幅が、相対的な単位で定義されているかどうかの検査をする。
- 行の長さが、ブラウザのウィンドウをリサイズしても 80 字 (日本語は 40 字) 以下を維持していることを確認する。
期待される結果
- #1 及び #2 の結果が真である。