1.4.8 視覚的提示

要件

利用者が以下のすべての条件を満たすことができるようにする。

• 前景色と背景色を選択可能
• 幅75～80文字以内での行長の設定
• テキストのサイズを 200％まで拡大しても、スクロール不要（横方向）
• テキストは両端揃えでなく、左揃え（右から左言語では右揃え）
• 行間は文字の高さの1.5倍以上、段落間は行間の1.5倍以上
• 文字画像ではなくテキストとして提供

詳細

項目	説明
色の選択	前景色・背景色をユーザーが選択できるようにする（OSやブラウザの設定に依存しても可）
行の長さ	約 80 文字以下、または 40 文字（CJK言語）以下が理想
行の長さ	200%拡大しても横スクロールが発生しない（レスポンシブ対応）
テキスト揃え	左揃え（または言語に応じた自然な揃え）にすることで読みやすさ向上
行間・段落間隔	行間は 1.5 倍以上、段落間は 1.5 倍の行間よりさらに大きく
テキスト画像の回避	見出しや装飾目的でも、画像化されたテキストを避ける（CSSで再現）

目的

• 読みやすいテキスト表示を実現し、視覚障害、読字障害（ディスレクシア）、高齢者のユーザビリティを向上
• 視覚的な「負担軽減」および「読解支援」が主眼です

具体例

不適切な例

• テキストが中央揃えかつ1行あたり100文字以上
• 見出しが画像で埋め込まれており拡大できない
• 行間が狭く、段落間の余白も詰まっている

適切な例

• CSSで line-height: 1.8;、margin-bottom: 2em; を設定
• テキストサイズをブラウザ拡大でも崩れないレスポンシブ設計
• WebフォントやSVGで視認性高く整えたテキスト見出し

実装上の配慮

• max-widthで行の長さを制限
• line-heightとmarginを適切に設定
• アクセシビリティ設定対応（OSやUAスタイルシートの上書きを妨げない）
• Webフォント＋CSSで見た目の再現とテキストの可読性を両立

利点

読みやすさの向上

高齢者やディスレクシアの読者にとって可読性が向上

多様なデバイス対応

テキスト拡大・縮小にも柔軟に対応できる

認知負荷の軽減

整った余白と構成で情報を理解しやすくなる

可変ニーズへの適応

個別ニーズに応じた表示カスタマイズが可能に

一覧に戻る