ロービジョン（弱視）の方に配慮したWebサイトの作り方

文字を拡大したらボタンの文字が切れた。画面を大きく表示したら、横スクロールを何度も繰り返さないと文章を読めなくなった——。通常の表示では気づきにくくても、Webサイトを拡大して使う人にとって、こうした設計は大きな壁になります。

ロービジョンの見え方は一人ひとり異なるため、単に文字を大きくすれば解決するとは限りません。利用者が拡大や色の設定を変えても、情報や機能を失わずに使えることが大切です。

この記事では、ロービジョンの方にも利用しやすいWebサイトを作るための基本を、具体例とチェック方法を交えて解説します。

ロービジョン（弱視）とはどんな状態か

日本眼科学会はロービジョンについて、眼鏡やコンタクトレンズを使い、通常の治療を行っても視機能が十分に改善せず、日常生活に支障がある状態と説明しています。

見えにくさは、視力の低下だけではありません。

• 見える範囲が狭い、または一部が見えにくい
• 明るい場所で強いまぶしさを感じる
• 文字と背景の明暗差を捉えにくい
• 細い線や小さなアイコンを見分けにくい
• 暗い場所から明るい場所への変化に順応しにくい

そのため、必要な表示も人によって異なります。大きな文字や高いコントラストが読みやすい人もいれば、画面の明るさを抑えたり、白黒を反転したりすると読みやすい人もいます。

なお、「弱視」は医学的に、視覚が発達する時期に起こる弱視（amblyopia）を指す場合もあります。本記事では、Webアクセシビリティの文脈におけるロービジョン（low vision）について扱います。

ロービジョンの人がWebでつまずくポイント

ロービジョンの方は、ブラウザのズーム、OSの拡大鏡、画面の色反転、読み上げ機能などを組み合わせてWebを利用することがあります。こうした使い方をしたとき、次のような問題が起こりやすくなります。

つまずく場面	起こり得ること
小さく細い文字、薄いグレーの文字	文字の形を判別しにくく、読む負担が増える
拡大すると文字やボタンが切れる	必要な情報を読めず、操作もできない
画面の左右に内容がはみ出す	一行読むたびに横スクロールが必要になる
固定ヘッダーやポップアップが大きい	拡大後の狭い画面が覆われ、本文が見えない
文字を画像として掲載している	拡大するとぼやけ、色や行間も変更できない
入力欄やボタンの境界が不明瞭	どこを操作できるのか見つけにくい
色や位置だけで案内している	「右上の赤いボタン」などの説明をたどれない

見た目をきれいに整えるだけでなく、拡大後も内容の順序や操作方法がわかるかという視点で確認する必要があります。

文字サイズ・拡大に対応する

WCAG 2.2の達成基準1.4.4「テキストのサイズ変更」（レベルAA）では、支援技術を使わずに文字を200％まで拡大しても、情報や機能が失われないことを求めています。

実装では、次の点を確認します。

• ブラウザやスマートフォンの拡大操作を禁止しない
• 文字を拡大しても、ボタンや入力欄の中で文字が切れないようにする
• 高さを固定したボックスに長い文章を閉じ込めない
• 文字サイズの変更に合わせて、行の高さや余白も無理なく広がるようにする
• 重要な文字情報は、画像ではなくHTMLのテキストで提供する
• メニューやダイアログを拡大しても、閉じるボタンや主要な操作が画面外に隠れないようにする

文字サイズにはremやemなどの相対単位を使うと、サイト全体の調整をしやすくなります。ただし、単位を相対指定にするだけでアクセシブルになるわけではありません。実際に拡大し、文字の欠けや重なり、操作不能が起きないかを確認することが重要です。

たとえば、ボタンを次のように見直せます。

改善前： ボタンの高さを固定し、文字を大きくするとラベルが途中で切れる
改善後： 文字量に応じて高さが広がるようにし、拡大後もラベル全体とクリック領域を保つ

「200％拡大」と「リフロー」は別々に確認する

WCAG 2.2の達成基準1.4.10「リフロー」（レベルAA）は、画面を拡大したとき、原則として上下・左右の2方向へスクロールし続けなくても内容を読めることを求めています。

目安は、縦書きではない一般的なWebページの場合、幅320 CSSピクセル相当でも情報や機能を失わず、主に縦方向へ読み進められることです。これは、幅1280 CSSピクセルの画面を400％に拡大した状態に相当します。

