Webアクセシビリティとは、利用する端末や人の特性が異なっていても、Web上の情報や機能を利用しやすくする考え方です。
読みやすさは、フォントサイズや文字色だけでは決まりません。見出しの順序、段落の分け方、1行の長さ、行間、文字の揃え方といったテキストレイアウトも、情報の見つけやすさと理解しやすさを左右します。
ここでは、既存ページを見直すときにも、新しいページを設計するときにも使える考え方を、HTMLの例と公開前チェックリストを交えて整理します。
テキストレイアウトが読みやすさを左右する理由
テキストレイアウトには、余白や揃え方などの「見た目」と、見出しやリストなどの「HTML構造」という二つの役割があります。
見た目だけで区切った文章は、画面上では整理されているように見えても、文書の構造がHTMLに表れません。反対に、見出しを正しく設定していても、文章を詰め込みすぎれば、目で追う負担が増えます。読みやすいページには、見た目と構造の両方が必要です。
見出しやリストを適切なHTML要素で表すと、スクリーンリーダーの読み上げ環境でも文章のまとまりを把握しやすくなります。視力や注意の向け方に違いがある人、高齢者、小さな画面で読む人にとっても、整理されたレイアウトは目的の情報を探す助けになります。
読みやすい本文を作る五つの基本
一つの段落で一つの話題を扱う
段落は「何行以内」と固定するより、一つの話題ごとに分けることが大切です。同じ文章でも、画面幅や文字サイズが変われば表示される行数は変わります。
説明の対象や論点が変わったところで段落を分けます。一文が長くなった場合も、意味の区切りを確かめて二文に分けると、読み返す負担を減らせます。
見出しを文書の階層に合わせる
WordPressの投稿タイトルをページの主見出しとし、本文はh2から始めます。h2の中を分けるときはh3を使い、文字を大きく見せる目的だけで見出しレベルを選ばないようにします。
見出しだけを順に読んだときに、ページの内容と順序がつかめるかを確認すると、階層の乱れを見つけやすくなります。
並列項目と手順をリストで示す
同じ種類の情報を並べるときは箇条書き、順番に意味がある説明は番号付きリストにします。文章の中へ詰め込むより、項目の数と関係を把握しやすくなります。
- 同じ重要度の注意点や特徴には
ulを使う - 操作手順や優先順位には
olを使う - 各項目の書き出しと文体を揃える
行幅と行間を実際の表示で確かめる
読みやすい文字数や行間を一つの数値で決めることはできません。文章の内容、書体、文字サイズ、画面幅によって読み心地が変わるためです。
横幅の広い画面で一行が長くなりすぎていないか、行同士が詰まって見えないかを実際のページで確認します。本文の幅を必要以上に広げず、行間と段落間に違いが分かる余白を設けると、視線を次の行へ移しやすくなります。
本文は左揃えを基本にする
日本語の本文は左揃えを基本にします。両端揃えでは文字間に不自然な空きが生じることがあり、行ごとのまとまりを追いにくくなるためです。
中央揃えは見出しや短い案内には使えますが、複数行にわたる本文では行頭の位置が変わります。長い説明には使わず、読む位置を予測しやすい配置を保ちます。
セクションと画像の関係を整理する
余白と見出しで情報のまとまりを示す
セクションの間に余白を設け、必要に応じて背景色や枠線を使うと、情報のまとまりが見えやすくなります。ただし、色や枠だけを区切りにせず、内容を表す見出しも置きます。これにより、見た目に頼らなくても文章の区切りが伝わります。
画像の説明を近くに置く
画像が本文だけでは伝わらない情報を含む場合は、その役割や意味が分かる代替テキストを用意します。代替テキストとalt属性の基本を確認し、画像の目的に合う説明にします。
キャプションや補足説明は、対応する画像の近くに配置します。画像と説明が離れていると、どの説明がどの画像に対応するのか判断しにくくなります。
小さな画面でも文章を追えるようにする
モバイル端末では、テキストが画面幅からはみ出さず、自然に折り返されることを確認します。特定の画面幅に合わせて改行を固定すると、別の端末で不自然な位置に改行が残る場合があります。
長い文字列によるはみ出しには、必要に応じてoverflow-wrapなどを検討します。本文だけでなく、見出し、リスト、コード例も含めて、モバイル向けのレスポンシブ設計を確認します。
HTMLで見る改善例
次の例では、見出しに見える文字をdivで置き、異なる話題を一つの段落へ詰め込んでいます。
<div class="title">利用案内</div>
<p>受付方法、準備するもの、利用時の注意を続けて説明します。必要な項目は忘れずに確認してください</p>内容の階層に合わせて見出しを使い、話題を段落とリストに分けると、構造を追いやすくなります。
<h2>利用案内</h2>
<p>最初に受付方法を説明します。</p>
<h3>準備するもの</h3>
<ul>
<li>必要事項を確認できる案内</li>
<li>手続きに使う情報</li>
</ul>
<h3>利用時の注意</h3>
<p>注意点を一つの話題として説明します。</p>短く分けること自体が目的ではありません。見出し、段落、リストの役割を分け、読者が必要な部分を見つけられる構造にすることが目的です。
公開前のチェックリスト
- 本文にページタイトルと重複する
h1を置いていない h2とh3が内容の階層に沿っている- 一つの段落に異なる話題を詰め込んでいない
- 並列項目と手順を適切なリストで示している
- 本文の行幅、行間、段落間の余白を実際の画面で確認した
- 画像とキャプションや説明の対応が分かる
- 小さな画面で横方向にはみ出す文章がない
- 見出しだけを順に読んでもページの流れがつかめる
テキストレイアウトを整える作業は、文章を短く見せるための装飾ではありません。情報の構造をHTMLで示し、その構造が目でも追いやすいように余白や行幅を調整することで、より多くの人へ内容を届けやすくなります。