サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

画像・動画・非テキスト情報にどう配慮するか｜WCAG 2.2時代の代替手段設計入門

greeden
person holding camera with red lights on lens

Photo by Lisa Fotios on Pexels.com

画像・動画・非テキスト情報にどう配慮するか｜WCAG 2.2時代の代替手段設計入門

Webアクセシビリティの話題になると、文章やフォーム、キーボード操作に意識が向きやすいものですけれど、実際のWebサイトでは、画像、図表、アイコン、動画、音声、PDF内の図版など、文字以外の情報がとても多く使われています。そして、ここに必要な配慮が欠けると、重要な情報そのものが届かなくなってしまいます。たとえば、画像の中にだけ案内文が入っている、動画の内容が音声なしでは理解できない、字幕がなくて会話が追えない、図表の意味が本文で説明されていない。こうした状態では、利用者は「見られない」「聞こえない」だけでなく、「意味がつかめない」まま取り残されてしまいます。第6回では、画像・動画・非テキスト情報への配慮をテーマに、代替手段をどう設計するかを、実務に引き寄せながら整理してまいります。

この記事でわかること

  • 非テキスト情報に代替手段が必要な理由
  • 画像の目的に応じた代替テキストの考え方
  • 図表、アイコン、装飾画像の扱い分け
  • 動画や音声に必要な字幕、文字起こし、音声解説の考え方
  • UUUウェブアクセシビリティサービスとの親和性と役割の違い

まず押さえたいのは、代替手段とは「画像を全部文章で説明すること」ではないという点です。大切なのは、利用者がそのコンテンツから受け取るべき情報や機能を、別の形でも受け取れるようにすることです。W3Cの画像チュートリアルでも、画像にはその目的に応じたテキスト代替を提供する必要があると示されています。つまり、写真なら写真としての意味、ボタンならボタンとしての機能、図表なら図表として伝えたい情報が、適切な形で置き換えられていればよいのです。見た目を逐一細かく描写することよりも、「その画像は何のために置かれているのか」を考えることのほうが、ずっと重要です。 (w3.org)

この考え方を理解するうえで役立つのが、「画像の目的で分ける」という視点です。W3Cでは、画像を informative images、decorative images、functional images、complex images などに分けて考える方法が整理されています。たとえば、商品の特徴を伝える写真、地図、注意喚起のイラストは情報を持つ画像です。一方で、背景模様や飾り線のように意味を持たない画像は装飾です。また、検索ボタンの虫眼鏡やPDFダウンロードのアイコンのように、押すと何かの操作を行うものは機能を持つ画像です。さらに、グラフやフローチャート、組織図のように、短い一文では情報を十分に表しにくいものは複雑な画像として考えます。この分類ができるだけで、代替手段の作り方はかなり整理しやすくなります。 (w3.org)

情報を持つ画像では、その画像が伝えている意味を短く的確に表すことが基本になります。たとえば、人物写真なら「会議室で打ち合わせをする社員3人」のように、文脈に必要な範囲で内容を伝えます。商品の写真なら「防水仕様の黒い折りたたみ傘」のように、利用者が知りたい特徴に寄せて書くほうが親切です。ここでよくある誤解は、見えているものを全部説明しなければならないという考え方です。けれど、W3Cは informative image の代替テキストについて、視覚的な細部を逐語的に写すより、画像が伝えている意味や内容を表すことを重視しています。つまり、利用者にとって必要な情報が届けばよいのであって、説明文を長くすること自体が目的ではありません。 (w3.org)

一方で、装飾画像は別の扱いになります。意味を持たず、見た目を整えるためだけに置かれている画像まで読み上げ対象にしてしまうと、かえって利用者の負担が増えてしまいます。W3Cの decision tree や tips でも、装飾画像は空の alt 属性、つまり alt="" として支援技術から隠す考え方が示されています。たとえば、見出しの横に添えた飾りの葉っぱ、区切り線代わりのアイコン、背景のパターン画像などです。こうしたものが「画像」と毎回読み上げられると、本当に必要な情報へたどり着きにくくなります。実務では、装飾に使うものはできるだけCSSで表現し、意味を持たない画像を本文に混ぜすぎないことも大切です。 (w3.org) (w3.org)

