画像や動画が見た目には分かりやすくても、その意味が画像や音声の中にしかなければ、情報を受け取れない利用者がいます。
非テキストコンテンツとは、画像、図、動画、音声など、本文の文字だけでは内容が伝わらない情報です。
マシンリーダビリティとは、こうした情報の意味や役割を、コンピューターや支援技術が扱える形で示すことです。画像には代替テキスト、動画には字幕、音声には文字起こしを用意するように、コンテンツの種類と目的に合った代替手段を選びます。
先に確認したいポイントは次の四つです。
- 情報を伝える画像には、用途が分かる代替テキストを付ける。
- 動画には正確な字幕を用意し、映像だけで示す情報は音声でも補う。
- 音声には文字起こしを用意する。
- PDFやインフォグラフィックには、読み取れる文書構造や同等のテキスト説明を用意する。
非テキストコンテンツが伝わりにくくなる理由
スクリーンリーダーは、画面上の文字、見出し、リンク名、画像に設定された説明などを利用して情報を伝えます。画像に説明がなく、動画の内容が映像だけで進み、音声に文字起こしがなければ、支援技術が利用できる手掛かりが不足します。
ここで必要なのは、すべてを長文で説明することではありません。同じ内容を別の方法でも受け取れるようにし、装飾は情報として読み上げさせないことです。
コンテンツ別に選ぶ代替手段
| 種類 | 伝えたい内容 | 主な対応 |
|---|---|---|
| 画像 | 写真や図が持つ意味 | 代替テキスト、または本文中の説明 |
| 動画 | 話している内容と映像上の情報 | 字幕と音声解説 |
| 音声 | 会話やナレーション | 文字起こし |
| 文書の本文と構造 | タグ付きPDFとテキストでの補足 | |
| インフォグラフィック | 図の関係や結論 | 近くに置く要約と詳しいテキスト説明 |
画像は用途を言葉に置き換える
代替テキストは、画像の見た目を機械的に描写する文ではありません。そのページで画像が何を伝えているのかを、短い言葉に置き換えたものです。
- 情報を伝える画像：画像の目的や要点を簡潔に書く。
- 装飾目的の画像：空のalt属性を設定し、不要な読み上げを避ける。
- 文字を含む画像：画像内の重要な文言を、可能な限り本文でも読める形にする。
- 複雑な図やインフォグラフィック：短い代替テキストにすべてを詰め込まず、近くに詳しい説明を置く。
たとえば、地図の画像に「地図」とだけ書いても、場所が分かりません。
<img src="map.png" alt="東京駅周辺の地図">ただし、この文が十分かどうかは地図の目的で決まります。会場までの経路を伝える地図なら、道順も本文のテキストで示すと、画像を見られない場合でも目的地へたどり着けます。
動画は音声と映像を分けて補う
アクセシブルな動画掲載では、音声で伝える内容と、映像だけで伝える内容を分けて確認します。
- 字幕：会話やナレーションを文字で読めるようにする。
- 音声解説：画面の変化や動作など、映像を見なければ分からない情報を音声で補う。
- 自動字幕：下書きとして活用し、公開前に内容を確認して修正する。
ナレーションだけで映像の要点が分かる動画なら、追加の音声解説が不要な場合もあります。まず、映像を見ずに音声だけを聞いて、欠ける情報があるかを確認します。
音声には内容を追える文字起こしを付ける
ポッドキャストや音声記事には、会話やナレーションを文章で確認できる文字起こしを用意します。音を出せない環境でも内容を読めるため、聴覚に障害のある利用者以外にも役立ちます。
インタビューの要点だけを伝えるページなら、要約を添える方法もあります。ただし、音声全体の代わりが必要な場面では、要約だけで済ませず、内容を追える文字起こしを掲載します。
PDFとインフォグラフィックは本文の外でも読める形にする
PDFのアクセシビリティでは、文字を画像として並べるだけでなく、見出しや本文を読み取れるタグ付きPDFとして作成します。PDFの要点をWebページ側にも書いておけば、ファイルを開く前に内容を判断できます。
インフォグラフィックも、図だけで説明を完結させません。図が示す結論を短く説明し、関係や手順の詳細を本文で補います。
改善を進める順序
- 対象を洗い出す：画像、動画、音声、PDF、図解をページ単位で確認する。
- 目的を分類する：情報を伝えるもの、操作に必要なもの、装飾だけのものを分ける。
- 代替手段を選ぶ：代替テキスト、字幕、音声解説、文字起こし、本文での補足を割り当てる。
- 自動処理の結果を見直す：自動字幕などをそのまま公開せず、元の内容と照合する。
- 別の受け取り方で確認する：画像を見ない、音声を再生しないなどの条件でも、主要な情報を理解できるかを確かめる。
アクセシビリティとSEOの関係
代替テキスト、字幕、文字起こしは、非テキスト情報を文字として扱えるようにします。その結果、検索システムがページの内容を理解する手掛かりにもなります。
ただし、代替テキストを入れれば検索順位が上がる、字幕を付ければ必ず検索結果に表示される、という意味ではありません。利用者に情報を正しく届けることを優先し、画像や音声の内容に合う説明を付けることが基本です。
同じ情報を複数の方法で受け取れるページは、音を出せない場所や画面を見づらい状況でも利用しやすくなります。アクセシビリティへの対応は、障害の有無だけでなく、利用環境による情報の受け取りにくさも減らします。
公開前に確認する項目
- 情報を伝える画像に、用途が分かる代替テキストがあるか。
- 装飾画像のalt属性が空になっているか。
- 画像内の重要な文字を本文でも読めるか。
- 動画の字幕を元の音声と照合したか。
- 映像だけで示す情報を音声でも補っているか。
- 音声コンテンツに文字起こしがあるか。
- PDFをタグ付きで作成し、要点をWebページ側でも確認できるか。
- インフォグラフィックの結論と詳細をテキストでも説明しているか。
非テキスト情報を届く形に変える
マシンリーダビリティの改善は、画像、動画、音声を機械に理解させることだけを指しません。利用者が別の方法でも同じ目的を達成できるように、意味をテキストや音声へ置き換える作業です。
まずは、情報を伝える画像の代替テキスト、動画の字幕、音声の文字起こしを確認します。そのうえで、複雑な図やPDFにも同等の説明を用意すると、非テキストコンテンツをより多くの利用者へ届けられます。