文字サイズを変更し、かつテキストコンテナの幅を変更しないときに、コンテンツ又は機能が損なわれないようにする

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

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

適用 (対象)

ウィンドウのサイズを変更するとテキストを折り返す、全てのウェブコンテンツ技術

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

解説

ユーザエージェントの中には、テキストコンテナの幅又は高さを変えることなく、文字サイズの変更をサポートしているものがある。コンテンツ又は機能の損失は、テキストがその割り当てられたスペースからあふれてしまう時に起こりうる。しかし、レイアウトのプロパティは、コンテンツの表示を効果的に継続する方法を提供することができる。ブロックのサイズは、200% まで変更した時に文字があふれないほどの十分な幅を定義している。文字はブロック内に入りきらない時包まり、そしてブロックは、ブロック内にすべての文字が入り続けるために十分な高さとなる。ブロックは変更された文字が入りきらない時、スクロールバーを提供する。

事例

例 1: マルチカラムページレイアウト

HTML と CSS はテキストのページのために2つのカラムのレイアウトを作るために使われている。white-space 特性と normal のデフォルト値を使うことで文字を包み込んでいる。文字のサイズが 200 %になると、文字は再びあふれ、テキストのカラムは長くなる。もしカラムが表示域に対して長すぎると、コンテンツ制作者が overflow:scroll 又は overflow:auto の CSS ルールを指定しているため、ユーザエージェントはスクロールバーを提供し、利用者がビューの中にテキストをスクロールすることができるようにする。

例 2

カラムの中でテキストブロックでレイアウトしている新聞がある。そのブロックは横幅は固定されているが、高さは指定していない。ブラウザでテキストが変更された時、文字は包まれ、ブロックは高さが高くなる。

検証

手順

  1. テキストサイズを 200%に拡大する。
  2. 全てのコンテンツ及び機能が利用可能であるかどうかを確認する。

Expected Results

  • #2 の結果が真である。