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

書き起こしのないポッドキャストと無音の動画

ポッドキャストのクリップは助言を声だけで伝え、無音の使い方動画は手順を映像だけで見せ、どちらのそばにもテキストがありません。

WCAG 2.2
SC 1.2.1A
必須とする規格
Section 508 · EN 301 549(EU) · JIS X 8341-3
問題あり <audio controls src="care-tips.mp3">
アクセシビリティの問題を示した図: ろう:コツは何?
01

問題

音が聞こえない人はポッドキャストの内容をすべて逃し、目が見えない人は無音の動画が見せる内容をすべて逃します。

02

試してみる

音と映像をオフにして、クリップか動画を再生してください。何が分かりますか?

スイッチは、クリップが聞こえない人や、動画が見えない人の代わりです。プレーヤーは再生できますが、何も伝わりません。「問題1」はポッドキャストのクリップ、「問題2」は無音の油ならし動画です。修正を適用すると、プレーヤーの下に書き起こしと説明が出るか、別のページへのリンクが出ます。

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

鋳鉄のフライパン 26cm

お手入れのコツ(ポッドキャストより)

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

03

修正方法

音声クリップには書き起こしを、無音の動画には説明を付けます。プレーヤーの下のページ内に置くか、プレーヤーのすぐそばからリンクした別のページに置きます。

  1. 1話された言葉をすべて書き出し、話し手の名前を示し、意味のある音は角かっこで書く。
  2. 2無音の動画が見せる手順を、画面の言葉や数値も含めてすべて説明する。
  3. 3テキストはプレーヤーのすぐ下に置くか、そこへのリンクをプレーヤーのすぐそばに置く。
修正前

書き起こしのない音声クリップ

<h2>お手入れのコツ(ポッドキャストより)</h2><audio controls preload="metadata" src="care-tips.mp3"></audio>
修正後

プレーヤーの下、ページ内のテキスト

<h2>お手入れのコツ(ポッドキャストより)</h2><audio controls preload="metadata" src="care-tips.mp3"></audio><h3>書き起こし</h3><p><b>アレックス:</b>マヤさん、新しいフライパンで、いちばん多い間違いは何ですか?</p><p><b>マヤ:</b>食洗機です。食洗機には絶対に入れないでください。  油の膜がはがれて、さびてしまいます。</p><p><b>アレックス:</b>では、どう洗えばいいですか?</p><p><b>マヤ:</b>お湯で手洗いします。すぐにコンロで火にかけて乾かし、  温かいうちに、小さじ半分の油をすり込みます。</p> <h2>油ならしの手順</h2><video controls preload="metadata"  src="seasoning.webm" poster="seasoning.webp"></video><h3>動画の内容</h3><p>この動画に音はありません。</p><ol>  <li>フライパンに油を数滴たらし、布ですり込みます。</li>  <li>ペーパータオルで、ほとんど乾いて見えるまで油を拭き取ります。</li>  <li>フライパンを逆さにしてオーブンに入れ、下に天板を置いて、230°Cで60分焼きます。</li>  <li>オーブンの電源を切り、中でフライパンを冷まします。    黒くつやのある状態で出てきます。</li></ol>

AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得

04

修正の確認

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

確認方法: 音を消して視聴、画面を見ずに視聴、スクリーンリーダー

3件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。録音、動画、テキストを差し替えた際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。対象は、音だけ、または映像だけの収録済みメディアです。音と映像の両方がある動画には、話された内容の字幕(1.2.2)と、映像だけで伝わる内容の音声解説(1.2.3と1.2.5)が必要です。それぞれ字幕のない動画と、確認されていない自動字幕と音声解説がなく、画面の情報が伝わらない動画で扱っています。その全文のテキスト代替はAAAの基準1.2.8です。ラジオ配信のようなライブの音声はAAAの基準1.2.9です。勝手に始まる音は止められない自動再生の音声で扱っています。実際に聞いたり見たりする人と、メディアが実際に再生されるプレーヤーやプラットフォームで、操作全体を確認してください。

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

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

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

再テストの進め方