適用 (対象)
Cascading Style Sheets (CSS) をサポートするウェブコンテンツ技術を使用したコンテンツ。
これは、達成基準 1.4.12: テキストの間隔 (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、利用者がユーザスタイルシート、ブックマークレット、拡張機能、又はアプリケーションを介して、テキストの間隔を上書きできるようにすることである。段落、行、単語、及び文字の間隔を広げることで、ロービジョン又はいくらかの認知障害のある人にとってメリットとなる。コンテンツは、コンテンツ又は機能を損なうことなく、間隔の変更を可能にする必要があるため、テキストコンテナは、テキストを拡張できるスペースがあるか、又はコンテナが拡張できるかのいずれかでなければならない。この達成方法は、通常、ナビゲーションバーなどの短い文字列に適用される。長い文字列では、スタイルが変更されたときに、読みやすさのために折り返しが求められる可能性が高くなるためである。
英語では、コンテンツ制作者が CSS の height プロパティを設定しなければ、段落が確実に広がるようにすることができる。段落は、水平方向に読まれる英語のような言語もしくはスクリプトの場合はテキストを垂直方向に増やすことができる、又は、垂直方向に読まれる言語もしくはスクリプトの場合はテキストを水平方向に増やすことができる必要がある。
事例
利用者がページを調整してテキストの間隔を広げると、テキストは包含ボックスの範囲内に収まる。
例 1: 段落がコンテナの中で縦に広がる
/* CSS: No height property is set.*/
<!-- HTML -->
<div class="card">
<img src="image.png" alt="proper alt text">
<h3>Heading</h3>
<p class="lede">Long lede paragraph…</p>
</div>
このページのどの段落も高さが指定されていないので、すべてがこの達成方法を有効に使用していることになる。
検証
手順
折り返しを意図したテキストを含む要素について:
- ズームのレベルを 100％に設定する。
- ツール又は別のメカニズム、例えば Text Spacing Bookmarklet 又はユーザスタイルのブラウザプラグインなどを用いて、テキスト間隔のメトリクス (行の高さ、及び段落、文字、単語の間隔) を適用する。
- すべてのコンテンツと機能が利用可能であることを確認する。例えば、コンテナ内のテキストが切り取られていないか、他のコンテンツと重なっていないか、など。
期待される結果
- 手順 #3 の結果が真である。
1 つのページに複数のレイアウトがある場合 (例: レスポンシブデザインなど)、テキストの間隔は各レイアウトでテストすべきである。