適用 (対象)
これは達成基準 1.4.4: テキストのサイズ変更 (失敗例) に関する達成方法である。
解説
この達成方法の目的は、テキストにビューポート単位が使用されている場合、テキストのサイズ変更ができないという失敗を記すことである。これらの単位はビューポートに対して相対的なものであるため、画面を拡大したりテキストサイズを調整しても、サイズを変更することができない。
テキスト及びその他のコンテンツのサイズを増減する方法は様々あるが、ほとんどの方法は、テキストにビューポート単位が（一般的には CSS の font-size を介して）適用されていると、利用できない。ブラウザのコントロールを使用して画面表示を拡大したりテキストを調整したりしても機能しないだろう。CSS を完全にオーバーライドする方法のみが機能するだろうが、その場合、レイアウトが崩れたりテキストが重なったりなど他の問題が発生する可能性がある。
ビューポート単位の使用法によっては、テキストサイズの調整を妨げない場合もあるが、ビューポート単位がテキストサイズを定義するための主要な方法として使用されている場合、達成基準 1.4.4 の失敗の原因となる可能性がある。
メディアクエリを使用して、異なる画面サイズでテキストのサイズや単位を調整している場合、テキストのサイズ変更の失敗には該当しないかもしれない。コンテンツ制作者がページ上に提供するコントロールもまた、テキストのサイズ変更の達成基準を満たすためのひとつの手段である。
事例
例 1: 失敗例 1
以下の CSS と HTML のスニペットでは、VW の単位を使ってテキストのサイズを設定している。
/* CSS */
.callout {
font-size:1vw;
}
<p class="callout">
Text that scales by viewport units<p/>参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- <length> - CSS: Cascading Style Sheets | MDN
vh及びvwの単位についての説明が含まれている。 - CSS Values and Units Module Level 4 の Viewport percentage lengths。
検証
手順
サイズ変更が可能なウィンドウを持つデスクトップブラウザで:
- ズームレベルを 100% に設定する。
- ウィンドウのサイズを 1280 ピクセル幅に設定する。
- テスト対象となるページにアクセスする。
- 以下のいずれかの使用可能な方法を用いて、テキストのサイズを変更する:
- ブラウザのズーム機能
- ブラウザのテキストサイズ変更機能
- ページ上にあるテキストサイズ変更コントロール
- 上記のいずれかの方法でテキストのサイズを変更し、デフォルトの 200% 以上にサイズ変更できることを確認する。
期待される結果
- 手順 #5 が偽である場合、この失敗条件が適用され、コンテンツは達成基準 1.4.4 テキストのサイズ変更を満たさないことになる。