機能を持つ画像では、見た目ではなく「何が起こるか」を伝える必要があります。たとえば、虫眼鏡のアイコン画像が検索ボタンとして使われているなら、代替テキストは「虫眼鏡」ではなく「検索」のほうが適切です。PDFのアイコンなら「PDF」とだけ読むより、「会社案内PDFを開く」「申込書PDFをダウンロード」のように、操作の結果がわかる表現のほうが実用的です。利用者が知りたいのは絵柄そのものではなく、その要素を使うことで何ができるかだからです。画像を操作部品として使う場合は、デザインの美しさだけでなく、機能の名前が正しく伝わるかを必ず確認したいところです。 (w3.org)

複雑な画像では、短い alt テキストだけで説明しようとしないことが重要です。グラフ、比較表、組織図、手順図、地図、構造図のようなものは、短い説明だけでは情報がこぼれやすくなります。W3Cでも、複雑な画像については、簡潔な代替テキストに加えて本文や近接テキストで十分な説明を行う方法が案内されています。たとえば、棒グラフなら「2025年度の売上推移を示す棒グラフ」と短く示したうえで、本文中に「4月から8月にかけて増加し、9月に一時減少、その後再び上昇」といった要点を書く。路線図なら、主要な経路や乗り換え条件を文章でも示す。図そのものが読めない人だけでなく、画像を拡大しにくい人や、急いで内容を把握したい人にとっても有効です。デジタル庁のガイドブックでも、図表などに対して必要な情報を代替テキストや本文で漏れなく反映する考え方が示されています。 (w3.org) (digital.go.jp)

ここで注意したいのが、「画像の中の文字」です。バナーや図版に重要なお知らせ、キャンペーン条件、電話番号、開催日時などが画像として埋め込まれていると、その情報は代替手段がなければ取りこぼされます。しかも、文字を画像にすると、拡大しにくい、翻訳しにくい、表示環境によって読みにくいといった問題も起こりやすくなります。ロゴのように表現上やむを得ない場合を除けば、重要な文字情報はなるべくHTMLテキストとして掲載するほうが望ましいです。仮に画像の中に文字を含める場合でも、その文字情報が本文や代替テキストで取得できるようにしておく必要があります。画像は便利ですけれど、情報の主役にしすぎないことが大切です。 (w3.org) (digital.go.jp)

動画と音声になると、代替手段の設計はもう少し広がります。WCAG 2.2のガイドライン1.2では、時間依存メディアに対して代替コンテンツを提供することが求められています。W3Cの media accessibility に関する資料では、動画には少なくとも字幕、必要に応じて文字起こし、視覚情報を補う音声解説などが重要であると整理されています。字幕は、音声が聞こえにくい人のためだけではなく、無音環境で動画を見る人、日本語を文字でも追いたい人、専門用語を確認したい人にとっても役立ちます。また、文字起こしは検索性や再利用性の面でもメリットがあります。動画を公開しただけで情報提供が完了したと考えず、内容を別経路でも受け取れるようにする発想が大切です。 (waic.jp) (w3.org)

字幕については、「話している内容が文字になっていれば十分」と考えられがちですが、実際にはそれだけでは足りない場合があります。W3Cは、キャプションには発話だけでなく、内容理解に必要な非発話音情報も含める考え方を示しています。たとえば、笑い声、拍手、警告音、電話の着信音、場面転換を理解するのに重要な効果音などです。会話中心の動画であっても、誰が話しているかが不明だとわかりにくいことがありますし、説明動画なら画面上の文字や操作内容との対応も大切になります。字幕は単なる“台本化”ではなく、音声から受け取れる情報を適切に文字へ置き換える作業なのです。 (w3.org)

さらに、映像に重要な情報がある場合には、音声解説や説明付きの文字起こしも検討が必要です。たとえば、手順動画で「ここをクリックします」と言いながら画面上のどこを操作しているかを言わない、インタビュー動画で肩書きが画面表示だけになっている、プロモーション映像で説明のない場面転換が多い。こうした場合、音声だけでは情報が十分に伝わりません。W3Cは description of visual information の中で、行動、場面変化、画面上の文字、表情や位置関係など、理解に必要な視覚情報を補う考え方を示しています。すべての動画に大がかりな音声解説が必要というわけではありませんが、「音だけで内容が追えるか」を一度確かめることは、動画制作の実務として非常に有効です。 (w3.org)

