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

適用 (対象)

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

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

解説

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

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

• コンテナのサイズをテキストのデフォルト幅よりも大きい値にする、又は
• コンテナをテキストの方向に拡張できるようにする。

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

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

事例

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

/* リンクの幅は 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>

/* 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>

関連する達成方法

• C36: テキスト間隔を上書きできるようにする

検証