アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

音声や映像に含まれる情報を提供する複数の方法とは?メディアのウェブアクセシビリティ

音声や映像に含まれる情報を提供する複数の方法とは

前回の記事では、画像に含まれる情報を異なる方法で提供する重要性について解説しました。
同様に、音声や映像に含まれる情報を別の手段で提供することも非常に大切です。

企業やサービスの紹介、説明で用いられる映像には、重要な情報が含まれることが多くあります。
また、音声のみのコンテンツであるポッドキャストはここ数年で人気が高まっています。

音声や映像に含まれる情報を別の手段でも提供することで、あらゆるユーザーがこのようなコンテンツの内容を理解できるようになります。

今回の記事では、音声や映像に含まれる情報の取り扱いに焦点を当て、なぜ別の手段での情報提供が必要なのか、またどのように情報を提供することが求められるのかを解説します。

 

1. 音声や映像に含まれる情報を別の手段で提供する必要性は?

前回の記事で、画像に含まれる情報を代替テキストなどを用いて提供することがウェブアクセシビリティ対応として非常に重要であるとお伝えしました。
音声や映像に関しても基本的な考え方は同じで、以下の理由から複数の手段で情報を提供する必要があると考えられます。

  • あらゆる人が同じ情報を得られる必要がある
  • 市場の拡大や新規ユーザー獲得の可能性がある
  • 検索エンジンの最適化(SEO)になる

これらの詳細な説明は前回の記事で行いましたので、ここでは割愛します。
詳しく知りたい方は、以下の記事の『1.画像を別の手段でも提供する必要性は?』をご覧ください。

 

2. ガイドラインから考える音声や映像

 

2-1. 音声や映像に関するWCAGの達成基準

音声や映像に含まれる情報を別の手段でも提供する場合、どのような対応が必要なのでしょうか?

ここでは、WCAG2.0の音声や映像に関わる項目の中から、JIS X 8341-3:2016において適合レベルAおよびAAとなっている達成基準について見ていきます。

その前に、まず解説に登場する用語について整理しておきましょう。
ガイドラインは聞き慣れない用語が出てきて難しく感じられますが、用語の意味を整理してから読み進めれば理解が深まるかと思います。

 

用語解説

非テキストコンテンツ
テキストではないあらゆるコンテンツのことを指します。
例を挙げると写真、グラフ、図表、動画、音声などです。

時間依存メディア
時間が進むにつれてその内容が変化し、情報が決まった順序で示されるメディアを意味します。
少し分かりにくい表現ですが、例としてはポッドキャスト、ラジオ、映画、ドラマ、ライブ配信など、音声や映像を活用したコンテンツが挙げられます。
時間依存メディアは、始めから終わりまで順を追うことですべての情報を理解できるようになっています。

時間依存メディアに対する代替コンテンツ
音声や映像の内容をテキストにした、脚本のようなものです。

メディアによっては、話している内容を文字起こしするだけだと情報が不足することがあります。
その場合は話している内容以外に、効果音や周囲の音、場面や背景、登場人物の動きや表情、映像に表示されているテキストやグラフィックの説明などを詳細に書き起こす必要があります。

さらに、それらを時間依存メディアと対応する順番で記述していく必要があります。
つまり、内容の要約や省略をしてはいけないのです。

キャプション
音声を聞くことが難しい状況で、音声の内容を知るために動画に表示するテキストのことを指します。
日本では字幕と呼ばれることが多いですが、キャプションと字幕は厳密に言うと異なります。
字幕は話している言葉のみを表示します。
一方、キャプションは話している言葉だけでなく内容を理解するために必要な効果音、音楽、笑い声なども表示します。

また、キャプションにはオープンキャプションとクローズドキャプションの2種類が存在します。
オープンキャプションは、常に表示されているキャプションを指します。
ユーザーによって非表示にすることはできません。
反対に、クローズドキャプションはユーザーが必要に応じてオン・オフできるようになっているキャプションのことです。
字幕放送のテレビ番組や、YouTubeのようなプラットフォームで利用できます。

同期したメディア
音声のみ、映像のみのメディアではなく、音声や映像が他のなにかとタイミングを合わせて(つまり同期して)動作するようになっているものを指します。
音声と映像の両方が含まれるメディア(音声と映像の同期)や、音声に合わせてボタンをクリックするコンテンツ(音声とインタラクティブ要素の同期)などが該当します。
例として、無声映画ではない映画や、問題文が読み上げられた後に正しい選択肢をクリックして選ぶ学習コンテンツなどが挙げられます。

 

1.1.1 非テキストコンテンツ

