達成基準 1.4.4 の失敗例 - 視覚的にレンダリングされたテキストを 200% まで拡大するときに、テキスト、画像又はコントロールが、切り取られたり、端が欠けたり、又は覆い隠されたりする

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

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

適用 (対象)

HTML、XHTML 及び CSS

これは達成基準 1.4.4: テキストのサイズ変更 (失敗例) に関する達成方法である。

解説

この文書は、テキストのサイズ変更によって、テキストが切り取られたり、端が欠けたり、又は覆い隠されたりして、利用者がテキストを入手できなくなるという失敗例について述べている。一般的に、この失敗例は、ユーザエージェントのレイアウトエンジンが、HTML 内の新しいフォントサイズについてのレイアウトヒントのすべてには対応できない場合に発生する。これが発生する方法には、下記のようなものがある:

注記

WCAG ワーキンググループは、この失敗例の検証方法に多くの誤解があることを確認している。この失敗例の文書を次回の更新時に修正する予定である。それまでは、コンテンツが「十分な達成方法」のいずれかを用いて達成基準を満たしていれば、この失敗例には該当しないと考えてよい。

事例

事例 1

フォントサイズはスケーラブルな方法で設定されているが、コンテナは固定ピクセルサイズに設定されている。灰色のボーダーは、テキストのコンテナの境界線を示している。テキストが拡大されるとき、そのコンテナからあふれ、次のパラグラフを覆い隠す。

<div style="font-size:100%; width:120px; height:100px; 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>

事例 1 のイラストによる説明:

図1 : コンテナーの外側にテキストがこぼれている例で、ページ上の他のテキストが見えなくなっている。

事例 2

この事例は、コンテナがテキストを切り取るように設定されることを除けば、前の失敗例と同じである。テキストは次のパラグラフに流れ出してはいないが、端が欠けている。これも失敗例である。

<div style="font-size:100%; width:120px; height:100px; 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>

事例 2 のイラストによる説明:

図2 : テキストのサイズが変更されたために切り捨てられたテキストを示す例

検証

手順

注記

WCAG ワーキンググループは、この失敗例の検証方法に多くの誤解があることを確認している。この失敗例の文書を次回の更新時に修正する予定である。それまでは、コンテンツが「十分な達成方法」のいずれかを用いて達成基準を満たしていれば、この失敗例には該当しないと考えてよい。

  1. コンテンツのテキストの文字サイズを 200 %拡大する。
  2. テキストが切り取られたり、端が欠けたり、又は覆い隠されたりしていない。

期待される結果

  • 手順 2. の結果が偽である場合、失敗例の条件は適用され、コンテンツは達成基準の失敗となる。