ウェブアクセシビリティは、視覚の状態や利用方法にかかわらず、必要な情報と機能を使えるようにする取り組みです。
ロービジョンに配慮する場合は、文字を大きくするだけでなく、配色、余白、拡大時のレイアウト、キーボード操作まで確認する必要があります。
一つの表示方法ですべての見え方に対応しようとせず、読みやすさを確保したうえで、利用者が表示を調整できる設計を目指します。
ロービジョンの見え方と設計の前提
ロービジョンとは、視力や視野などに制約があり、矯正しても読むことや画面を操作することに困難が残る状態を指します。
まったく見えない状態だけを指す言葉ではなく、利用できる視覚を生かして情報を得る人もいます。
画面を見るときの困り方には、次のような違いがあります。
- 細部が見えにくい：小さな文字や細い線がぼやけ、内容を読み取りにくい。
- 一度に見える範囲が狭い：ページ全体や離れた要素の関係を把握しにくい。
- 明暗の差を捉えにくい：文字と背景の差が小さいと、文字が背景に溶け込んで見える。
- まぶしさを感じやすい：強い光や明るい画面が閲覧の負担になる。
- 色の違いを捉えにくい：色だけで示されたリンクや状態を区別しにくい。
困り方が異なるため、文字、色、配置のいずれか一つだけで対応を終えず、複数の観点を組み合わせて確認します。
最初に確認したい設計項目
| 観点 | 起きやすい問題 | 設計時の確認 |
|---|---|---|
| 文字 | 小さな文字や装飾の多い書体が読みにくい | 初期サイズ、書体、行間、拡大後の表示を確認する |
| コントラスト | 文字やリンクが背景に埋もれる | 文字と背景の比率を測り、色以外の手がかりも付ける |
| レイアウト | 情報のまとまりや読む順序を把握しにくい | 見出し、余白、区切り方を一貫させる |
| 表示の調整 | 初期設定が利用者の見え方に合わない | 文字サイズや表示モードを選べるようにする |
| 操作 | マウス操作や拡大後の移動が難しい | ズームとキーボードだけでも操作できるか確かめる |
文字を読みやすくする方法
文字サイズ、書体、行間を一緒に調整する
本文の文字サイズは16px以上を一つの出発点とし、見出しは本文との違いが分かる大きさにします。
ただし、初期サイズだけで判断せず、文字を拡大したときにも内容が欠けず、読む順序が保たれることを確認します。
書体は、ゴシック体やサンセリフ体など、装飾が少なく文字の形を捉えやすいものを選びます。
行間と文字間には余裕を持たせ、行を追うときに隣の行へ視線が移りにくい詰まった表示を避けます。
実装時の考え方は、アクセシビリティに配慮したテキストサイズの調整方法でも確認できます。
文字と背景のコントラストを測る
WCAG（Web Content Accessibility Guidelines）は、ウェブコンテンツのアクセシビリティに関するガイドラインです。
本文などの文字と背景には、4.5:1のコントラスト比を一つの目安として十分な明暗差を付けます。
見た印象だけで配色を決めず、チェックツールを使って比率を確認します。
リンクは色だけで区別せず、下線などを加えて、周囲の文章から見分けられるようにします。
視覚的な負担を抑えるレイアウト
情報を詰め込み、複数の要素を複雑に配置すると、読む位置や次に操作する場所を見つけにくくなります。
見出し、余白、背景色などを一貫した方法で使い、情報のまとまりを追えるレイアウトにします。
- 余白：見出し、本文、ボタンなどのまとまりを分け、隣接する情報との境界を分かりやすくする。
- 区切り：見出しや背景色を使い、どこから別の話題に移るのかを示す。
- 動き：点滅や速いアニメーションを避け、閲覧を妨げる動きを減らす。
利用者が表示を選べるようにする
初期設定が見え方に合わない場合に備え、利用者が表示を調整できる選択肢を用意します。
- 文字サイズを変更できるようにする。
- ダークモードやコントラストを強めた表示を選べるようにする。
- 表示を切り替えた後も、文字や操作要素が欠けないようにする。
ズームしても使える画面設計
ロービジョンの利用者は、ブラウザのズーム機能や拡大鏡を使って内容を確認することがあります。
拡大したときに文字やボタンが重なったり、画面の外に隠れたりすると、内容を読めても操作を続けられません。
レスポンシブデザインは、画面幅や表示状態に応じて要素の配置を調整する設計です。
異なる画面幅と拡大状態でレイアウトを確認し、見出し、本文、リンク、ボタンが使える状態を保ちます。
小さな画面や拡大表示での設計は、モバイルアクセシビリティとレスポンシブ設計の実践方法も参考になります。
キーボードだけで操作できるようにする
画面を拡大していると、マウスで小さな対象を追い続けることが難しい場合があります。
タブキーを使い、リンクやボタンへ画面上の順序に沿って移動できるようにします。
必要な機能にショートカットキーを設ける場合も、キーボードだけで操作を完了できるかを確かめます。
操作順序を含む確認方法は、キーボード操作とフォーカス管理のガイドで詳しく整理しています。
チェックツールと利用者テストの使い分け
確認方法ごとに見つけやすい問題が異なるため、チェックツールと実際の操作確認を組み合わせます。
| 確認方法 | 確認する内容 | 改善への使い方 |
|---|---|---|
| チェックツール | 色のコントラストや文字サイズ | 数値で確認できる項目を洗い出す |
| ズームとキーボードによる確認 | 拡大後のレイアウトと操作の順序 | 読む、移動する、操作する流れを確かめる |
| ロービジョン利用者によるテスト | 実際の見え方と使いにくい箇所 | 設計段階から意見を反映し、問題を修正する |
チェックツールを探す場合は、Webアクセシビリティチェックツールの選び方もご覧ください。
公開前のチェックリスト
- 本文の初期サイズ、書体、行間が読みやすい。
- 文字と背景のコントラスト比を測定している。
- リンクを色だけで区別していない。
- 見出しと余白から情報のまとまりを追える。
- 点滅や速いアニメーションを避けている。
- ズームしても文字や操作要素が重ならない。
- タブキーでリンクやボタンを順番に操作できる。
- ロービジョンの利用者から得た意見を改善に反映している。
文字、配色、レイアウト、操作、テストを順に確認すれば、ロービジョンの利用者が情報を読み取り、必要な操作を進めやすいWebサイトに近づけられます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご関心のある方は、サービスの詳細をご覧ください。