下記は、WCAG2.0解説書 達成基準1.1.1を理解するの引用です。
なお、音声や映像に関する部分以外は省略しています。

非テキストコンテンツ: 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)

(中略)

時間依存メディア: 非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。 (メディアに関するその他の要件は、ガイドライン 1.2を参照。)

この達成基準では、すべての非テキストコンテンツに対して同じだけの情報を得られるテキストの代替を提供するよう求めています。
しかし、時間依存メディアは多くの情報を含むため特定の条件を満たせば例外と認められます。

この条件とは、そのコンテンツがどのようなものかを明確にしておくことです。
具体的な方法としては

  • 音声や映像の概要をまとめたテキストを用意する
  • 「〇〇の音声」「〇〇の動画」のように分かりやすいタイトルを付ける

この達成基準では以上の対応で良いとされています。
ただし、これ以降の達成基準でより完全なアクセスを可能にするための対応が必要となります。

 

1.2.1 音声のみ及び映像のみ (収録済)

下記は、 WCAG2.0解説書 達成基準1.2.1を理解する の引用です。

収録済の音声しか含まないメディア及び収録済の映像しか含まないメディアは、次の事項を満たしています。ただし、その音声または映像がメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く: (レベル A)

収録済の音声しか含まない場合: 時間依存メディアに対する代替コンテンツによって、収録済の音声しか含まないコンテンツと同等の情報を提供しています。

収録済の映像しか含まない場合: 時間依存メディアに対する代替コンテンツまたは音声トラックによって、収録済の映像しか含まないコンテンツと同等の情報を提供しています。

この達成基準では、収録済みものでなおかつ音声だけ、映像だけのメディアについて以下のような対応が求められています。

  • 収録済み音声だけの場合、時間依存メディアに対する代替コンテンツを提供する
  • 収録済み映像だけの場合、時間依存メディアに対する代替コンテンツまたは音声トラックを提供する

例えば、誰かの話を録音した音声だけのメディアでは、その内容を正確に文字起こしした脚本のようなテキストを提供することが必要です。これにより、音声を聞くことが難しい状況でも内容を知ることができます。

また、映像だけのメディアでは、映像の内容を説明する脚本のようなテキストや音声トラックを提供する必要があります。これにより、映像を見ることが難しい状況でも、テキストをテキストリーダーで読み上げたり音声トラックを聞いたりして内容を知ることができます。

ただし例外として、音声や映像がウェブページ上のテキストの代替として提供されており、それが明確になっている場合には上記のような対応は不要です。

具体的には、ウェブページに製品の操作方法がテキストで書かれており、その下に実際に操作している動画が『製品を実際に操作している動画』といったタイトルで埋め込まれているといった状況です。

 

1.2.2 キャプション (収録済)

下記は、WCAG2.0解説書 達成基準1.2.2を理解するの引用です。

同期したメディアに含まれているすべての収録済の音声コンテンツに対して、キャプションが提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く (レベル A)。

この達成基準では、同期したメディアに収録済みの音声が含まれる場合、キャプションをつけることが求められています。

ただし、その同期したメディアがウェブページ上のテキストの代替として提供されており、それが明確になっていればキャプションの提供は不要です。

 

1.2.3 音声解説、またはメディアに対する代替 (収録済)

下記は、WCAG2.0解説書 達成基準1.2.3を理解するの引用です。

同期したメディアに含まれている収録済の映像コンテンツに対して、時間依存メディアに対する代替コンテンツまたは音声解説が提供されています。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く(レベル A)。

この達成基準では、同期したメディアに収録済みの映像が含まれる場合、時間依存メディアに対する代替コンテンツまたは音声解説を提供することが求められています。

ただし、その同期したメディアがウェブページ上のテキストの代替として提供されており、それが明確になっている場合には代替のテキストや音声解説は不要です。

 

1.2.4 キャプション (ライブ)

下記は、WCAG2.0解説書 達成基準1.2.4を理解するの引用です。

同期したメディアに含まれているすべてのライブの音声コンテンツに対してキャプションが提供されています(レベル AA)。

この基準では、同期したメディアにライブ配信のようなリアルタイムの音声が含まれる場合、キャプションを提供することが求められています。

 

1.2.5 音声解説 (収録済)

下記は、WCAG2.0解説書 達成基準1.2.5を理解するの引用です。

同期したメディアに含まれているすべての収録済の映像コンテンツに対して、音声解説が提供されています(レベル AA)。

この基準では、同期したメディアに収録された映像が含まれる場合、音声解説を提供することが求められています。

 

3.音声や映像に含まれる情報を提供する方法とは?

