「知覚可能」とは、Webコンテンツの情報と操作に必要な手がかりを、利用者が受け取れる形で示す考え方です。
画像には目的に合う代替テキストを用意し、音声には字幕や文字起こしを添え、色だけで状態を伝えないようにします。
文字のコントラストと拡大時の読みやすさも整えることで、見え方や聞こえ方、利用環境が異なる人にも情報が届きやすくなります。
Webアクセシビリティの「知覚可能」とは
利用者がWebページを読む方法は一つではありません。
画面を見て読む人だけでなく、表示を拡大する人、音声を再生できない場所で動画を見る人、スクリーンリーダーで文字や要素の情報を音声または点字として確認する人もいます。
そのため、重要な情報を視覚や聴覚のどちらか一方だけに任せると、内容を受け取れない人が生じます。
「知覚可能」な設計が目指すのは、全員に同じ見え方を求めることではありません。
同じ意味を、利用者が扱える別の形でも受け取れるようにすることです。
対応内容を整理する
| コンテンツ | 起こりやすい問題 | 主な対応 |
|---|---|---|
| 意味のある画像 | 画像を見られないと内容や目的が伝わらない | 目的に合う代替テキストを付ける |
| 動画や音声 | 音声を聞けないと会話や効果音の意味が伝わらない | 字幕や文字起こしを用意する |
| エラーや状態表示 | 色を判別しにくいと状態を見分けられない | 色に加えてテキストで示す |
| 文字と背景 | 明るさの差が小さいと文字を読み取りにくい | 十分なコントラストを確保する |
| 本文や操作項目 | 拡大すると文字が欠けたり重なったりする | 拡大しても内容と操作を保つ |
知覚可能なコンテンツを作る方法
画像の目的に合う代替テキストを付ける
代替テキスト（alt属性）は、画像が伝える意味や機能を文字で示す情報です。
商品画像なら、利用者の判断に必要な色、形、特徴を簡潔に書きます。
周囲の本文ですでに説明している内容を繰り返したり、「画像」「写真」とだけ書いたりせず、そのページで画像が果たす役割を基準にします。
<img src="red-shirt.jpg" alt="赤いシャツ。胸元にロゴがある">ただし、すべての画像に説明文が必要なわけではありません。
区切りや背景として置いた装飾画像は、スクリーンリーダーの読み上げを増やさないよう、空のalt属性を設定します。
<img src="divider.png" alt="">動画と音声に字幕や文字起こしを用意する
字幕は、会話だけでなく、理解に必要な音の情報を映像と同期して示します。
文字起こしは、音声の内容を別のテキストとして読めるようにする方法です。
動画の内容と利用場面に合わせて使い分けます。
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="captions-ja.vtt" kind="captions" srclang="ja" label="日本語字幕">
</video>字幕ファイルを設置しただけで終えず、表示のタイミング、話者の区別、意味のある音が伝わるかを実際に再生して確認します。
動画掲載時の確認項目は、アクセシブルな動画掲載のポイントでも詳しく解説しています。
色だけで状態や意味を伝えない
「赤はエラー、緑は完了」のように色だけで状態を分けると、色を判別しにくい利用者には違いが伝わりません。
色に加えて、状態を表す言葉や形を添えます。
フォームのエラーでは、警告アイコンを見せるだけでなく、何が問題なのかをテキストで示します。
<p class="error">
<span aria-hidden="true">⚠</span>
<strong>エラー：</strong>メールアドレスを入力してください。
</p>この例では、アイコンを読み上げの対象から外しても、「エラー」という表示と具体的な修正内容が残ります。
文字と背景のコントラストを確保する
コントラスト比は、文字色と背景色の明るさの差を数値で表したものです。
本文など通常サイズの文字では、4.5:1以上を目安にします。
大きな文字やロゴなどは扱いが異なるため、4.5:1をすべての要素に一律で当てはめるのではなく、対象ごとに確認します。
配色を決める段階と公開前の両方でコントラストチェックツールを使うと、見た目の印象だけに頼らず点検できます。
文字を拡大しても内容と操作を保つ
利用者がブラウザの拡大機能や文字サイズ設定を使ったときに、文章が途中で切れたり、ボタン同士が重なったりしないレイアウトにします。
文字を大きくする専用機能を置くだけでなく、一般的な拡大操作でも読み進められるかを確認します。
画像や動画の中に重要な案内を入れる場合は、同じ情報を本文にも記載します。
たとえば、画像内に申込期限を表示したなら、期限を画像の近くにテキストでも示します。
公開前のチェックリスト
- 意味のある画像に、目的に合う代替テキストがある
- 装飾画像に空のalt属性がある
- 動画や音声に、内容に合う字幕または文字起こしがある
- エラー、必須項目、選択状態を色だけで区別していない
- 本文と背景のコントラストを確認した
- 文字を拡大しても、内容の欠落や操作項目の重なりがない
- 画像や動画内の重要情報を本文でも確認できる
最初に「このコンテンツは何を伝えるのか」を特定し、その意味が別の方法でも届くかを点検すると、対応の抜けを見つけやすくなります。
アクセシビリティ対応を続けるために
代替テキストや字幕は、掲載する内容に合わせて制作側が整える必要があります。
そのうえで、閲覧を補助する機能を導入することも、利用者が表示や操作を調整しやすくする手段の一つです。
当社では、Webアクセシビリティ機能の導入を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
機能や導入方法に関心がある方は、サービスページをご覧ください。