サイトアイコン IT & ライフハックブログ|学びと実践のためのアイデア集

Webアクセシビリティに配慮した文章の書き方:読みやすく、迷わせないための実践例

person in white long sleeve shirt using macbook pro

Photo by cottonbro studio on Pexels.com

Webサイトの文章は、読者が必要な情報を見つけ、内容を理解し、次の行動を選べるように書く必要があります。

文章をわかりやすく整えることは、視覚障害のある人、認知特性が異なる人、日本語に不慣れな人、高齢者、子どもなどが直面する読みづらさを減らす方法の一つです。

この記事では、Webアクセシビリティに配慮したライティングの考え方を、書き換え例と公開前の確認手順に分けて説明します。

アクセシブルなライティングとは

アクセシブルなライティングとは、読者の知識、利用環境、見え方、読み方が違っても、情報の意味と必要な行動を理解しやすいように文章を整えることです。

すべての読者に同じ読みやすさを保証するという意味ではありません。

難しい言葉を説明する、情報を適切な順序に並べる、色や位置だけで案内しないといった工夫によって、理解を妨げる要因を一つずつ減らします。

サイト全体でどこから改善するかは、Webアクセシビリティの基本と最初に確認したい実務ポイントも参考になります。

文章を読みやすくする五つの原則

必要な言葉は、避けずに説明する

専門用語や外来語をすべて言い換える必要はありません。

読者が判断や操作に必要とする言葉は残し、初めて出る場所で短く意味を説明します。

たとえば「エビデンス」だけでは意味が広いため、文脈に合わせて「判断の根拠」「調査結果による裏付け」などと具体化します。

一文には一つの要点を置く

文字数だけで文の良し悪しは決まりません。

条件、依頼、理由、例外が一文に重なっていたら、読者が行動する順序に合わせて分けます。

接続詞や読点を増やして長い文を支えるよりも、要点ごとに文を区切るほうが関係を追いやすくなります。

誰が何をするのかを明らかにする

主語を毎回書く必要はありませんが、「誰の判断か」「誰が操作するのか」が曖昧になる省略は避けます。

「確認してください」だけで終えず、確認する項目、問題があった場合の直し方、次に行う操作を示します。

色や位置だけで案内しない

「右のボタン」「赤い項目」のような案内は、表示幅が変わった場合や色を判別しにくい場合に対象がわからなくなることがあります。

「送信ボタン」「メールアドレス欄」のように、画面上の名前で操作対象を示します。

エラーでは色を添えても構いませんが、該当項目の名前と修正方法を文章でも伝えます。

具体的な画面例は、色だけに頼らない情報の示し方で確認できます。

見出し、箇条書き、表を役割で使い分ける

見出しは、その節で扱う対象がわかる言葉にします。

手順には番号付きリスト、順序のない選択肢には箇条書き、項目同士を比較する場合には表が適しています。

見た目を整えるためだけに見出しや表を使うと、文章の構造と表示が食い違います。

改善前と改善後の書き換え例

読みづらさの原因と書き換え方
改善前 改善後 改善した点
コンセンサスを得る 関係者の合意を得る 誰の意見をどうするのかを具体化しました。
ご確認ください 申込内容に誤りがないか確認してください 確認する対象を示しました。
赤い欄を直してください メールアドレス欄を確認し、入力し直してください 色に頼らず、対象と行動を示しました。
ご利用に際しましては、所定の手続きを実施し、必要書類をご提出いただくこととなっておりますので、あらかじめご了承ください。 サービスを利用する前に、手続きが必要です。必要な書類を提出してください。 手続きと依頼を二文に分けました。実際の案内では、書類名と提出先も明記します。

言い換えは、文章を短くすることだけが目的ではありません。

読者が「何を確認し、何をすればよいか」を迷わず判断できるところまで具体化します。

重要な情報を先に置く

逆三角形の構成とは、結論や利用者への影響を先に示し、その後に理由、詳細、補足を続ける並べ方です。

Webではページの途中から読まれたり、必要な箇所だけ拾い読みされたりするため、前置きが長いと要点を見つけにくくなります。

  1. 結論または影響:何が起きるのか、誰に関係するのかを示します。
  2. 必要な行動:読者が何をいつまでに行うのかを示します。
  3. 理由と詳細:判断に必要な背景や条件を説明します。
  4. 補足:例外、問い合わせ先、関連情報を置きます。

ただし、すべての文章をこの順序に固定する必要はありません。

操作手順では実行順、比較記事では比較条件というように、読者の目的に合う順序を選びます。

公開前の確認手順

  1. 読者の目的を一つ決める:このページを読んだ後に、何を理解または実行できればよいかを明確にします。
  2. 冒頭で答える:対象、結論、必要な行動のうち、最初に必要な情報を冒頭に置きます。
  3. 見出しだけを読む:見出しの並びだけで話の順序がわかるかを確認します。
  4. 曖昧な指示を探す:「こちら」「上記」「赤い箇所」などが、対象の名前に置き換えられないかを確認します。
  5. リンクの文言を確認する:「詳しくはこちら」ではなく、移動先の内容がわかる文言にします。
  6. 読み上げて確認する:長すぎる文、同じ言葉の繰り返し、意味の切れ目がわかりにくい箇所を直します。
  7. 利用環境を変えて試す:表示を拡大し、キーボードやスクリーンリーダーでも情報の順序と操作案内を確認します。

スクリーンリーダーは、画面上の文字や操作項目を音声などで確認するための支援技術です。

VoiceOver、NVDA、JAWSなどを使った確認の考え方は、スクリーンリーダーの仕組みと実装時の確認ポイントで説明しています。

文章の難易度を測るツールは、見直す箇所を探す補助として使えます。

スコアだけでは文脈や操作のわかりやすさを判断できないため、最後は実際の読み方と利用目的に照らして確認します。

読みやすさを保つための要点

アクセシブルな文章は、特別な言い回しではなく、読者が情報を探し、理解し、行動する過程を妨げない文章です。

まず一つのページで、曖昧な指示を具体化し、長い文を分け、見出しの順序を整えるところから始められます。

モバイルバージョンを終了