ガイドラインより、音声や映像に含まれる情報を提供する主な方法は以下の3点だと分かりました。

  • 時間依存メディアに対する代替コンテンツの提供
  • キャプションの提供
  • 音声解説の提供

これらの提供方法をそれぞれ確認しておきましょう。

ウェブアクセシビリティ対応を診断します

 

3-1.時間依存メディアに対する代替コンテンツの提供

用語解説で述べたように、時間依存メディアに対する代替コンテンツとは音声や映像の内容をテキスト化した脚本のようなものです。メディア制作時に用意した脚本がある場合、その脚本をもとに代替コンテンツを作成することが可能です。ただし、撮影時に変更された文言や場面があれば、脚本を音声や映像と一致するように修正しておくことが必要となります。

 

3-2.キャプションの提供

動画にキャプションを追加する方法は複数ありますが、YouTubeで動画投稿をする場合はプラットフォームの機能を使用してキャプションを追加することができます。

参考:字幕を追加する – YouTube ヘルプ

 

3-3.音声解説の提供

現在、ユーザーがオン・オフを切り替えられる音声解説を提供する場合、動画編集ソフトなどを使用してファイルを作成する必要があります。

しかし2023年より、動画に複数の音声トラックを追加する機能のテストがYouTubeで開始されました。

参考:YouTube Japan Blog: 世界の人気コンテンツを多言語吹き替えで順次視聴可能に

今のところこの機能を使って動画投稿ができるのは、限られたユーザーのみです。ですが、将来的にさまざまなユーザーがこの機能を使用できるようになれば、YouTubeへ投稿する動画に音声解説を付けられるようになるでしょう。

お役立ち資料 ホームページ作成からマーケティングのことまでよく分かる
blank
みんなが使いやすいホームページを作るために取り組んでいること

 

4. チャコウェブの例

チャコウェブサイトにはYouTubeに投稿した動画を埋め込んでいる箇所が多数存在しますが、プラットフォームの仕様に依存することもあり、ウェブアクセシビリティ方針では例外事項としています。

チャコウェブサイトのウェブアクセシビリティ方針
チャコウェブサイトのウェブアクセシビリティ方針のスクリーンショット。例外事項に「YouTubeなどの外部サービスに付随するコンテンツ」と書かれている。

ですが、こういった動画への対応も少しずつ進めています。

YouTubeはプラットフォームの機能でキャプション追加ができるようになっています。
その機能を利用して、以下のようにキャプションを追加しています。

チャコウェブサイトに埋め込まれているYouTubeショート動画のスクリーンショット。画面上部にキャプションが挿入されている。
チャコウェブサイトに埋め込まれているYouTube動画のスクリーンショット。画面下部にキャプションが挿入されている。

まだすべての動画には対応できていませんが、順次対応していく予定です。

 

5. まとめ

今回は、音声や映像に含まれる情報の取り扱いに焦点を当てて解説しました。
代替情報の主な提供方法は以下の3つです。

  • 時間依存メディアに対する代替コンテンツの提供
  • キャプションの提供
  • 音声解説の提供

画像に比べると、ホームページに音声や映像を挿入する機会は少ないと思います。
ただ、音声や映像、特に両方を利用した同期メディアに含まれる情報量は莫大です。

こういったメディアを効果的に活用し、さらにその情報をあらゆる人に伝えることでより良いホームページに育てていきましょう!

ウェブアクセシビリティ対応は、まずは状況を把握して対応すべき箇所の特定からはじめるのが良策です。
チャコウェブでは、「JIS X 8341-3:2016」に沿った詳細な診断サービスを行っています。
診断結果を出さなければならない方、ウェブアクセシビリティのチェックでお困りの方はお気軽にご相談ください。
ウェブアクセシビリティチェックのサービスについて見てみる


          この記事を書いた人        
山口 ウェブアクセシビリティマネージャー
株式会社Cyber Cats ウェブアクセシビリティマネージャー。
コーダー、ディレクターを経験する中で「使いやすいホームページ」の重要性を強く感じ、ウェブアクセシビリティ向上に取り組み始めました。
最初は個人的に行っていた活動でしたが、少しずつチームに広がり、現在は組織全体の活動となっています。
自社ホームページのウェブアクセシビリティ監修の他、社内勉強会を開いてメンバーへの情報共有や意見交換を行っています。
また、ウェブアクセシビリティをテーマにブログ執筆を行っており、基本原則の解説や自社ホームページを例に挙げて改善例の紹介などを行っています。
最近はアクセシビリティに関わる施設への取材も開始し、そこで得た経験からウェブアクセシビリティを考える活動を行っています。
詳しいプロフィールはこちらから
山口 ウェブアクセシビリティマネージャーのXはこちら
SNSでフォローする