ウェブアクセシビリティとは、年齢、障害、利用環境などによって情報の受け取り方が異なる人も、ウェブ上の情報や機能を利用しやすくする考え方です。
見た目が整っていても、色の違いを判別しにくい、文字を拡大すると内容が隠れる、アイコンの意味がわからないといった状態では、必要な情報が届きません。
この記事では、色、文字、画像、レイアウトなどの視覚的提示に範囲を絞り、制作時に確認したいポイントを具体例とともに整理します。
視覚的提示とは何か
視覚的提示は、画面上の情報をどのような見た目と順序で伝えるかを指します。
対象には、文字と背景の色、コントラスト、文字サイズ、行間、見出し、余白、画像、アイコン、ナビゲーションの配置などが含まれます。
配慮が必要なのは、視覚障害のある人だけではありません。
次のような状況でも、視覚的提示の違いが読みやすさや操作しやすさに影響します。
- 視力が低下している、または色の違いを判別しにくい
- 加齢などにより、小さな文字や薄い文字を読み取りにくい
- 情報量の多い画面では、読む順序や操作箇所を把握しにくい
- 明るい場所など、画面を見分けにくい環境で利用している
したがって、特定の人向けの追加機能だけを用意するのではなく、通常の画面そのものを読み取りやすく設計することが出発点になります。
視覚的提示で確認したい5つのポイント
1．色だけで意味を伝えない
色は情報を見分ける助けになりますが、色だけを手掛かりにすると、違いを判別できない利用者には意味が伝わりません。
たとえば、入力エラーを赤い枠だけで示すのではなく、「入力内容を確認してください」という文と、該当箇所を示すアイコンや見出しを組み合わせます。
必須項目と任意項目、選択中と未選択、成功と失敗なども、色に加えて文字や形で区別します。
配色の考え方は、ウェブアクセシビリティに配慮した配色ガイドでも詳しく確認できます。
2．文字と背景のコントラストを確保する
コントラスト比は、文字色と背景色の明るさの差を数値で表したものです。
差が小さい組み合わせでは、視力が低下している人や明るい場所で画面を見る人が文字を読み取りにくくなります。
文字のコントラストでは、標準的な大きさの文字で4.5対1以上、大きな文字で3対1以上を目安にします。
デザイン時の見た目だけで判断せず、文字色と背景色の組み合わせごとに確認します。
比率の意味と確認方法は、コントラスト比の基準と確認方法にまとめています。
3．文字を拡大しても情報を失わない
利用者がブラウザのズーム機能で文字や画面を拡大したときも、本文、メニュー、ボタンの文字を読める状態にします。
確認するのは文字の大きさだけではなく、文字の重なり、途中で切れる表示、隠れて操作できなくなる要素がないかという点です。
特定の文字サイズを一律の正解とするより、拡大しても内容と操作を保てるかを確かめるほうが、さまざまな閲覧環境に対応しやすくなります。
4．見出しと余白で読む順序を示す
情報が多いページでは、見出し、段落、箇条書き、余白を使い、内容のまとまりと読む順序を示します。
ヘッダー、ナビゲーション、本文、補足情報の位置をページ間でそろえると、利用者は目的の場所を探しやすくなります。
長い説明を一つの段落に詰め込まず、一つの段落では一つの話題を扱います。
行間は1.5倍を一つの目安として、文字の大きさや一行の長さとの組み合わせを見ながら読みやすさを調整します。
5．画像やアイコンの意味を文字でも伝える
画像が情報を伝えている場合は、その内容を代替テキストで補います。
代替テキストは画像の見た目を機械的に説明する欄ではなく、画像を見られない利用者に何を伝える必要があるかを短い文で示すためのものです。
一方、情報を持たない装飾画像に詳しい説明を付けると、本文と同じ内容を繰り返すことがあります。
画像の役割を判断し、情報を伝える画像には内容に合う説明を、操作用のアイコンには「検索」「メニューを開く」などのテキストラベルを用意します。
画像ごとの判断例は、代替テキストとalt属性の基本で確認できます。
よくある問題と改善方法
| 問題 | 改善方法 | 確認例 |
|---|---|---|
| エラーを赤色だけで示す | 文章とアイコンを併用する | 色がわからなくても該当箇所と対処が伝わるか |
| 文字色と背景色が近い | コントラスト比を確認する | 通常の本文と大きな文字を分けて確認したか |
| 拡大すると文字が切れる | 文字と配置が追従する構成にする | 本文、メニュー、ボタンを拡大しても読めるか |
| 情報が一続きに並ぶ | 見出し、段落、箇条書きで分ける | 見出しだけでも内容の順序を把握できるか |
| アイコンだけで操作を示す | 意味を示すテキストラベルを付ける | アイコンを見なくても操作内容がわかるか |
高コントラスト表示と文字サイズ設定の位置づけ
高コントラスト表示や文字サイズ調整の機能は、利用者が自分に合う表示を選ぶための補助になります。
ただし、追加機能を選ばなければ本文を読めない状態にするのではなく、通常表示でも色、文字、配置の基本を整えておく必要があります。
調整機能を設ける場合は、本文だけでなくナビゲーションやボタンにも設定が反映されるかを確認します。
一部だけが拡大されると、読むことはできても目的の操作を完了できない場合があるためです。
公開前に使える確認リスト
- 色を使わなくても、エラー、選択状態、必須項目の意味が伝わる
- 文字と背景に十分なコントラストがある
- 画面を拡大しても、文字が重なったり隠れたりしない
- 見出しの順序が内容の構造と一致している
- 長い段落を分け、必要な箇所を箇条書きにしている
- 情報を伝える画像に、目的に合う代替テキストがある
- アイコンだけに頼らず、操作内容を文字でも伝えている
- 通常表示と調整後の表示の両方で、読む操作と選ぶ操作を確認した
視覚的提示の改善を小さく始める
視覚的提示を改善するときは、色だけに頼らない表現、コントラスト、拡大時の表示、見出し構造、画像やアイコンの説明を順に確認します。
一度に大きく作り替えられない場合でも、エラー表示や主要なボタンなど、利用者が目的を達成するために欠かせない箇所から直せます。
当社では、ウェブアクセシビリティを導入するためのUUU ウェブアクセシビリティウィジェットツールを提供しています。
表示の調整機能を検討している方は、詳細をご覧ください。