ディスレクシア（読字障害）の方にも読みやすいWebサイトの作り方

内容は理解できるのに、文字を一つずつ追う必要があり、長い文章を読むだけで疲れてしまう。行を読み飛ばしたり、どこまで読んだかわからなくなったりする——。ディスレクシアのある人は、Webサイトでもこうした困難を感じることがあります。

一方で、読みやすい表示は人によって異なります。文字を大きくすると読みやすい人もいれば、行間や背景色、読み上げが助けになる人もいます。一つの「正解のフォント」を決めるより、文章をわかりやすく整え、利用者が自分に合う表示方法を選べることが大切です。

この記事では、ディスレクシアの方にも情報を受け取りやすいWebサイトを作るための基本を解説します。

ディスレクシア（読字障害）とは

ディスレクシアは、文字や単語を正確・流暢に読むこと、読み書きを習得することなどに持続的な困難が生じる状態です。医学的には「限局性学習症／限局性学習障害」のうち、主に読みの困難がある場合を指す言葉として使われます。

国立精神・神経医療研究センターは、限局性学習症について、知的面や学習意欲、教育環境の問題だけでは説明できない、読む・書く・計算するなど特定の能力の習得や発揮に困難がある状態と説明しています。本人の努力不足や、文章の内容を理解する力だけの問題ではありません。

困難の現れ方や程度には個人差があります。

• 一文字ずつ確認するため、読むのに時間がかかる
• 似た文字や単語を読み違える
• 行を飛ばしたり、同じ行を繰り返し読んだりする
• 文章を音読することに大きな負担がかかる
• 文字を読むことに集中し、内容を覚えておく余力が少なくなる
• 読むことに加えて、書くことにも困難がある

「失読症」という言葉がディスレクシアの訳として使われることもありますが、後天的な脳損傷などによる読みの障害を含む、より広い意味で使われる場合があります。本記事では、生まれつきの発達特性として現れる発達性ディスレクシアを中心に扱います。

Webサイトで読みにくさを感じる場面

ディスレクシアのある人だけでなく、長文を読むことに負担がある人にとっても、情報が密集したページは内容を追いにくくなります。

読みにくくなる要因	起こり得ること
長い文章が切れ目なく続く	読んでいる位置や要点を見失う
一文が長く、複数の内容を含む	文の関係を整理する負担が増える
専門用語や略語の説明がない	意味を確認するたびに読み進めにくくなる
装飾の強い書体や細すぎる文字	文字の形を判別しにくい
行間・段落間が狭い	隣の行へ視線が移り、行を追いにくい
両端揃えで文字間隔にばらつきがある	文章中に不規則な空白が生まれ、流れを追いにくい
文字が画像やPDFだけで提供される	表示変更や読み上げを利用しにくい
ポップアップや自動再生が割り込む	読んでいた場所や集中を失う
入力や手続きに短い時間制限がある	読み終える前に画面が切り替わる

「平均的な読者なら読める速さ」を前提にせず、読む方法や速度を利用者が選べる設計にします。

特定のフォントを「正解」にしない

ディスレクシア向けとして紹介されるフォントもありますが、すべての人に同じ書体が読みやすいわけではありません。日本語では、ひらがな、カタカナ、漢字、英数字が混在するため、Webサイトの内容や利用者によっても読みやすさが変わります。

標準表示では、次の点を意識します。

• 長文には、装飾が少なく見慣れた書体を使う
• 極端に細い文字や、文字の形が崩れたデザイン書体を本文に使わない
• 本文を小さくしすぎず、利用者が拡大できるようにする
• 強調箇所を太字だけで埋め尽くさず、本当に重要な部分に絞る
• 英字や数字を含め、似た字形を区別しやすいか実際の表示で確認する

ブランド用の個性的なフォントは、ロゴや短い見出しに限定し、本文には読みやすい書体を使う方法もあります。さらに、利用者がフォントや文字サイズを変更できると、個人差に対応しやすくなります。

行間・文字間隔を変更しても崩れないようにする

行間や文字間隔を広げることで読みやすくなる人がいます。ただし、サイト制作者が一律に大きな間隔を設定すればよいわけではありません。利用者が設定を変更したときにも、文字が欠けたり重なったりしないことが重要です。

WCAG 2.2の達成基準1.4.12「テキストの間隔」（レベルAA）では、利用者が次の値まで間隔を変更しても、情報や機能が失われないことを求めています。

• 行の高さ：文字サイズの1.5倍以上
• 段落後の間隔：文字サイズの2倍以上
• 文字間隔：文字サイズの0.12倍以上
• 単語間隔：文字サイズの0.16倍以上

これは、すべてのサイトが最初からこの間隔を設定しなければならない、という意味ではありません。利用者が間隔を上書きしても、文字が切れる、重なる、ボタンを押せなくなるといった問題が起きないことを確認する基準です。日本語のように通常は単語間へ空白を入れない表記では、該当しない設定もあります。

標準の文字組みとしては、次の工夫が役立ちます。

• 行間を詰めすぎず、行を追いやすい余白を設ける
• 段落間を空け、内容のまとまりを見分けやすくする
• 本文の表示幅を広げすぎず、視線の移動を短くする
• 原則として左揃えにし、両端揃えによる不規則な空きを避ける
• 高さを固定したボックスに長い文章を入れない

たとえば、説明カードを次のように見直せます。

改善前：高さを固定し、行間を広げると末尾の文章がカード外へ隠れる
改善後：内容に応じてカードの高さが広がり、行間や文字サイズを変更しても全文を読める

長文を負担なく読める構成にする

