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

話し声の下で大きな音楽が流れるポッドキャスト

コーヒーのポッドキャストが保存方法の話の間ずっとテーマ曲を流し、声との差が約6 dBしかないうえ、音楽のない版も用意されていない

WCAG 2.2
SC 1.4.7AAA
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり
アクセシビリティの問題を示した図: 難聴:音楽にまぎれて、何と言った?
01

問題

難聴の人は、後ろで流れる音楽にまぎれて、保存方法の説明を聞き取れない

02

試してみる

スイッチをオンにして、書き起こしを読まずに再生してみましょう。豆を入れてはいけない場所はどこですか?

スイッチをオンにすると高い音がこもります。よくあるタイプの難聴の聞こえ方を大まかにまねたもので、特定の人の聞こえ方ではありません。ページの下の目盛りは、音楽が声より何dB下にあるかの測定値です。

修正を適用すると、約23 dB下げてミキシングした音楽や、再生位置を保ったまま音楽をオフにする「背景の音楽」ボタンを試せます。

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

問題少ししか下げずに、エピソード全体に流した音楽

スモールバッチ 第12回:豆の保存方法

書き起こし

[エピソード全体にテーマ曲が流れる]

サム:スモールバッチへようこそ。今週は、コーヒー豆の保存方法です。

サム:豆は密閉できる缶に入れて、涼しくて暗い場所に置きます。買うのは、2週間で使い切れる量だけにしましょう。

サム:そして、冷蔵庫には入れないでください。湿気や、周りのにおいを吸ってしまいます。

音楽が声より何dB下にあるか(測定値)

20 dB下 声 音楽 −6 dB

20 dB未満で、オフにもできない

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

03

修正方法

音楽は声より20 dB小さくするか、オフにできるようにする

修正前
問題少ししか下げずに、エピソード全体に流した音楽
<h2>スモールバッチ 第12回:豆の保存方法</h2><audio controls preload="metadata" src="small-batch-12.mp3"></audio><details>  <summary>書き起こし</summary>  <p>[エピソード全体にテーマ曲が流れる]</p>  <p><b>サム:</b>スモールバッチへようこそ。今週は、コーヒー豆の保存方法です。</p>  <p><b>サム:</b>豆は密閉できる缶に入れて、涼しくて暗い場所に置きます。    買うのは、2週間で使い切れる量だけにしましょう。</p>  <p><b>サム:</b>そして、冷蔵庫には入れないでください。    湿気や、周りのにおいを吸ってしまいます。</p></details>
問題点3点
  • テーマ曲が、話の切れ目だけでなく、話している間もずっと流れています。
  • 音量をそろえた後で8 dB下げただけなので、測ると声との差は約6 dBしかありません。
  • 音楽のない版も、ページで音楽をオフにする操作もありません。
修正後

音楽を声より20 dB以上小さくミキシング

<h2>スモールバッチ 第12回:豆の保存方法</h2><audio controls preload="metadata" src="small-batch-12.mp3"></audio><details>  <summary>書き起こし</summary>  <p>[エピソード全体にテーマ曲が流れる]</p>  <p><b>サム:</b>スモールバッチへようこそ。今週は、コーヒー豆の保存方法です。</p>  <p><b>サム:</b>豆は密閉できる缶に入れて、涼しくて暗い場所に置きます。    買うのは、2週間で使い切れる量だけにしましょう。</p>  <p><b>サム:</b>そして、冷蔵庫には入れないでください。    湿気や、周りのにおいを吸ってしまいます。</p></details>
修正の手順3ステップ
  1. ミキシングで音楽をさらに下げます。ここでは、音量をそろえた後で25 dB下げています。
  2. 仕上がりで、声の部分と音楽だけの部分を比べます。エピソードの何か所かで測ります。ここでは約23 dBで、設定値より約2 dB小さいものの、基準が求める20 dBを超えています。
  3. 測った差をコマンドのそばに書いておき、次の回も同じようにミキシングして確かめられるようにします。

これで修正前の例は直り、1.4.7を満たします。音楽は残っていますが、声の約1.5分の1ではなく、約5分の1の大きさに聞こえます。サイトでもどのポッドキャストアプリでも、誰もが同じはっきりしたファイルを聞けます。音楽をまったく入れない方法でも満たします。

04

修正の確認

4項目、マウス不要

確認方法: 音量差の測定、キーボード、スクリーンリーダー

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を、測定に使ったツールとそのバージョンと一緒に記録してください。音楽もミックスも回ごとに変わるため、新しい回ごとに確認し直してください。

スクリーンリーダーでの aria-pressedの読まれ方

制限

これは出発点となる実装例であり、すべてのアプリケーションでの適合を保証するものではありません。測った差が20 dBあれば基準は満たしますが、すべての人が話し声を聞き取れる保証ではありません。いちばん確かな確認は、実際に聞く人に聞いてもらうことです。勝手に流れ始める音は止められない自動再生の音声で、書き起こしは書き起こしのないポッドキャストと無音の動画で扱っています。エピソードが実際に再生されるプレーヤーやポッドキャストアプリで、一連の流れ全体をテストしてください。

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

EaseWebのサービス

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

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

サービス内容を見る