ブラウザがサイズ変更されるときに、行が平均で 80 字以下になるようなカラムの幅を設定するために、相対長さを使用する

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

CSS

これは、次の達成基準に関する達成方法である:

解説

この達成方法の目的は、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>

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注

CSS2 の「Box Model」は、CSS Box Model Module Level 3 で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2020 によれば、今日の CSS を構成する仕様として位置づけられている。

検証

手順

  1. カラム幅が、相対的な単位で定義されているかどうかの検査をする。
  2. 行の長さが、ブラウザのウィンドウをリサイズしても 80 字 (日本語は 40 字) 以下を維持していることを確認する。

期待される結果

  • #1 及び #2 の結果が真である。