折り返しのないテキストの間隔を見込む

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

Cascading Style Sheets (CSS) をサポートするウェブコンテンツ技術を使用したコンテンツ

これは、 達成基準 1.4.12: テキストの間隔を理解する (十分) に関連する達成方法である。

解説

この達成方法の目的は、利用者がユーザスタイルシート、ブックマークレット、拡張機能、又はアプリケーションを介してテキスト間隔を上書きできるようにすることである。段落、行、単語、及び文字の間隔を広げることは、ロービジョン又はは認知障害のある人に役立つ。コンテンツは、テキストを含む要素を必要に応じて拡大できるようにすることで、コンテンツ又は機能を損なうことなく間隔を変更できる必要がある。

テキストが折り返しを意図していない場合、コンテンツ制作者は以下のいずれかを行うべきである:

文字及び単語の間隔を設定するときに、単語又はフレーズが大きくなる幅にはある程度のばらつきがある。要素で固定幅を使用しなければならない場合、安全な値はデフォルトの最大幅より 20 %広くなる。例えば、小さなテキストコンテナで 20 文字を見込む場合、24 文字の十分な幅を考慮することでテキスト間隔を適用するのに十分なスペースを割り当てるべきである。

テキストで拡大できるボックスの場合、コンテンツ制作者は、CSS display プロパティの inline-block 値を利用し、負のマージンを設定しないことで、テキスト間隔を上書きすることができる。

事例

利用者がページを調整してテキストの間隔を広げると、テキストはその包含ボックスの境界内に収まる。

注記

ex は文字幅に最も近い利用可能な単位として使用されている。ex という単位は「要素のフォントの x-height を表す」ものである (MDN の CSS における単位を解説したページ)。これは完璧ではなく、違う文字ではデフォルトの幅も異なる。

事例 1: 拡張できる間隔があるサイズのボックス

コンテナはテキストのデフォルト幅より大きいサイズとなる。

/* リンクの幅は 8ex より少ないため、10ex の幅である li により、文字や単語の幅を拡張することができる。 */
 nav li { width: 10em; }

<!-- HTML -->
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/contact/">Contact</a></li>
  <ul>
 </nav>

ナビゲーション要素が同じサイズの固定幅コンテナを使用した場合、その幅は最長の単語より 20 %大きいテキストを許可する必要がある。

事例 2: テキストサイズで拡大するボックス

/* CSS コンテナは、display を inline-block としている。負のマージンはセットしていない。 */
 nav li { display: inline-block; }

<!-- HTML -->
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/contact/">Contact</a></li>
  <ul>
 </nav>

各アイテムが可変幅テキストコンテナの場合、親アイテムは各アイテムを折り返しできるようにする必要があってもよい。

事例 1 と 事例 2 の実例 が利用可能である。

検証

手順

折り返しを意図していないテキストを含む要素の場合:

  1. ズームレベルを 100 %に設定する。
  2. Text Spacing Bookmarklet やユーザスタイルを指定するブラウザプラグインなどの、テキスト間隔のメトリック (行高さ、段落、文字、及び単語の間隔) を適用するツール又は別のメカニズムを使用する。
  3. 全てのコンテンツ及び機能が利用可能であることを確認する。例えば、コンテナ内のテキストが切り取られていないこと、及び他のコンテンツと重なっていないことを確認する。

期待される結果

  • 3 の結果が真である。
注記

ページに複数のレイアウト (例えばレスポンシブデザイン) がある場合、各レイアウトでテキストの間隔を検証すべきである。