文字起こしは、動画や音声の内容をテキストで再利用できる点でも価値があります。W3Cの transcript に関する解説では、音声内容の文字化に加えて、必要に応じて視覚情報も含めた descriptive transcript が、特定の利用者にとって重要であると説明されています。たとえば、セミナー動画なら講演内容を文字起こししておくことで、あとから内容を検索しやすくなります。ポッドキャストなら、要点を記事として再編集できます。動画を視聴しづらい環境の人や、読むほうが理解しやすい人にとっても、文字起こしは有効です。つまり、代替手段は“仕方なく付ける追加物”ではなく、情報資産を増やす方法でもあるのです。 (w3.org)

実務で迷いやすいのは、「どこまで説明するか」だと思います。ここでは、まず目的を基準にするのが有効です。たとえば、商品写真なら利用判断に必要な特徴を優先する。採用ページの社員写真なら、雰囲気を伝える程度で十分な場合もある。図表なら結論や傾向を本文でも言い直す。操作説明動画なら、画面上の手順が音声だけで追えるかを確認する。イベント記録動画なら、登壇者名や資料タイトルが画面文字だけになっていないかを見る。要するに、「このコンテンツを見られない、聞けない場合でも、利用者は必要な情報を得られるか」という問いを持つことが大切です。表現を全部写す必要はありませんが、意味は取りこぼさないようにしたいところです。

ここで、UUUウェブアクセシビリティサービスとの親和性も整理しておきます。UUUのように、文字サイズ変更、コントラスト調整、読み上げ、翻訳、ふりがな表示などの機能を提供するサービスは、本文説明や字幕、代替テキスト周辺の理解を助けるという意味で相性があります。たとえば、画像の近くに置いた説明文が読みやすくなる、字幕の可読性が上がる、補足テキストを理解しやすくなるといった場面では、閲覧支援が役立つでしょう。動画の周辺情報を読む負担が減ることもあります。

ただし、代替手段そのものは、元のコンテンツ設計で用意しなければなりません。画像に適切な alt を付けること、装飾画像を読み上げ対象から外すこと、図表の説明を本文に置くこと、動画に字幕や文字起こしを用意すること、必要な視覚情報を音声やテキストで補うことは、閲覧支援ツールだけでは自動的に解決できません。つまり、UUUのようなサービスは「代替情報を受け取りやすくする」面では親和性が高い一方、「代替情報そのものを設計する」役割は担えません。この違いを理解しておくと、ツール導入に期待しすぎず、制作段階で必要な対応をきちんと行いやすくなります。

このテーマは、特に広報、編集、デザイン、動画制作に関わる方に役立ちます。広報担当者であれば、画像中心のお知らせやバナー制作で重要情報を画像に閉じ込めない視点が持てます。デザイナーであれば、アイコンや図表の役割を整理し、本文と連携した説明設計がしやすくなります。動画担当者であれば、字幕や文字起こし、画面説明を制作工程に組み込みやすくなります。エンジニアであれば、HTML実装や埋め込みメディアの設定を通じて、代替手段が正しく利用できる形に整えられます。非テキスト情報のアクセシビリティは、誰か一人の後工程ではなく、企画段階から考えるほど無理なく実現しやすい領域です。

第6回のまとめです。画像・動画・非テキスト情報への配慮で大切なのは、見た目を全部説明することではなく、利用者が受け取るべき情報や機能を、別の手段でも受け取れるようにすることです。画像は目的別に考え、情報を持つ画像には意味のある代替テキストを、装飾画像には不要な読み上げを避ける処理を、複雑な図表には本文での十分な説明を用意することが基本になります。動画や音声では、字幕、文字起こし、必要に応じた音声解説によって、内容理解の入り口を増やすことが重要です。そして、UUUウェブアクセシビリティサービスのような支援策は、こうした代替情報を読みやすく受け取りやすくする面で親和性がありますが、代替手段そのものの設計はやはり作り手の責任です。次回は、公開して終わりにしないために、試験、改善、運用体制をどう作るかを見てまいります。

参考リンク

モバイルバージョンを終了