WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C20: カラム幅に相対サイズを用いて、ブラウザの画面サイズを変更しても各行の文字数が平均 80 字(日本語は 40 字)以下を維持できるようにする

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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>

参考リソース

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

検証

チェックポイント

  1. カラム幅が、相対的な単位で定義されている。

  2. 行の長さが、ブラウザのウィンドウをリサイズしても 80 字(日本語は 40 字)以下を維持している。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。