本文へ移動
easeweb
ご相談
トピックを検索

スタイルを変えられない字幕、変換で消える字幕

ショップの動画プレーヤーが字幕を小さな白い文字で描き、見た目を変える設定がありません。さらにストリーミング用の変換で、字幕と音声解説の音声が失われます。

EN 301 549
7.1.3項7.1.4項7.1.5項7.2.3項
問題あり font: 13px/1.3 "Brand Sans", sans-serif;
アクセシビリティの問題を示した図: 弱視:字幕をもっと大きくできる?
01

問題

大きな字幕やコントラストの高い字幕が必要な人に、見た目を変える設定がありません。そして、ストリーミング版の動画には字幕も音声解説もまったくありません。

02

試してみる

淹れ方の動画を再生してください。字幕が読めますか?大きくできますか?

「問題1」は、字幕を細い白の1つのスタイルで描き、設定のないショップのプレーヤーです。「問題2」は、字幕と音声解説の音声を失ったストリーミング版です。修正を適用すると、両方が戻り、システムの字幕のスタイルでブラウザーが描く字幕か、プレーヤー自身の設定が出ます。

問題あり 修正できますか?

ハウスブレンドの淹れ方

0:00 / 0:00

ストリームの中身: 映像、音声、音声解説の音声、字幕

字幕を描くもの: プレーヤー(1つのスタイル。システムの字幕の設定は届かない)

細い1つのスタイルで、設定がない

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

変換でも字幕と音声解説を残し、利用者が字幕の見た目を変えられるようにします。

  1. 1変換後のどの動画も、すべての言語の字幕と音声解説を保つ。
  2. 2字幕の大きさ、色、背景を、プレーヤーかシステムで変えられる。
  3. 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';

AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。

04

修正の確認

マウスを使わない4つの確認

確認方法: 字幕の設定、画面を見ずに視聴、キーボード

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。エンコーダー、プレーヤー、動画サービスを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。設定が役立つのは、字幕が正しくそろっているときだけです。文字の縁取りや別の書体など、この3つ以外の設定が必要な人もいます。動画を見る人と一緒に、動画が実際に再生されるプレーヤーやサービスで、一連の流れを確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方