WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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要素の中に収められる。

コード例:
Example Code:


<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字)以下を維持している。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。