WCAG 2.0 実装方法集

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

-

C21: 行送りをCSSで指定する

適用(対象)

CSSをサポートする全てのウェブコンテンツ技術

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

解説

認知障害を持つ人の多くは、行間なしのテキストのブロックの中で各行を目で追っていくことに困難を覚える。 行の高さが文字サイズの1.5~2倍程度あると、前の行を読み終えて次の行へより簡単に読み進めていけるようになる。

事例

事例 1

要素の行の高さを1.5に設定。スタイルシートで要素の特性を設定している。

コード例:

p { line-height: 150%; }

コンテンツ側では、その要素はドキュメント全体を通して行の高さが1.5になる。

コード例:

<p> Lorem ipsum dolor sit …  </p>

事例 2

クラスを指定した要素の行の高さを1.5(行送り1.5文字)に設定。スタイルシートでクラスの表示を定義。

コード例:
Example Code:

p.tall {line-height:150%}

コンテンツ側では、以下のようにクラスを指定している。
In the content, call up the class.

コード例:

<p class="tall"> Lorem ipsum dolor sit …  </p>

事例 3

行間を1行分空けるクラスを設定する。スタイルシートでクラスの表示を定義。

コード例:

p.tall {line-height:200%}

コンテンツ側では、以下のようにクラスを指定している。

コード例:

<p class="tall"> Lorem ipsum dolor sit …  </p>

検証

チェックポイント

  1. ブラウザでコンテンツを開く。

  2. テキストのブロック内の行送りが1.5~2文字分ある。

判定基準

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

日本語訳における注記:

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