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

リアルタイムの文字表示がないラジオのライブ配信

地域のラジオ局がサイトで朝のニュースをライブ配信しているのに、読める文字が何もないため、通行止めや番組中に入った変更が、聞こえる人にしか伝わらない

WCAG 2.2
SC 1.2.9AAA
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり <audio controls src="https://stream.riverside.example/live.mp3">
アクセシビリティの問題を示した図: ろう:橋について何と言った?
01

問題

配信を聞けない人には、通行止め、バスの迂回、番組中に入った変更が伝わらない

02

試してみる

音を消してライブ配信を再生してみましょう。ファーマーズマーケットは何曜日に移りますか?

スイッチを入れると、聞こえない人と同じ状態になります。配信は再生できますが、何も伝わりません。ここではライブ配信の代わりに録音を使っているため、プレーヤーに長さが表示されます。

修正を適用すると、司会者が話すのに合わせて字幕担当者が入力するリアルタイムの文字や、準備した原稿を読めます。どちらも最後まで聞いてみてください。

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

問題読める文字がないライブのプレーヤー

ライブで聴く

朝のニュース、平日8:00~8:30。

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

03

修正方法

ライブ配信の間、放送の内容を文字でも示す

修正前
問題読める文字がないライブのプレーヤー
<h2>ライブで聴く</h2><p>朝のニュース、平日8:00~8:30。</p><audio controls preload="none"  src="https://stream.riverside.example/live.mp3"></audio>
問題点3点
  • ニュースは、ライブの音声でしか伝えられていません。
  • 聞こえない人に見えるのは、再生ボタンと進んでいく経過時間だけです。
  • 橋の通行止め、バスの迂回、マーケットの開催日の変更は届きません。
修正後

プレーヤーのそばに字幕担当者のリアルタイムの文字

<h2>ライブで聴く</h2><p>朝のニュース、平日8:00~8:30。  字幕担当者が入力するリアルタイムの文字を、プレーヤーの下に表示します。</p><audio controls preload="none"  src="https://stream.riverside.example/live.mp3"></audio><iframe title="朝のニュースのリアルタイムの文字"  src="https://captions.example.com/live/riverside-radio"></iframe>
修正の手順3ステップ
  1. 放送にリアルタイムの字幕担当者を手配します。配信を聞き、話された内容を数秒遅れで入力し、意味のある音は[]で書き添えます。
  2. 字幕サービスは放送ごとに、入力に合わせて文字が流れるページを用意します。そのページをプレーヤーのすぐ後の枠に入れ、スクリーンリーダーで何の枠かが分かるタイトルを付けます。
  3. 字幕担当者が入力するリアルタイムの文字がプレーヤーの下に出ることを、プレーヤーのそばに書いておきます。

これで修正前の例は直り、1.2.9を満たします(達成方法G157)。司会者が話したことは、番組中に入った変更も含めて、情報が古くならないうちに文字でページに届きます。文字は声から数秒遅れて出ますが、G157が求めているのは30秒未満で届くことだけです。

04

修正の確認

4項目、マウス不要

確認方法: 音を消して視聴、スクリーンリーダー

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。リアルタイムの文字がある番組ごとに、また字幕サービスを替えるたびに確認し直してください。

制限

これは出発点となる実装例であり、すべてのアプリケーションでの適合を保証するものではありません。リアルタイムの文字が正しいかはライブでしか確かめられず、このガイドが代わりに確かめることはできません。ウェビナーのようなライブ映像に必要なライブ字幕(1.2.4)は、字幕がない、または自動字幕だけのライブ配信で扱っています。番組の録音のような収録済みの音声に必要な書き起こし(1.2.1)は、書き起こしのないポッドキャストと無音の動画で扱っています。勝手に流れ始める音は、止められない自動再生の音声で扱っています。実際に聞いて読む人と、その人が使う端末で、一連の流れ全体をテストしてください。

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

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る