Web アクセシビリティとテキスト｜読みやすい文章の書き方
Web アクセシビリティとは、障害の有無や年齢に関係なく、すべての人が Web コンテンツを利用できるようにすることです。テキストの書き方はアクセシビリティの基本です。
読みやすいテキストの基準
| 項目 | 推奨値 | 理由 |
|---|---|---|
| 1 行の文字数 | 30〜40 文字 | 視線の移動距離を抑える |
| 行間 (line-height) | 1.5〜1.8 | 行の識別を容易にする |
| 段落間の余白 | 行間の 1.5 倍以上 | 段落の区切りを明確にする |
| フォントサイズ | 16px 以上 | 小さい文字は読みにくい |
| 1 文の長さ | 40〜60 文字 | 理解しやすい長さ |
代替テキスト (alt 属性) の書き方
画像の代替テキストは、スクリーンリーダーを使用する視覚障害者にとって重要な情報源です。
- 画像の内容を簡潔に説明する (50〜100 文字程度)
- 装飾目的の画像は空の alt (
alt="") を設定する - グラフや図表は、データの要点を代替テキストに含める
- 「画像:」「写真:」などの接頭辞は不要
やさしい日本語の活用
「やさしい日本語」は、日本語を母語としない人や、認知機能に配慮が必要な人にも理解しやすい表現です。
- 1 文を短くする (40 文字以内が目安)
- 難しい漢字にはふりがなを付ける
- 専門用語は平易な言葉で言い換える
- 二重否定を避ける
コントラスト比と文字色
WCAG 2.1 では、通常テキストのコントラスト比は 4.5:1 以上、大きなテキスト (18pt 以上) は 3:1 以上が求められます。背景色と文字色の組み合わせに注意しましょう。
まとめ
アクセシブルなテキストは、すべてのユーザーにとって読みやすいテキストです。文字カウンタスで 1 文の長さや代替テキストの文字数を確認しながら、誰にでも伝わる文章を書きましょう。