地図、複雑な図、データ表など、意味を保つために2方向の表示が必要なコンテンツは例外になり得ます。ただし、ページ全体まで一緒に横へはみ出さないよう、必要な部分だけをスクロールできる設計にします。

コントラストを確保する

ロービジョンの方には、色の違いよりも、文字や部品と背景の明るさの差（コントラスト）が重要な場合があります。

WCAG 2.2レベルAAでは、次のコントラスト比が目安です。

• 通常の大きさの文字：4.5:1以上
• 大きな文字：3:1以上
• 入力欄の境界や意味のあるアイコンなど：隣接する色との間で3:1以上

本文だけでなく、次のような見落としやすい部分も確認します。

• 入力例を示すプレースホルダー
• パンくずリストや補足文
• ボタン内の文字と背景
• 入力欄の枠線、チェックボックス、選択中の状態
• 写真やグラデーションの上に載せた文字
• キーボード操作時のフォーカス表示

コントラスト比を満たしていても、極端に細い文字や複雑な背景の上の文字は読みにくいことがあります。数値だけで終わらせず、実際の画面でも確認しましょう。

また、「白い背景に黒い文字」がすべての人に最適とは限りません。強い光をまぶしく感じる人には、明るさを抑えた配色や反転表示が読みやすい場合もあります。サイトの標準表示を読みやすく整えたうえで、利用者が表示を変更できる余地を残すことが大切です。

利用者が自分に合う見え方を選べるようにする

ロービジョンの見え方は多様なので、一つの配色や文字サイズだけですべての人に対応するのは困難です。利用者は、次のような方法で見え方を調整します。

• ブラウザのズームや文字サイズ設定
• OSの拡大鏡、色反転、ハイコントラスト表示
• スクリーンリーダーや読み上げ機能
• Webサイト側が用意した文字・色・間隔の調整機能

サイト側では、これらの設定を妨げず、変更しても情報や機能が失われない設計を優先します。独自の調整機能を追加する場合も、ブラウザやOSの標準機能と併用できるかを確認しましょう。

ただし、閲覧者側の調整機能を導入しても、文字を画像で掲載している、拡大するとレイアウトが崩れる、ボタン名がわかりにくいといったサイト本体の問題が自動で直るわけではありません。基本設計を整えることが先で、調整機能はその補助です。

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

1. 文字を200％にしても欠けないか

ブラウザの文字サイズやズームを変更し、見出し、本文、ボタン、フォームの文字が切れたり重なったりしないか確認します。

2. 幅320 CSSピクセル相当でも読み進められるか

狭い画面や高倍率の拡大状態で、ページ全体に不要な横スクロールが発生しないか、メニューやダイアログを操作できるか確認します。

3. 文字とUI部品のコントラストは十分か

コントラストチェッカーを使い、本文だけでなく、ボタン、入力欄、アイコン、フォーカス表示まで数値で確認します。

4. 重要な情報が画像だけになっていないか

画像内の文字をHTMLテキストへ置き換えます。画像を使う必要がある場合は、同じ情報を代替テキストや本文でも提供します。

5. 表示を変えても操作を完了できるか

ズーム、色反転、拡大鏡などを使った状態で、問い合わせや予約などの主要な操作を最後まで行えるか確認します。可能であれば、実際にロービジョンのある人にも試してもらいましょう。

まとめ：拡大できるだけでなく、拡大後も使えるサイトへ

ロービジョンへの配慮では、次の3点が基本です。

• 文字を拡大しても、情報や機能が失われない
• 高倍率でも、不要な横スクロールをせずに読み進められる
• 文字やUI部品と背景のコントラストを確保する

確認するときは、「拡大ボタンがあるか」だけでなく、拡大したあとも問い合わせ、予約、購入などの目的を達成できるかを見てください。こうした改善は、ロービジョンの方だけでなく、小さな画面を使う人や、加齢によって見え方が変化した人にも役立ちます。

予算をかけずに「はじめの一歩」を

本格的なサイト改修では、文字の指定、レイアウトのリフロー、画像化された文字、フォームやボタンの見やすさなどを一つずつ見直す必要があります。そのうえで、閲覧者が自分の見え方に合わせて調整できる手段を加えると、配慮の幅を広げられます。

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

※ MyLikingの導入だけで、障害者差別解消法への対応や、WCAG・JISへの適合が保証されるものではありません。画像化された文字、固定レイアウト、フォームの構造など、サイト本体の問題をすべて自動修正するものでもありません。本格改修の代わりではなく、低予算で始められる“はじめの一歩”です。まずは2週間、無料でお試しいただけます。