【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用 (対象)

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

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。