トピックを検索
画面に映る内容が抜け落ちた動画の書き起こし
コーヒーの淹れ方を紹介する動画で、書き起こしを字幕ファイルからそのまま作ったため、画面のカードにしか出ない分量が、書き起こしを読む人には伝わらない
<p>このくらい量ります。</p> 問題
動画を見ることも聞くこともできない人が書き起こしを読んでも、分量が分からない
コーヒー豆の店の淹れ方動画は、WCAGのレベルAAで求められることをすでに満たしています。字幕があり、プレーヤーのそばの「音声解説」ボタンで、音声解説がなく、画面の情報が伝わらない動画と同じように音声解説版に切り替えられます。プレーヤーの下には、閉じた details の中に「書き起こし」があります。店はこれを手早く、字幕ファイルから字幕一つにつき一段落で作りました。中身は「当店のハウスブレンドの淹れ方です。このくらい量ります。お湯は少し置きます。ゆっくり注いで、ここで止めます。[キッチンタイマーの音]」です。分量は映像の中にあります。はかりの数字が増えていく間に「豆15 g・お湯250 ml」のカードが、タイマーが減っていく間に「沸騰後、30秒冷ます」のカードが、最後に「3回に分けて注ぐ・3:00で止める」のカードが出ます。点字ディスプレイでページを読む盲ろうの人には、映像も、通常版と音声解説版のどちらの音声も届きません。届くのは書き起こしだけなので、書き起こしを開きます。そこには「このくらい」量るとしか書かれていません。
レベルAAAの達成基準1.2.8は、音声のある収録済みの動画すべてに、時間依存メディアの代替を求めます。時間依存メディアの代替とは、動画が話す内容と映す内容を順番どおりに伝える文書のことで、せりふ、意味のある音、場面、動作、画面の文字を含みます(達成方法G69)。字幕には聞こえる内容しか入らないため、字幕から作った書き起こしは音声の書き起こしにすぎません。W3Cはこうした書き起こしを「基本の書き起こし」と呼び、映像の情報を加えた「説明付きの書き起こし」でなければ、盲ろうの人には動画の内容を届けられないとしています。書き起こしと動画を照らし合わせる仕組みは、ブラウザーにはありません。この例では字幕が1.2.2を、音声解説版が1.2.5を満たすため、動画はレベルAAのメディアの基準を満たしていても、この基準は満たしません。
WCAGが対象から外す動画が一つあります。テキストのためのメディア代替、つまりページにすでにあるテキスト以上の情報を伝えず、そうはっきり示した動画です。その表示がないことは、失敗例F74に当たります。この例外を使い、はっきり示すのが、下の二つ目の修正方法です。
書き起こしは、検索したり、ざっと読んだり、翻訳したり、後で読み返したりするものでもあります。ページで「グラム」を検索する人や、翌朝に動画を再生し直さずにレシピを読み返す人も、同じ抜けに出会います。
10グループ中3グループに影響
axeの video-caption ルールは、<video> の中に字幕トラックがあるかを確かめ、この動画ではそれを見つけて合格にします。書き起こしと映像を比べるルールはありません。EaseWebの監査はすべての動画を手動確認の対象として挙げます。近くに書き起こしらしきものがあれば、映像の内容を含む場合に限りレベルAの1.2.3を満たすと示しますが、1.2.8には触れません。映像が何を加えているかは、動画を見た人にしか言えません。AIは、音声認識で言葉を、画像を理解するモデルで場面を書き出し、映像の内容を含む書き起こしの下書きを作れます。しかし「はかりで豆を量る」という下書きは正しく見えても、はかりが示す15 gが抜けているため、レシピを知っている人が動画と照らし合わせる必要があります。
試してみる
音と映像をオフにして、豆を何グラム量るか調べてみましょう
スイッチは、動画を見ることも聞くこともできない人の代わりです。プレーヤーと「音声解説」ボタンは使えますが、届くのはテキストだけです。書き起こしを開いてください。
修正を適用すると、映像の内容を含む書き起こしか、ページに書いた手順を読めます。手順の場合、動画にはその手順を映したものだと書き添えてあります。
問題あり 修正できますか?
ハウスブレンドの淹れ方
書き起こし
当店のハウスブレンドの淹れ方です。
このくらい量ります。
お湯は少し置きます。
ゆっくり注いで、ここで止めます。
[キッチンタイマーの音]
修正方法
話す内容も映る内容も、動画のすべてをテキストで伝える
<h2>ハウスブレンドの淹れ方</h2><video id="brew-video" controls preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg" data-described="brew-guide.described.webm"> <track kind="captions" srclang="ja" label="日本語" src="brew-guide.ja.vtt" data-described="brew-guide.described.ja.vtt"></video><button type="button" id="describe" aria-pressed="false"> 音声解説</button><details> <summary>書き起こし</summary> <p>当店のハウスブレンドの淹れ方です。</p> <p>このくらい量ります。</p> <p>お湯は少し置きます。</p> <p>ゆっくり注いで、ここで止めます。</p> <p>[キッチンタイマーの音]</p></details><!-- 音声解説版への切り替えと再生位置の引き継ぎ。音声解説のガイドと同じもの。 --><script src="audio-description.js"></script>問題点3点
- 書き起こしは字幕ファイルを段落に並べただけで、話した言葉はすべてあっても、映る内容は何もありません。
- 15 g、250 ml、30秒、3回に分けて注ぐことは、映像の中にしかありません。
- テキストしか読めない人には、「このくらい」量り、「ここで」止めることしか分かりません。
プレーヤーのそばに置く、映像の内容を含む書き起こし
<h2>ハウスブレンドの淹れ方</h2><video id="brew-video" controls preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg" data-described="brew-guide.described.webm"> <track kind="captions" srclang="ja" label="日本語" src="brew-guide.ja.vtt" data-described="brew-guide.described.ja.vtt"></video><button type="button" id="describe" aria-pressed="false"> 音声解説</button><details> <summary>書き起こし(映像の内容を含む)</summary> <p><b>映像:</b>キッチンの台にやかんとカップ。 カードに「コーヒーの淹れ方」。</p> <p><b>ナレーション:</b>当店のハウスブレンドの淹れ方です。</p> <p><b>ナレーション:</b>このくらい量ります。</p> <p><b>映像:</b>はかりに載せた器にスプーンで豆を入れ、はかりが15 gを示す。 隣に250 mlまで入った計量カップ。カードに「豆15 g・お湯250 ml」。</p> <p><b>ナレーション:</b>お湯は少し置きます。</p> <p><b>映像:</b>やかんから湯気が上り、タイマーが30秒から減っていく。 カードに「沸騰後、30秒冷ます」。</p> <p><b>ナレーション:</b>ゆっくり注いで、ここで止めます。</p> <p><b>映像:</b>やかんからカップの上のドリッパーへ3回に分けて注ぎ、 タイマーが3:00まで進む。カードに「3回に分けて注ぐ・3:00で止める」。</p> <p>[キッチンタイマーの音]</p></details><!-- 音声解説版への切り替えと再生位置の引き継ぎ。音声解説のガイドと同じもの。 --><script src="audio-description.js"></script>修正の手順4ステップ
summaryの文言を、中身が分かるように「書き起こし(映像の内容を含む)」に変えます。- 話した言葉はすべて順番どおりに残し、誰が話したかを書きます。
- 映像が何かを示す箇所ごとに、その時点で映っている動作とカードの文字を、「映像:」の見出しを付けて書きます。これで分量と時間がテキストに入ります。
- タイマーの音のように意味のある音は、角かっこ([])に入れて残します。
これで修正前の例は直り、1.2.8を満たします(達成方法G69)。プレーヤーのすぐ下にある普通のテキストなので、点字ディスプレイで読め、ページ内検索で「15 g」が見つかり、動画と同じ変更の中で直せます。字幕と音声解説版は、見る人や聞く人のためにそのまま残します。
この方法を選ぶ理由:テキストの代替は、元の内容のそばに置く
テキストがそろっていれば、どちらも1.2.8を満たします。おすすめは映像の内容を含む書き起こしです。動画が何を加えても通用するのに対し、手順をページに書く方法は、動画が手順以上の内容を話したり映したりしない間しか通用しません。手順をページに書く方法は、文章が主で動画が補足のレシピや使い方のページに向いています。再生する前から分量がページにあるので、すべての読者の役に立ちます。動画を手順の文章に合わせて作り、文章と一緒に編集する場合に選びましょう。
W3Cが勧めるように字幕ファイルから始め、音を消して動画を見ながら、映る内容を書き加えます。内容を追うのに必要なものを書きます。画面の文字や数字、動作、誰が映っているか、場所の変化です。現在形で書き、ナレーションがすでに言っていることは繰り返しません。音声解説版があれば、その台本が役立ちます。間に入れる解説はすでに書かれていますし、書き起こしなら間の長さに収める必要がないので、さらに詳しく書けます。
映る内容と話す内容の区別は、斜体や色だけでなく、「映像:」のように点字ディスプレイでも読める言葉で付けます。角かっこ([])を音のためだけに使えば、読む人がどちらか迷いません。
動画をどこで再生するかで、書き起こしの出どころが変わります。
- 自分のサイトの
<video>:上の例のように、その下に映像の内容を含む書き起こしを置きます。長ければdetailsに入れます。 - 再生に合わせて行を強調する、対話型の書き起こしを作るプレーヤー:Able Playerは字幕ファイルと解説ファイルを合わせて作るため、
<track kind="descriptions">があれば映像の情報も入ります。YouTubeの文字起こしパネルのように字幕だけから作るものは、字幕の文を示すだけで、映像の内容は入りません。 - 埋め込んだYouTube、Vimeo、Wistiaのプレーヤー:埋め込みの下に、自分で書いた映像の内容を含む書き起こしを置きます。
動画が視聴者に操作を求める場合、たとえば表示に合わせてボタンを押す、次に見る動画を選ぶといった場合は、テキストの版にも同じことをする方法が必要です。その位置に置くリンクなどです(達成方法G69)。
テキストを繰り返すと示す動画は、そのテキストのそばに置くのが望ましく、どのテキストの繰り返しかは必ず示します。長い記事の最後にある「動画で見る」が「動画」という表示だけなら、記事を一言一句繰り返していても、F74に当たります。手順の手話通訳(レベルAAA)は、手話通訳がない、または手話が小さすぎて読み取れない動画で扱っています。
修正の確認
3項目、マウス不要
確認方法: 音を消して視聴、画面を見ずに視聴、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。動画やナレーション、テキストを差し替えるたびに確認し直してください。
制限
これは出発点となる実装例であり、すべてのアプリケーションでの適合を保証するものではありません。書き起こしに何が必要かは動画によって変わり、このガイドが代わりに判断することはできません。話し声の字幕は字幕のない動画と、確認されていない自動字幕で、映像の音声解説は音声解説がなく、画面の情報が伝わらない動画で扱っています。ポッドキャストのクリップや無音の動画は、レベルAの1.2.1として書き起こしのないポッドキャストと無音の動画で扱っています。点字ディスプレイを使う人も含め、実際に読む人と、動画が実際に再生されるプレーヤーやプラットフォームで、一連の流れ全体をテストしてください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。