WCAG 2.2の達成基準1.4.8「ビジュアルプレゼンテーション」は、文章の見た目を利用者が読みやすい状態に調整できるようにするための基準です。適合レベルはAAAで、文字色と背景色、1行の幅、文字揃え、行間と段落間隔、200％拡大時の表示を扱います。
この基準は、すべてのページを同じ見た目に固定することを求めているわけではありません。対象となるテキストブロックについて、5つの状態を実現できる仕組みが利用可能であることを求めています。その仕組みはサイト内に用意するほか、ブラウザーなどの利用者側の機能に委ねられる場合もあります。
達成基準1.4.8が求める5つの状態
テキストブロックとは、複数の文からなるひとまとまりの文章です。見出しや短いラベルだけではなく、記事本文や説明文のように、続けて読む文章を想定すると理解しやすくなります。
| 項目 | 利用者が実現できる状態 | 確認の要点 |
|---|---|---|
| 文字色と背景色 | 前景色と背景色を選択できる | 選択した2色が対象の文章に反映されるか |
| 1行の幅 | 80文字またはグリフ以下、CJKでは40以下にできる | 実際のフォントと表示幅で長すぎる行がないか |
| 文字揃え | 左右両端揃えにしない | 単語や文字の間隔が不自然に広がっていないか |
| 行間と段落間隔 | 行間を1.5以上、段落間隔を行間の1.5倍以上にできる | 指定値ではなく、実際の表示結果を確認したか |
| 200％拡大 | 全画面表示のウィンドウで、1行を読むための横スクロールが不要 | ブラウザーの拡大機能で本文が折り返されるか |
CJKは、中国語、日本語、韓国語で使われる文字体系をまとめた呼び方です。「文字またはグリフ」のグリフは、画面に表示される文字や記号の形を指します。
既定の見た目と変更の仕組みを分けて考える
読みやすい既定値を設定することには意味があります。ただし、既定値を5項目に合わせることと、利用者が必要な表示を実現できることは同じではありません。
たとえば、本文の行間を最初から1.5にしても、ほかのスタイルが利用者の設定を上書きし、色や文字幅を変更できないなら、5項目をまとめて確認したことにはなりません。反対に、サイト内にすべての設定画面を用意していなくても、ブラウザーの機能で必要な状態を実現でき、サイトがその変更を妨げなければ、その仕組みを評価対象にできます。
したがって、実装では「初期表示が読みやすいか」と「利用者の変更を受け入れられるか」を分けて点検します。
文字色と背景色を変更できるようにする
文字色と背景色は、片方だけではなく組み合わせとして扱います。利用者がサイト内の設定で色を選ぶ設計なら、選択結果を本文全体へ一貫して反映させます。
.reading-area {
color: var(--reader-text-color, #222);
background-color: var(--reader-background-color, #fff);
}
このCSSは、別の設定機能がCSS変数の値を変更する構成を想定した例です。この断片だけで色を選択する機能や達成基準への適合が完成するわけではありません。
色の選択とは別に、文字と背景の見分けやすさも確認します。コントラスト比の考え方は、達成基準1.4.3「コントラスト（最小）」の解説で確認できます。
1行の幅を読みやすい長さに抑える
行が長すぎると、次の行の先頭を見つけにくくなります。日本語を含むCJKでは、1行を40文字またはグリフ以下にできることが目安です。
.text-block {
max-inline-size: 40em;
margin-inline: auto;
}
40emは日本語の文字幅を意識した実装の出発点ですが、「必ず40文字になる」という意味ではありません。書体、文字の種類、字間によって実際の文字数は変わるため、使用するフォントと代表的な画面幅で確認します。
両端揃えを避けて文字間隔を安定させる
両端揃えは、行の左右をそろえるために文字間や単語間を広げる配置です。間隔が行ごとに変わると文章を追いにくくなるため、達成基準1.4.8では両端揃えにしない状態を実現できるようにします。
.text-block {
text-align: start;
}
startは文章の書字方向に応じた行頭側へそろえる指定です。既存のスタイルにtext-align: justify;がある場合は、本文へ意図せず適用されていないかも確認します。
行間と段落間隔を別々に設定する
行間は同じ段落内の行どうしの間隔で、段落間隔は前後の段落を分ける空きです。達成基準が求める状態は、行間が1.5以上、段落間隔がその行間の1.5倍以上です。
.reading-area p {
line-height: 1.5;
margin-block: 0;
}
.reading-area p + p {
margin-block-start: 2.25em;
}
この例では、行間をフォントサイズの1.5倍、段落間隔を2.25emにしています。テーマ側のCSSや余白の相殺によって表示結果が変わることがあるため、開発者ツールの指定値だけで判断せず、実際の段落間隔を確認します。
日本語の文字サイズや行間を含む設計は、日本語タイポグラフィと可読性の実践ガイドでも詳しく解説しています。
200％拡大時に本文を横へ追わせない
ブラウザーで文字を200％まで拡大したときも、本文の1行を読むために左右へスクロールし続ける状態を避けます。固定幅のコンテナや相対単位を使わない文字サイズは、拡大時の折り返しを妨げる原因になり得ます。
.reading-layout {
inline-size: 90%;
max-inline-size: 50rem;
margin-inline: auto;
}
.reading-layout img {
max-inline-size: 100%;
block-size: auto;
}
柔軟な幅と相対単位を使うことは出発点です。長いURL、コード、表、画像などがコンテナを押し広げる場合もあるため、ブラウザーを200％に拡大し、本文が自然に折り返されるかを実際に確認します。
画面幅が狭い場合の二方向スクロールについては、関連する達成基準1.4.10「リフロー」の解説も参考になります。
実装時に起こりやすい誤解
カラーピッカーを置けば達成できる
色を選ぶ入力欄があっても、対象の文章へ反映されなければ仕組みとして機能しません。キーボードで操作できるか、選択した前景色と背景色が一貫して適用されるかまで確認します。
max-width: 40emなら常に40文字になる
emは文字数ではなく、要素のフォントサイズを基準にする単位です。CSSの指定は近似として使い、実際の表示で行の長さを点検します。
color: inheritだけで利用者が色を選べる
継承は親要素の色を受け取る指定にすぎません。利用者が色を変更できる経路と、その変更を本文まで伝える設計が別途必要です。
横方向のはみ出しを隠せばよい
overflow-x: hidden;で横スクロールバーを消しても、はみ出した内容を読めなくするおそれがあります。スクロールバーの有無ではなく、拡大後も本文が折り返され、内容を失わずに読めるかを確認します。
確認作業の進め方
- 記事本文や説明文など、複数文からなるテキストブロックを洗い出します。
- サイト内の設定とブラウザー側の機能を確認し、5項目を実現する仕組みを特定します。
- 色、行幅、文字揃え、行間、段落間隔を一項目ずつ変更し、対象の文章へ反映されるか確かめます。
- ブラウザーを200％に拡大し、全画面表示で本文を読むための横スクロールが発生しないか確認します。
- テーマやコンポーネントの変更後も同じ確認を行い、固定幅や強いCSS指定が戻っていないか点検します。
利用者が読める状態を選べる設計へ
達成基準1.4.8の要点は、制作者が一つの見た目を「読みやすい」と決めることではなく、利用者が必要な表示を実現できる状態を保つことです。読みやすい初期値を用意したうえで、色、行幅、文字揃え、間隔、拡大への対応を個別に確認すると、実装と試験の抜けを減らせます。
当社では、ウェブアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。自社サイトの改善を進めたい方は、サービスの詳細をご覧ください。