Accessibility
Guidelines

1.4.8 テキストの可読性を担保する

本項目の目的は、レイアウトのためにテキストブロック(一文よりも長いテキスト)の可読性を下げないようにすることである。これにより認知・言語・学習障害のあるユーザーやロービジョンのユーザーにとっても、そのテキストを知覚できない、どこを読んでいるのかが分からなくなるなどの悪影響を軽減できる。

テキストブロックの可読性を向上するため、下記を満たすこと。

  1. ユーザーが、文字色と背景色を選択できる(詳細
  2. 段落の幅を80文字以内(全角40文字以内)にする
  3. 均等割り付け(両端揃え)にしない
  4. 段落中の行送りは、1.5文字分以上(line-height: 1.5以上)
  5. 段落ごとの間隔は、行送りの1.5倍以上
  6. テキストは、支援技術なしで200%まで拡大表示できる。そのとき、全画面表示で1行のテキストを読むときに横スクロールする必要がない

1は下記に詳述するが、それ以外の項目は、達成基準の意図が特に参考になる。

行送りと段落ごとの間隔OK例の図解。「行送り」は、1行目の文字の上から2行目の文字の上までの長さを指し、1.5文字分以上が適切である。
Good 段落中の行送りは1.5文字分以上、段落ごとの間隔は行送りの1.5倍以上を満たしている。

「ユーザーが、文字色と背景色を選択できる」の詳細

視覚障害または認知の障害のあるユーザーは、テキストブロックの文字色と背景色を選択できる必要がある。そうしたユーザーには、他の人には分かりづらそうな配色や、低いコントラストの方が読みやすい場合もある。色やテキストの外観を個別に制御できるかどうかが、そういったユーザーの読解力に大きく影響する。

この基準を達成するために、文字色と背景色を特定の色覚パターン向けの配色に変更する機能の提供が考えられる。しかし、色の見え方は人により異なるため、すべてのパターンを網羅することは非常に難しい。このような機能の提供には、カラーピッカーで個別に色コードが指定できるなどの配慮が必要になる。

そのため、1.4.1 色だけで伝えない1.4.3 テキストや文字画像のコントラストを確保するを踏まえつつ、ブラウザなどのユーザーエージェントやOS標準のアクセシビリティ機能を用いて色を変更できるように実装することを推奨する。(G156: 一般に入手可能なユーザエージェントで、テキストのブロックの前景及び背景を変更できるウェブコンテンツ技術を使用する | WCAG 2.1 達成方法集

達成方法は十分な達成方法 - 視覚的提示:達成基準 1.4.8 を理解するの要件 1が参考になる。

テスト・チェック方法

デザイン・実装時に、次の項目を確認する。

  1. OSのアクセシビリティ機能で色変更を行い、テキストブロックの必要な情報が欠損していない
  2. 段落の幅が80文字以内(全角40文字以内)である
  3. 均等割り付け(両端揃え)の段落がない
  4. 段落中の行送りは、1.5文字分以上である(line-height: 1.5以上)
  5. 段落ごとの間隔は、行送りの1.5倍以上である(margin: 1em相当以上)
  6. テキストは、支援技術なしで200%まで拡大表示できる。さらに、画面の端で適宜折り返され、テキストを読むときに横スクロールをする必要がない

参考文献