適用 (対象)
CSS
これは、次の達成基準に関する達成方法である:
- 達成基準 1.4.4: テキストのサイズ変更 (書かれていない達成方法を満たす手段として十分)
- 達成基準 1.4.5: 文字画像 (参考)
- 達成基準 1.4.8: 視覚的提示 (G146: リキッドレイアウトを使用するの達成方法として十分)
- 達成基準 1.4.9: 文字画像 (例外なし) (参考)
解説
この達成方法の目的は、ユーザエージェントがコンテンツを効果的に拡大縮小できるように、em 単位でテキストのフォントサイズを指定することである。em はフォントのプロパティなので、フォントのサイズが変わると拡大縮小される。body 要素に対してフォントサイズを指定した場合、より個別的なセレクタで上書きされない限り、他の全ての要素に値が継承される。
事例
例 1: CSS での em によるフォントサイズ指定
この事例では、どのような場合でも、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように指定してある。そのため、親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示される。
訳注
MDN の strong 要素で示されているように、古い HTML では strong 要素を単により強い強調としていたが、現在の HTML では strong を重要性を表すものと定義している。
strong {font-size: 1.6em}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size. </p>
…参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注
フォントに関する CSS の仕様は、CSS Fonts Module Level 3 を参照のこと。この仕様が、CSS 2 のフォントに関する記述に取って代わることに注意されたい。CSS Snapshot 2020 も参照のこと。
検証
手順
- フォントサイズを定義する CSS プロパティの値が em 単位である。
期待される結果
- #1 の結果が真である。