達成基準 1.4.12 の失敗例 － テキストの間隔を調整したときにコンテンツが切り取られたり重なったりする

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

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

適用 (対象)

この達成方法は、テキストスタイルプロパティをサポートするマークアップ言語で作成されたテキストコンテンツに適用される。

これは、達成基準 1.4.12: テキストの間隔 (失敗例) に関する達成方法である。

解説

この達成方法の目的は、テキストの間隔の達成基準で設定された範囲内で、利用者がテキストの間隔を上書きした場合に、コンテンツの一部が切り取られて読めなくなるという失敗条件を特定しテストすることにある。一般的に、この失敗は、コンテンツのサイズが大きくなっても拡大しないサイズ制約のあるブロックでテキストが提示されたときに発生する。これを発生させ得る方法としては、以下のようなものがある:

事例

例 1: テキストの間隔が実装されている場合、ボックス内のテキストがオーバーフローし、その下のテキストと重なる。

以下のコードは、利用者が CSS でテキストの間隔を上書き実装する前に DOM に実装されているものである。テキストはボックス内に正しくレンダリングされ、次の段落に干渉しない。

<div style="font-size:100%; width:130px; height:95px; border: thin solid gray;"> Now is the time for all good men to come to the aid of their country. </div> <p>Now is the time for all good men to come to the aid of their country.</p>

Now is the time for all good men to come to the aid of their country.

Now is the time for all good men to come to the aid of their country.

これは、達成基準が定めるテキストの間隔にて、利用者がテキストの間隔を上書した後のビューである。テキストはその下の段落と重なっている。

Now is the time for all good men to come to the aid of their country.

Now is the time for all good men to come to the aid of their country.

例 2: テキストの間隔が実装されている場合、ボックス内のテキストが切り取られる。

以下のコードは、利用者が CSS でテキストの間隔を上書き実装する前に DOM に実装されているものである。テキストはボックス内に正しく表示され、次の段落に干渉しない。

<div style="font-size:100%; width:130px; height:95px; overflow: hidden; border: thin solid gray;"> Now is the time for all good men to come to the aid of their country. </div> <p>Now is the time for all good men to come to the aid of their country.</p>

これは、テキストの間隔が利用者によって上書きされる前のデフォルトのビューである。テキストはボックス内で適切にレンダリングされている。

Now is the time for all good men to come to the aid of their country.

Now is the time for all good men to come to the aid of their country.

これは、達成基準が定める最大のテキストの間隔にて、利用者がテキストの間隔を上書きした後のビューであり、テキストは切り取られている。

Now is the time for all good men to come to the aid of their country.

Now is the time for all good men to come to the aid of their country.

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

  1. ページを開き、利用可能なコンテンツを確認する。
  2. ユーザスタイルシート、ブックマークレット、拡張機能、又はアプリケーションを用いて、達成基準に記載された値で、そのページの CSS を上書きする。
    1. 行の間隔をフォントサイズの少なくとも 1.5 倍に設定する
    2. 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する
    3. 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する
    4. 単語の間隔をフォントサイズの少なくとも 0.16 倍に設定する
  3. テキストの間隔を新しく変更したことにより、コンテンツが切り取られたり、隠されたり、又は失われたりしていないかどうかを確認する。

期待される結果

  • 手順 #3 が真である場合、この失敗条件が適用され、コンテンツは達成基準を満たさないことになる。