書体や余白だけでなく、文章そのものを整理することも重要です。W3Cは、認知・学習上の困難がある人にも伝わりやすい内容として、わかりやすい言葉、短い文、短い文章のまとまり、明確な見出しなどを挙げています。

1. 一文には一つの要点を書く

主語と述語を近づけ、長い前置きや二重否定を避けます。一文が長くなったら、意味のまとまりで分けます。

2. 結論や重要事項を先に伝える

料金、期限、必要な持ち物など、読者が知りたい情報を文章の後半へ隠さず、見出しや段落の冒頭に置きます。

3. 見出しと箇条書きで内容を分ける

見出しだけを読んでも全体像を把握できるようにします。三つ以上の並列項目や手順は、長い一文にせずリストへ分けます。

4. 専門用語や略語を説明する

必要のない難しい言葉を避け、専門用語を使う場合は初出時に短く説明します。ボタンやリンクも「こちら」ではなく、「予約内容を確認する」のように目的を明確にします。

5. 手順を一段階ずつ示す

申込みや設定方法は番号付きで示し、一つの項目に複数の操作を詰め込まないようにします。現在地や残りの手順がわかる表示も助けになります。

たとえば、次のように書き換えられます。

改善前：必要事項をご確認のうえ、該当する場合は添付書類を用意して期日までにフォームよりお手続きください。

改善後：

1. 申込み条件を確認します。
2. 必要な書類を用意します。
3. 6月30日までに申込みフォームを送信します。

読み上げ・表示調整・時間の選択肢を用意する

ディスレクシアのある人は、文字を音声で聞く、読み上げ箇所をハイライトする、文字サイズや行間・背景色を変えるなど、自分に合った方法を組み合わせることがあります。

サイト側では、次の点を意識します。

• 文章を画像ではなく、選択・コピーできるHTMLテキストで提供する
• PDFだけで重要情報を掲載せず、可能ならWebページにも同じ内容を用意する
• 見出しやリストなど、読み上げ機能が構造を把握できるHTMLを使う
• ブラウザ拡張や支援ツールによるフォント・間隔・色の変更を妨げない
• 読み上げ中の集中を妨げる自動再生や不要な動きを避ける
• 時間制限がある場合は、延長・解除・再開の方法を用意する
• 入力途中の内容が簡単に消えないよう、保存や復元を検討する

音声読み上げは有効な選択肢ですが、わかりにくい文章や複雑な手順まで自動でわかりやすくするものではありません。文章と構造を整えたうえで、読む方法の選択肢を増やすという順番が大切です。

公開前に確認したい5つのポイント

1. 見出しと冒頭だけで要点をつかめるか

ページタイトル、見出し、各段落の最初の一文を読み、重要な情報とページの流れを把握できるか確認します。

2. 一文や一段落が長くなりすぎていないか

一文に複数の条件や手順を詰め込んでいないか、段落ごとに話題が分かれているかを見直します。

3. 文字や間隔を変更しても内容が欠けないか

文字サイズ、行間、文字間隔を変更し、カード、ボタン、フォーム内で文字が切れたり重なったりしないか確認します。

4. 音声や別の形式でも情報を得られるか

読み上げ機能で文章と操作名が自然に読まれるか、画像・PDFだけに重要情報が閉じ込められていないか確認します。

5. 読む速度が遅くても手続きを完了できるか

時間切れで内容や入力が失われないか、ポップアップや自動遷移で読書を中断されないか、問い合わせや申込みを最後まで試します。

可能であれば、実際に読み書きへ困難のある人にも確認してもらいましょう。好みや必要な調整には個人差があるため、当事者による確認は「一つの正解」を決めるためではなく、選択肢が機能しているかを確かめるために行います。

まとめ：読みやすさを決めつけず、選べるようにする

ディスレクシアの方への配慮では、次の3点が基本です。

• 短く明確な文章と、見出し・箇条書きで情報を整理する
• 文字サイズや間隔を変更しても、情報や機能が失われないようにする
• 読み上げや配色変更など、本人が読み方を選べるようにする

特定のフォントや配色を全員に当てはめるのではなく、標準表示を読みやすく整えたうえで、利用者の設定を受け入れられるサイトを目指しましょう。これは、ディスレクシアの方だけでなく、長文を読むことに負担がある人や、時間のない状況で情報を探す人にも役立ちます。

文章と構造を整えたうえで、読む方法の選択肢を

読みやすさの土台は、短く明確な文章、見出しによる整理、表示を変えても崩れないレイアウトです。そのうえで、閲覧者が文字サイズや間隔、色、読み上げなどを自分に合わせて調整できる手段を加えると、配慮の幅を広げられます。

MyLikingは、サイトに1行のタグを追加することで、文字サイズ・文字間隔・行の高さ・読みやすいフォント・色彩の調整など約20の補助機能を導入できるツールです（月1,650円／年19,800円・税込）。本格改修の前に取り組める、低コストな補助策の一つとして活用できます。

※ MyLikingの導入だけで、障害者差別解消法への対応や、WCAG・JISへの適合が保証されるものではありません。わかりにくい文章、見出し構造、時間制限、固定レイアウトなど、サイト本体の問題を自動修正するものでもありません。

※ MyLikingの「フォーカスを読む」機能は、現在確認している動作環境ではiOS・Androidに対応していません。利用環境にかかわらず読み上げを保証する機能ではないため、OSやブラウザの読み上げ機能を妨げないサイト設計も必要です。

本格的な見直しの代わりではなく、対応範囲を確認したうえでご活用ください。まずは2週間、無料でお試しいただけます。