行送り幅を CSS で指定する

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

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

適用 (対象)

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

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

解説

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

事例

例 1

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

p { line-height: 150%; }

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

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

例 2

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

p.tall {line-height:150%}

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

<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 の間であることを確認する。

期待される結果

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