トピックを検索
スタイルを変えられない字幕、変換で消える字幕
ショップの動画プレーヤーが字幕を小さな白い文字で描き、見た目を変える設定がありません。さらにストリーミング用の変換で、字幕と音声解説の音声が失われます。
font: 13px/1.3 "Brand Sans", sans-serif; 問題
大きな字幕やコントラストの高い字幕が必要な人に、見た目を変える設定がありません。そして、ストリーミング版の動画には字幕も音声解説もまったくありません。
コーヒー豆の焙煎店の淹れ方の動画には、確認済みの字幕と音声解説の音声があり、独自のプレーヤーには音量の隣にCCとADのボタンがあります。それでも、まだ2つの問題が起きます。
プレーヤーは、店の見た目に合わせるため、字幕を自分で描いています。13ピクセル、ブランドの細い書体、白、背景の箱なしです。キッチンの台は明るい色で、その上の字幕は読みにくくなっています。パソコンの字幕の設定で黒地に黄色の大きな字幕を選んでいる人にも、同じ小さな白い文字が出ます。その設定が整えるのはブラウザーが描く字幕で、プレーヤー自身の箱の中の文字ではないからです。プレーヤーには字幕の設定がありません。
その後、動画プラグインに「高速ストリーミング」の選択肢が加わり、店はそれをオンにしました。どの動画も、スマートフォンですぐに始まるアダプティブストリームに変換し直されます。エンコーダーが取り込んだのは動画のファイルとその音声だけで、一緒にアップロードした字幕のファイルと音声解説の音声は含まれませんでした。ストリーミング版は再生できますが、CCとADのボタンでオンにするものがありません。
WCAGは字幕の見た目についてほとんど述べておらず、変換で何が残るかは扱っていません。WCAGの1.2.2が求めるのは字幕があることだけで、ストリーミング版はこれも満たさなくなっています。それは字幕のない動画と、確認されていない自動字幕で説明しています。これらの要件はEN 301 549にあり、その表A.1が、EUのWebアクセシビリティ指令に対応する要件として、Webページに適用しています。
- 7.1.3「字幕の保持」:サイトが音声付きの動画を送信、変換、録画する場合、字幕のデータを保ち、字幕を引き続き同期して表示できるようにする。このサイトはアップロードを変換するので、その字幕を保つ必要があります。
- 7.2.3「音声解説の保持」:音声解説について同じことを求めます。
- 7.1.4「字幕の特性」:サイトが字幕を表示する場合、利用者が、色、書体、大きさ、背景、縁取りなど、字幕の見た目を自分の必要に合わせられる。映像に焼き込んだ字幕は変えられないため対象外です。
- 7.1.5「音声の字幕」:サイトが音声付きの動画を表示する場合、字幕のテキストをソフトウェアで読み取れない場合を除き、字幕を読み上げるモードを持つ。ドイツのBITVの試験は、話し声がサイトの主な言語ではなく、その言語の字幕があり、その言語の音声の版がない場合に適用しています。全盲の視聴者が字幕を音声で必要とするのは、その場合です。淹れ方の動画のナレーターは字幕と同じ言語で話すため、字幕を読み上げてもナレーションを繰り返すだけで、BITVはこの動画にはこの項目を適用しません。ただし、項目を文字どおりに読む監査人は、それでも求めることがあります。
ストリーミングへの変換は7.1.3と7.2.3を満たしていません。プレーヤーは、字幕の背景や自分の字幕のスタイルが必要なすべての利用者について、7.1.4に届いていません。設定がなく、システムの字幕の設定も届かないからです。ブラウザーの拡大表示や配色も数えるBITVの試験では、拡大表示でこの字幕が大きくなり、コントラスト テーマで色が変わるため、満たしていると判定されることもあります。それでも、背景を付けるものはありません。
誰にでも同じ小さな白い文字が出て、誰にでもストリーミング版が届きますが、多くの視聴者は字幕をオンにしないため、店は気づきません。
10グループ中5グループに影響
- 全盲 (影響あり)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響あり)
- 難聴 (影響あり)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 届く範囲・力 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 視覚が限られる 明るいキッチンの台の上の、細い13ピクセルの白い文字は見分けにくいものです。システムの設定で選んだ黒地に黄色の大きな字幕は、自分で字幕を描くプレーヤーには届かず、プレーヤーも代わりの設定を用意していません。
- 聴覚を使わない 字幕はレシピを知る手段です。ストリーミング版では字幕が消え、出る場合も、明るい映像の上で読みやすくする設定がプレーヤーにありません。
- 聴覚が限られる 音声の一部が聞こえる人は、聞き取れない部分を字幕で補います。ストリーミング版には字幕がなく、プレーヤーの小さく細い字幕は、ページ全体を拡大表示しない限り大きくできません。
- 視覚を使わない ストリーミング版では音声解説の音声が失われ、映像が伝えることが届きません。
- 言語・認知・学習の能力が限られる 読むのが遅い人やディスレクシアのある人には、字幕がより素直な書体で、より大きく、塗りつぶしの背景の上に出ると読みやすくなります。
これを扱うWCAGのルールはないため、axeなどWCAGの自動チェックは見ません。動画に字幕トラックのあるページは、再生するストリームに字幕がなくても通ります。EaseWebの診断はすべての動画を確認項目として挙げ、独自の操作部品を持つプレーヤーについては、利用者が字幕の大きさ、色、背景を変えられるかを人に確認するよう求めます。ストリームを元のファイルと比べることも、ストリームのマニフェストを開くことも、字幕の設定を試すこともしません。AIのコードアシスタントに「字幕をブランドに合わせて」と頼むと、書体、大きさ、色を固定で書きやすく、まさにこの状態になります。
試してみる
淹れ方の動画を再生してください。字幕が読めますか?大きくできますか?
「問題1」は、字幕を細い白の1つのスタイルで描き、設定のないショップのプレーヤーです。「問題2」は、字幕と音声解説の音声を失ったストリーミング版です。修正を適用すると、両方が戻り、システムの字幕のスタイルでブラウザーが描く字幕か、プレーヤー自身の設定が出ます。
問題あり 修正できますか?
ハウスブレンドの淹れ方
ストリームの中身: 映像、音声、音声解説の音声、字幕
字幕を描くもの: プレーヤー(1つのスタイル。システムの字幕の設定は届かない)
修正方法
変換でも字幕と音声解説を残し、利用者が字幕の見た目を変えられるようにします。
- 1変換後のどの動画も、すべての言語の字幕と音声解説を保つ。
- 2字幕の大きさ、色、背景を、プレーヤーかシステムで変えられる。
- 3別の言語の話し声を訳した字幕は、音声でも聞ける。
1つのスタイルで描かれる字幕
// The player hides the browser's captions and draws each cue itself.const track = video.textTracks[0];track.mode = 'hidden';track.addEventListener('cuechange', () => { captionBox.textContent = track.activeCues[0]?.text ?? '';});変換でトラックを保ち、字幕をブラウザーに描かせる
// The browser draws the captions, so the viewer's system caption style applies.const track = video.textTracks[0];track.mode = 'showing';字幕はテキストなので、見た目を変えられるはずですが、プレーヤーは設定を用意せず、利用者のシステムの字幕の設定はプレーヤー自身の箱の中の文字には届きません。背景のない細い白い文字は、明るい映像の上では読みにくくなります。ブラウザーの拡大表示でページごと大きくなり、強制配色(コントラスト テーマ)では文字の色も変わりますが、背景を付けるものはありません。
エンコードの処理が、字幕を字幕のレンディションとして、音声解説の音声を映像を説明するものと示した2つ目の音声のレンディションとして引き継ぐため、このストリームのどのプレーヤーも、両方を同期して出せます。自分の箱を持たないプレーヤーは字幕をブラウザーに任せ、Safariや、ChromeやEdgeなどChromiumを使うブラウザーでは、利用者のシステムの字幕のスタイルで描かれます。Firefoxは、少なくともmacOSではシステムの字幕の設定を読まないため、その利用者にはページのスタイルが出ます。また、設定があると知らない人は、プレーヤーからそれを見つけられません。
どちらも変換でトラックを保ち、字幕の見た目を変えられるようにします。プレーヤー自身の設定を使ってください。どのブラウザーでも働き、利用者が探す場所にあり、読みやすいスタイルから始まります。ブラウザーに描かせる方法では、少なくともmacOSのFirefoxの利用者には1つのスタイルしか届かず、ほかの人にも、OSの奥にある設定を知っていることを求めます。ブラウザーに描かせるほうが変更は小さく、ブラウザー標準の操作部品を使うプレーヤーなら妥当な選択です。
アップロード後に動画が通る道を、すべて確認します。
- この例のようなストリーミング用のエンコーダー:処理の設定で、字幕のファイルを字幕のレンディションに、音声解説の音声を音声のレンディションに、すべての言語について割り当て、出力されたマニフェストにそれが載っているか確認する。DASHのマニフェストでは、字幕と説明の役割を付けた、テキストと音声のアダプテーションセットになる。
- YouTubeやVimeoなどの動画サービス:そこで動画に字幕のファイルをアップロードし、埋め込みで選べるか確認する。新しく編集した版をアップロードし直すと、字幕を付け直さない限り、前の字幕は失われる。
- SNS用のファイルや短く編集した版:新しい動画なので、その長さに合わせた字幕が別に要る。映像に焼き込んだ字幕は、別の字幕ファイルが届かない場所にも、ファイルと一緒に届く。
- ウェビナーやサポートの通話など、サイトが録画するもの:ライブの字幕を録画と一緒に保存し、録画とともに出す。
字幕の見た目が伝えることも保ちます。EN 301 549は、位置、色、スタイルが意味を持つことがあると注記しています。画面上の文字を隠さないよう上に移した字幕や、話し手ごとの色などです。言葉は残しても位置を落とす変換は直し、利用者の設定は、大きさと色を変えても、避けていたものの上へ字幕を戻さないようにします。
全画面表示:プレーヤーが字幕を自分で描く場合は、video要素ではなく、プレーヤーのコンテナーを requestFullscreen() で全画面にします。そうしないと字幕の箱が取り残されます。ブラウザーが描く字幕は、動画に自然についていきます。
別の言語の動画:スペイン語のインタビューに英語の字幕を付けた動画のように、話し声が字幕と違う言語の場合、スペイン語が分からない全盲の視聴者には、字幕を音声で届ける必要があります。よりよい方法は、EN 301 549が別の音声トラックとして届けることを示している、字幕を録音した音声トラックで、音声解説の音声と同じように選べるようにします。プレーヤーに、初期状態ではオフの「字幕を読み上げる」選択肢を用意し、音声合成で字幕を1つずつ読み上げることもできます。SpeechSynthesisUtterance の lang をトラックから設定し、次の字幕が始まったら前の読み上げを止めて遅れないようにし、読み上げる間は元の音声を小さくします。音声合成は、端末にその言語の音声があるかに左右されます。字幕と同じ言語で話す動画には、どちらも用意する必要はありません。ナレーションに同じ言葉を重ねるだけです。
映像に焼き込んだ字幕は、何も変えることも読むこともできないため、7.1.4と7.1.5の対象外です。それは焼き込みだけに頼らない理由であって、これらの要件を避ける方法ではありません。CCとADのボタンをどこに置くかは、字幕を設定メニューの奥に隠す動画プレーヤーで説明しています。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
修正の確認
マウスを使わない4つの確認
確認方法: 字幕の設定、画面を見ずに視聴、キーボード
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。エンコーダー、プレーヤー、動画サービスを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。設定が役立つのは、字幕が正しくそろっているときだけです。文字の縁取りや別の書体など、この3つ以外の設定が必要な人もいます。動画を見る人と一緒に、動画が実際に再生されるプレーヤーやサービスで、一連の流れを確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- etsi.org: en_301549v030201p.pdf(新しいタブで開きます)
- bitvtest.de: bitv-20-web-7-1-3-erhaltung-von-untertiteln(新しいタブで開きます)
- bitvtest.de: bitv-20-web-7-1-4-untertitel-anpassungen(新しいタブで開きます)
- bitvtest.de: bitv-20-web-7-1-5-gesprochene-untertitel(新しいタブで開きます)
- w3.org: player(新しいタブで開きます)
- developer.apple.com: hls-authoring-specification-for-apple-devices(新しいタブで開きます)
- developer.mozilla.org: cuechange_event(新しいタブで開きます)
- developer.mozilla.org: SpeechSynthesis(新しいタブで開きます)
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。