適用 (対象)
CSS をサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.8: 視覚的提示 (十分な達成方法)
- 達成基準 1.4.12: テキストの間隔 (参考)
解説
認知障害を持つ人の多くは、行間なしのテキストのブロックの中で各行を目で追っていくことに困難を覚える。 行の高さが文字サイズの 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.5 と 2 の間であることを確認する。
期待される結果
- #2 の結果が真である。