音声解説を提供するために、track 要素を使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML5。

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、タイミングを指定したテキストの音声解説トラックを video 構成要素に指定するために HTML5 track 要素を用いることである。タイミングの指定されたテキストの音声解説トラックは、視覚的な構成要素が隠れていたり、使えなかったり、使うのに不適であったりしたときの音声合成のための、メディア資源のビデオ構成要素のテキスト記述を含む。ユーザエージェントは視覚的でない方法で、例えばそれらを音声合成することによって、利用者にきっかけを使えるようにする。

track 要素の src 属性は URL であり、これはテキストトラックデータのアドレスである。

音声解説のきっかけは、メディア資源の聴覚的な構成要素で利用可能なギャップに収まる必要がある。トラックキューの時間間隔内に記述テキストを合成するのに十分な時間がない場合、ユーザエージェントはスピーチを切り捨てることがある。 これにより、追加可能な補足情報の量が制限される。

ユーザエージェントは、解説が完全に同期するまでビデオを一時停止し、そしてビデオを再開することで拡張音声解説もサポートしうる。

この参考達成方法がワーキンググループで最後にレビューされた 2019 年 2 月時点では、この達成方法に対するユーザエージェントのネイティブサポートはない。ただし、JavaScript のポリフィルによるサポートはある。

事例

例 1: 一つの言語における音声解説

英語ビデオのための video 要素。音声解説は WebVTT フォーマットで提供されている。

			 <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
			  </video>
            

例 2: 複数言語における音声解説

ビデオに英語とフランス語両方のソース要素を含み、WevVTT (vtt) ファイルフォーマットを使った英語とフランス語の音声解説を持つ video 要素。

			 <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<source src="myvideo.webm" srclang="fr" type="video/webm">
				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
				<track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French">
			  </video>            

例 3: 一つの言語におけるキャプション

音声解説トラックを持つ「グーグル自動走行車」の video

			<video controls tabindex="1">
				<source src="cdgQpa1pUUE.webm" type="video/webm">
				<source src="cdgQpa1pUUE.mp4" type="video/mp4">
				<track id="audesc" src="cdgQpa1pUUE.vtt" kind="descriptions" label="English descriptions" srclang="en-us"></track>
			</video>            

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

動画を再生するために用いられる各 video 要素において:

  1. 動画の言語で kind="descriptions"track 要素を含むことを確認する。

期待される結果

  • #1 の結果が真である。