audio-video について
audio-video は、音声・動画を実装または評価するチーム向けのアクセシビリティスキルです。メディアの種類に応じた字幕、文字起こし、音声解説、プレーヤー操作の要件を扱います。
主な機能
- 01メディアの種類ごとに代替情報を判断
- 02字幕と人による確認を案内
- 03文字起こしと音声解説を計画
- 04プレーヤー操作とキーボード利用を確認
- 05埋め込みプレーヤーと背景動画を評価
活用シーン
- 01録画動画の字幕と解説を計画
- 02音声番組にアクセシブルな文字起こしを用意
- 03プレーヤー操作と外部埋め込みを評価
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ mgifford/ accessibility-skills --skill audio-videoインストール後、Claude Code で/audio-videoを入力して読み込まれたか確認します。
同梱ファイルSYNC.md
詳細
音声・動画のアクセシビリティスキル
正式な参照元:
mgifford/ACCESSIBILITY.mdのexamples/AUDIO_VIDEO_ACCESSIBILITY_BEST_PRACTICES.mdこのスキルはそのファイルに基づいています。判断に迷った場合は、例を正式な基準としてください。
音声または動画コンテンツを実装またはレビューする際は、以下のルールを適用してください。 プロジェクトに音声または動画が含まれている場合にのみ、このスキルを読み込んでください。
基本方針
アクセシブルなメディアは、音声、効果音、視覚情報、再生コントロールに同等にアクセスできる手段を提供します。必要な代替手段は、メディアが音声のみ、動画のみ、音声と動画の同期、録画済み、ライブのいずれであるかによって異なります。
制作を始める前に、字幕、音声解説、文字起こし、手話によるアクセスを計画してください。適切な資格を持つ人によるレビューを実施してください。レビューされていない自動生成の出力は、アクセシブルな最終成果物ではありません。代替手段はメディアの近くに分かりやすく配置し、メディアを埋め込んだり、翻訳したり、アーカイブしたり、別のプラットフォームに移したりする際にも維持してください。
重大度の尺度(このスキル)
| レベル | 意味 |
|---|---|
| Critical(重大) | 障害のある利用者のグループがメディアコンテンツにまったくアクセスできない |
| Serious(深刻) | アクセスが大幅に損なわれており、回避策を期待するのが妥当ではない |
| Moderate(中程度) | アクセスが損なわれているが、一部は利用できる |
| Minor(軽微) | ベストプラクティスとのずれ。アクセスへの影響はわずか |
メディアに必要なもの(WCAG レベルの一覧)
時間依存メディアの達成基準は累積的です。レベル AA には、該当するレベル A の要件が含まれます。
| メディアの種類 | レベル A | レベル AA | レベル AAA/追加の実践 |
|---|---|---|---|
| 録画済みの音声のみ | 文字起こし(時間依存メディアの代替) | — | 強化された提示方法 |
| 録画済みの動画のみ | 代替手段または同等の音声トラック | — | メディアの代替手段(1.2.8) |
| 録画済みの同期した音声+動画 | 字幕、音声解説またはメディア全体の代替手段 | 音声解説 | 手話、拡張音声解説、メディアの代替手段 |
| ライブの同期した音声+動画 | 字幕の達成基準なし | ライブ字幕 | 追加の言語/音声解説サービス |
| ライブの音声のみ | 達成基準なし | 達成基準なし | 同等のライブの代替手段(1.2.9) |
**意味のある音声・視覚情報がない場合:**意味のある音声がない動画(無音、装飾的な音楽)には字幕は必要ありません。音声に会話がなくても、意味のある音が情報を伝える場合は文字起こしが必要なことがあります。装飾的な動画は情報を伝えませんが、動きが続く場合は一時停止コントロールが必要になることがあります。重要な視覚情報がすべて音声で説明されている場合、追加の音声解説は必要ありません。すべての動画に同じ要件があると決めつけず、ファイルごとにこれらの判断を記録してください。また、字幕、音声解説、文字起こしを避けるためだけに、主要なメディアを「テキストの代替」として扱わないでください。
重大:音声付きメディアを自動再生しない
<video src="intro.mp4" autoplay></video>
<video src="background.mp4" autoplay muted loop playsinline
controls aria-label="Background animation — muted by default"></video>
@media (prefers-reduced-motion: reduce) {
video[autoplay] { display: none; }
}
WCAG 1.4.2 は、すべての自動再生を文字どおり禁止しているわけではありません。3 秒を超えて自動再生される音声を一時停止または停止する手段、あるいは独立した音量調節を求めています。**このプロジェクトでは、スクリーンリーダーの音声を妨げないよう、音声付きメディアの自動再生を一切禁止する、より厳しいルールを適用します。**何らかの理由で音声が自動再生される場合、停止/一時停止/ミュートのコントロールは、ページ上でキーボードフォーカスが最初に移動する位置に配置する必要があります。
**ミュートした自動再生でも、すべての問題が解決するわけではありません。**ミュート中は意味のある音声を利用できません。動くコンテンツは注意をそらしたり、身体的な症状を引き起こしたりすることがあります。他のコンテンツと並行して 5 秒以上動き続ける場合、一時停止/停止/非表示の操作が必要になることがあります(WCAG 2.2.2)。また、動きを減らす設定を求めている利用者には、字幕トラックの有無にかかわらず、装飾的な動きを自動的に表示しないでください。
重要:音声付きの録画済み動画のキャプション
<video controls preload="metadata" playsinline poster="training-poster.jpg">
<source src="training.mp4" type="video/mp4">
<track kind="captions" src="training.en.vtt" srclang="en" label="English captions" default>
<track kind="subtitles" src="training.fr.vtt" srclang="fr" label="Sous-titres français">
<p>Your browser cannot play this video. <a href="training.mp4">Download the video</a>.</p>
</video>
会話と意味のある非音声音声の両方を含むトラックには kind="captions" を使用し、翻訳された会話のみを含むトラックには kind="subtitles" を使用してください。会話のみの字幕は、元の言語のキャプションの代わりにはなりません。各種類につき default トラックは1つだけ使用してください。WebVTT は、正しい text/vtt メディアタイプを指定して UTF-8 で配信してください。
キャプションに含める内容: 発話・ナレーションのすべて;ほかに判別する方法がない場合の話者の識別;意味のある効果音・音楽の合図([ドアが閉まる音]);意味を保った正しい句読点・大文字表記;同期されたタイミング;読みやすいキューの表示時間・改行;重要な視覚情報を避ける配置。言葉を削除したり、専門用語を簡略化したり、意味が変わるような検閲をしたりしないでください。
自動生成されたキャプションは、人による確認なしに公開しないでください — 資格のある担当者が音声に照らしてファイル全体を確認し、置き換え・脱落・誤って追加された単語、名前・専門用語・数字、否定の欠落、話者の切り替わり、句読点、同期を修正する必要があります。未確認の自動生成キャプションは、よくても重大な問題です。
オープンキャプションとクローズドキャプション: プラットフォームが安定してサポートしている場合は、オン・オフを切り替えたり、カスタマイズしたりできるクローズドキャプションを優先してください。動画に恒久的に埋め込まれるオープンキャプションは、認められている WCAG の手法であり、クローズドキャプションが利用できない場合は許容されます。一律に拒否せず、ユーザーがオフにしたり、サイズを個別に変更したりできない点を明記してください。
重要:音声のみのコンテンツのトランスクリプト
<figure>
<figcaption>Episode 12: Testing with screen magnification, 34 minutes</figcaption>
<audio controls preload="metadata" aria-label="Episode 12: Testing with screen magnification">
<source src="episode-12.mp3" type="audio/mpeg">
<p>Your browser cannot play this audio. <a href="episode-12.mp3">Download the episode</a>.</p>
</audio>
</figure>
<p><a href="episode-12-transcript.html">Read the Episode 12 transcript</a>.</p>
トランスクリプトの内容(メディアと同じ順序):タイトル・メタデータ;話者名;すべての会話とナレーション;意味のある音・音楽の情報;重要な画面上のテキスト;詳細なトランスクリプトの場合は、視覚的な動作・表情・実演・図表・場面の切り替わり;メディア内のインタラクションに相当する手順・リンク。
プレーヤーの直前または直後に、明確な名前のリンクを配置し、アクセス可能な HTML として公開してください — ダウンロードやアクセスできない PDF・画像だけにしてはならず、aria-label、ツールチップ、視覚的に隠された要素の中だけに置くことも決してしないでください。安定したアンカー URL(#transcript-ep12)を使うと、直接共有でき、検索エンジンにも見つけてもらいやすくなります。画面上のスペースを確保するために <details> 内に折りたたむのは問題ありませんが、見出しとアンカーは DOM 内に残してください。トランスクリプトの修正内容を、キャプションやメディアの改訂と同期させてください。
インタラクティブなトランスクリプト(再生中の箇所の強調表示、タイムスタンプによるシーク)は、完全な線形トランスクリプトの代わりではなく、機能強化です。シーク操作にはボタンを使用し、それぞれに理解しやすい時刻・トピックを示してください。再生の進行に合わせてキーボードフォーカスを移動させず、一時停止できない自動スクロールを強制せず、動きを抑える設定を尊重し、JavaScript が利用できない場合も読み取りやコピーができるようにしてください。
重大:録画済み動画の音声解説
レベル A では、WCAG 1.2.3 により、音声解説または完全なメディアの代替のどちらかが認められています。レベル AA では、WCAG 1.2.5 により、録画済み動画コンテンツに音声解説が必須です。レベル A の文字起こしを選択しても、この AA 要件がなくなるわけではありません。主音声ですでに重要な視覚情報がすべて伝わっている場合は、追加の解説は必要ありません。
<track kind="descriptions" src="training.descriptions.en.vtt" srclang="en" label="English descriptions">
この <track kind="descriptions"> の手法は、現在の WCAG 技法では参考情報であり、ブラウザー/プレーヤー/支援技術(AT)のサポート状況にも左右されます。テストせずにこれに頼らないでください。プレーヤーが解説を音声で提示できない場合は、サポートされている選択可能なトラックまたは解説付きのバージョンを用意してください。
制作時に解説を計画してください。統合された解説(話者が自然に名前を述べる、画面上のテキストを読み上げる、図表を説明する)は、最も明確な方法であることが多く、別途録音する解説の量を減らせる場合があります。解説は客観的かつ簡潔にし、重要な台詞のタイミングに合わせて、適切な専門知識を持つ人が作成し、視覚障害のあるユーザーや弱視のユーザーとともにレビューしてください。拡張音声解説(1.2.7。より多くの時間を確保するために動画を一時停止するもの)はレベル AAAであり、主音声の無音区間だけでは不十分な場合に限り必要です。
重大:アクセシブルなメディアプレーヤー
特定のプレーヤーライブラリを、あらゆる状況でアクセシブルだと決めつけないでください。以下の要件に照らして、実際に使用するバージョンと設定を評価・テストし、依存関係のバージョンを固定して更新内容を確認してください。
必要な機能が利用できる場合は、まずネイティブの <audio controls>/<video controls> を使用してください。ネイティブコントロールは独自コードを減らせますが、ブラウザーによって動作が異なるため、十分だと決めつけずにテストしてください。見た目を整えたカスタムボタンの列は、完全な動作、状態、タイミング、キャプション、解説、シーク、全画面表示との操作を実装してテストしない限り、アクセシブルなプレーヤーではありません。
コントロールと状態: 再生/一時停止、停止、経過時間/再生時間、シーク、音量/ミュート、キャプション/言語の選択、音声解説の選択、再生速度、チャプター、全画面表示、ピクチャーインピクチャー、文字起こしの表示(該当する場合)。各コントロールにはアクセシブルな名前/ロール/状態/値が必要です。再生中に再生ボタンの名前を「一時停止」に変えることができます。キャプションの切り替えには、実際に二状態である場合、aria-pressed を使用できます。タイムラインには名前/最小値/最大値/現在値と、役立つテキスト値(経過時間)が必要です。すべての timeupdate イベントをライブリージョンでアナウンスしないでください。 音声入力でも認識できるよう、表示ラベルをアクセシブルな名前に含めてください。選択中のトラックやミュート状態を色だけで伝えないでください。
<div class="media-controls" role="group" aria-label="Video controls">
<button id="play-pause" aria-label="Play" type="button">…</button>
<label for="seek" class="visually-hidden">Seek</label>
<input type="range" id="seek" min="0" max="100" value="0" aria-label="Seek"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0 seconds">
<button id="captions-toggle" aria-label="Enable captions" aria-pressed="false" type="button">CC</button>
</div>
キーボード: すべてのコントロールに論理的な Tab 順序で移動できること。ボタンは Enter/Space でネイティブに操作できること。矢印キーで範囲入力や、仕様が文書化された複合ウィジェットを操作できること。プレーヤー内や全画面表示でフォーカスが閉じ込められないこと。フォーカスが常に見え、自動で非表示になるコントロールに隠されないこと。全画面表示への切り替え時には、フォーカス位置が論理的に保たれること。コントロールまたはその子孫要素にフォーカスがある間、コントロールが消えないこと。単一文字のショートカットは WCAG 2.1.4(無効化/再割り当て/フォーカスがある場合のみ有効)を満たし、入力欄への入力中にキー操作を横取りしないこと。
視覚/タッチ: テキスト/アイコンがコントラスト要件を満たすこと。400%のズーム時にコントロールがリフローすること。タッチターゲットが WCAG 2.5.8 を満たすこと。強制カラーモードでもラベル/アイコンが理解できること。コントロールを表示する唯一の方法としてポインターのホバーを必要としないこと。自動で非表示になるコントロールは、ホバー/フォーカス時のコンテンツ(1.4.13)を満たし、フォーカス中のコントロールを隠さないこと。
キャプション/解説コントロール: 再生を開始せずに簡単に見つけられること。現在の言語とオン/オフの状態をプログラムから判別できること。トラックを変更しても再生が予期せずリセットされないこと。約束されている場合は、設定が保持されること。
重大:埋め込みプレーヤーとサードパーティ製プレーヤー
埋め込みを通じて提供される利用体験については、引き続きコンテンツ所有者が責任を負います。
<iframe src="https://media.example.org/embed/accessibility-training"
title="Video: Accessibility testing training" allowfullscreen></iframe>
<p><a href="accessibility-training-transcript.html">Read the descriptive transcript</a>.</p>
確認事項:iframe には内容を特定できる簡潔なタイトルがあること。キーボードユーザーがプレーヤーに入り、操作し、離れられること。コントロールに適切な名前、状態、フォーカスインジケーターがあること。字幕が公開され、正確で、選択できること。音声解説を利用できること。自動再生、広告、同意を求めるプロンプト、全画面表示が引き続きアクセシブルであること。文字起こしと音声解説版へのリンクを iframe の外部で引き続き利用できること。プライバシーや Cookie のオーバーレイがメディアコントロールを妨げないこと。実際に設定したプレーヤーとその最新バージョンをテストせずに、ベンダーのアクセシビリティに関する主張を信用しないでください。
中程度:装飾的な背景動画
静止画像で同じデザインを表現できる場合は、背景動画を避けてください。使用する場合は、次の要件を満たす必要があります。
- 情報を伝えないこと(本当に装飾目的の場合に限り、
aria-hidden="true"を維持してください) - ミュートし、静止画のポスターまたは代替表示を用意すること
- ユーザーが動きを減らす設定を希望している場合、自動再生しないこと
- 常に利用可能な再生/一時停止コントロールを備えること
- 点滅に関する要件を満たすこと
<video id="background-video" muted loop playsinline preload="metadata"
poster="background-still.jpg" aria-hidden="true">
<source src="background-video.mp4" type="video/mp4">
</video>
<button type="button" id="background-video-toggle" aria-controls="background-video">
Play background video
</button>
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
reduceMotion.addEventListener('change', (event) => {
if (event.matches) { backgroundVideo.pause(); updateBackgroundVideoButton(); }
});
if (!reduceMotion.matches) backgroundVideo.play().then(updateBackgroundVideoButton);
CSS の animation-play-state では HTML の <video> を一時停止できません — メディア要素の API を通じて再生を制御してください。ユーザーが設定を変更したり、手動で一時停止したりした後に、動きを自動的に再開しないでください。動画が情報を伝える場合は、aria-hidden="true" を削除し、該当する代替手段をすべて提供してください — 装飾的なラベルを付けても、情報を伝えるコンテンツが装飾的になるわけではありません。
重大:ライブ字幕(WCAG 1.2.4 AA)
ライブ同期メディアには AA レベルで字幕が必要です — 一般的な「技術的に実現可能な場合」という例外は適用されません。 WCAG 1.2.4 の対象はライブ同期放送です。すべての個人的な双方向通話に字幕を付けるという一律の要件ではありませんが、主催者やコンテンツ提供者は、イベントと参加者に必要なアクセス手段を引き続き提供する必要があります。
イベント前に計画してください:字幕作成サービス(CART)を契約し、日程を調整します。字幕作成者に名前、用語、台本、スライド、進行表を共有します。実際のプレーヤー/プラットフォームで字幕表示をテストします。言語と話者の識別を確認します。字幕に障害が発生した場合の代替手段を用意します。チャット、投票、コントロールがキーボードやスクリーンリーダーで操作できるようにします。通訳者とリハーサルを行います。字幕の品質を全編を通して監視してください — 字幕バッジやベンダー設定は、参加者が利用可能な字幕を受け取れている証拠にはなりません。
後からアーカイブを公開する場合:ライブ字幕を修正します。音声解説を追加または修正します。文字起こしを公開します。アクセシブルでない一時的なチャットや投票の表示を削除します。録画を収録済みメディアとして再テストします。
中程度:WCAG 1.4.2 音声コントロール(自動再生とは別)
ユーザーが再生を開始した場合も適用されます:音声が自動的に 3 秒を超えて再生され続ける場合は、一時停止または停止する手段を用意するか、システム音量とは独立して音量を調整できるようにしてください。
<button type="button" id="mute-toggle" aria-label="Mute background audio" aria-pressed="false">…</button>
軽微:手話(WCAG 1.2.6 — レベル AAA)
AA 適合には必須ではありませんが、手話を主に使用するろう者にとって、最も質の高い配慮です — 優先度の高いコンテンツ(安全情報、オンボーディング、重要なお知らせなど)で検討してください。手話は世界共通ではありません — 対象となる言語(ASL、BSL、LSQ など)を明示してください。これは字幕の上に重ねる表示ではなく、独立したトラック/動画です — 十分な解像度、コントラスト、照明、フレームレートを確保し、手話者の顔、手、体、手話を行う空間が見えるようにしてください。番組と同期させてください。字幕で手話者を隠さないようにしてください。プレーヤーが対応している場合は、ユーザーが手話映像を選択、拡大縮小、再配置できるようにしてください。手話を使うろう者に確認してもらってください。字幕を補完するものであり、置き換えるものではありません。
メタデータと言語
プレーヤーの前に、ユーザーがメディアを利用するか、どのように利用するかを判断するための情報を表示します。具体的には、内容を説明するタイトル、簡単な目的/概要、再生時間、音声言語と手話言語、字幕の有無と言語、音声解説/トランスクリプトの有無、コンテンツに関する注意事項、古くなっている可能性を示す日付/バージョンを記載します。ページと部分ごとの言語を正しくマークアップします。字幕/解説/メディアの代替コンテンツの言語は、通常、原語と一致させます。翻訳された字幕/トランスクリプトには、正確なラベルを付けます。言語ラベルとして旗だけを使わず、テキストで言語名を示します。
制作ワークフロー
録画前: 予定しているメディアの種類と WCAG 要件を分類します。字幕/音声解説/トランスクリプト/通訳/QA に必要な予算を確保します。自然な形で重要な視覚情報を台本に含めます。不要な背景音や点滅する映像を避けます。必要なトラックに対応するプラットフォームを選びます。字幕制作者向けに、用語/名前/発音を確認します。
制作中: 十分な音量で、明瞭な音声を録音します。重要な名前/タイトル/URL/グラフから読み取れる結論を声に出して伝えます。標準的な音声解説のために間を設けます。重要なテキストは、認識できるだけの時間表示します。手話通訳者やデモの様子が明確に見えるように映します。字幕/コントロールが映像を覆う位置に、視覚情報を配置しないようにします。
公開前: 最終音声に照らして字幕を確認します。最終編集版に照らして、トランスクリプト/音声解説を確認します。すべての言語/トラックのラベルを検証します。制作ファイルだけでなく、最終エンコード済みのメディアをテストします。認証済みの編集者セッションを使わずに、サードパーティの埋め込みコンテンツをテストします。プレーヤーが機能しない場合も代替コンテンツを利用できることを確認します。レビュー担当者/日付/バージョン/フォローアップが必要な問題を記録します。
テスト
- 字幕: 音声と比較できる状態で、字幕を有効にしてメディア全体を視聴します。すべての発話、名前/数値/専門用語/否定表現、話者/音の識別、同期、字幕キューの順序/改行/表示時間を検証します。字幕が視覚コンテンツを覆わないことを確認します。すべての言語と全画面表示をテストします
- トランスクリプト/音声解説: メディアを再生せずにトランスクリプトを読み、意味が同等であることを確認します。解説付きトランスクリプトが必要な場合は、視覚情報が含まれていることを確認します。画面を見ずに、音声解説付きのバージョンを聴きます。音声解説が重要な会話を覆わないことを検証します。品質レビューには、ろう者、難聴者、盲ろう者、視覚障害者、ロービジョンの人、手話を使う人に参加してもらいます
- キーボード/スクリーンリーダー: キーボードを使ってすべてのコントロールに移動します。ボタン/範囲コントロール/メニュー/字幕/音声解説/再生速度/全画面表示を操作します。名前/役割/状態/値が適切であることを確認します。コントロールの表示/非表示に応じて、フォーカスが見える状態で論理的に維持されることを確認します。フォーカストラップなしで、埋め込みプレーヤーや全画面プレーヤーに入る/終了することを確認します。再生位置の更新が継続的に読み上げられないことを確認します
- 視覚/動き/タッチ: 200%/400% の拡大表示。狭いビューポートと両方の画面の向き。強制配色/ハイコントラスト。ページ読み込み前に視差効果を減らす設定を有効にし、自動再生の動きが抑制されることを確認します。タッチ操作可能な一時停止コントロール。ターゲットサイズ。メディアがしきい値に近づく可能性がある場合は、点滅コンテンツを分析します
- ライブイベント: 字幕/通訳のフィードを含めて、全体をリハーサルします。プレゼンター権限のない参加者のアクセスをテストします。字幕サービス/ネットワークの障害を想定したシミュレーションを行います。イベント中にサポート窓口を利用できることを確認します
自動チェックでは、カスタムコントロールのアクセシブルな名前の欠落、不正な ARIA、キーボードのフォーカス順の問題、<track> 属性の欠落/形式不備、WebVTT の構文エラー、ID の重複、コントラストの問題、音声付き自動再生の設定を検出できます。ただし、字幕の正確性、トランスクリプトの同等性、音声解説の品質、手話の品質、ライブ配信の品質は確認できません。コンテンツと操作の手動レビューが必要です。
よくある失敗
| 失敗 | 修正方法 |
|---|---|
| 技術的に難しい場合に、ライブ字幕は任意だと扱う | 実現可能性を条件とせず、AA のライブ同期メディアには字幕を計画して提供します |
| 未確認の自動字幕を公開する | 字幕ファイル全体を確認し、修正します |
| 会話だけに字幕を付ける | 意味のある非音声の音声と話者の識別情報を含めます |
| オープンキャプションをすべて却下する | クローズドキャプションに対応していない場合は、有効な手法として評価します |
| 音声のみの文字起こしをダウンロードリンクだけの奥に隠す | 見つけやすく、アクセシブルな HTML 文字起こしを提供します |
| 文字起こしを、AA の音声解説の代替として扱う | 視覚情報が必要な場合は、1.2.5 に基づき音声解説を提供します |
| 拡張音声解説を AA に分類する | AAA(1.2.7)です |
テストせずに track kind="descriptions" だけに依存する | 対応状況をテストし、対応する音声解説トラックまたはバージョンを提供します |
| どのプレーヤーも普遍的にアクセシブルだと推奨する | 選択したバージョンと設定を評価し、テストします |
| 動作が不完全な装飾的カスタムコントロールを公開する | ネイティブコントロールを使うか、プレーヤーインターフェース全体を実装してテストします |
| 再生時間が更新されるたびにライブリージョンで通知する | 連続的なライブリージョンを使わず、タイムラインの値を提示します |
| WCAG 1.4.2 が、音声付き自動再生をすべて文字どおり禁止していると主張する | 基準を正確に適用し、より厳格なプロジェクトルールは別途採用します |
| ミュートされた自動再生は自動的に許容されると想定する | 動きを制御できるようにし、動きを減らす設定を尊重します |
CSS の animation-play-state で動画を一時停止する | メディア要素の API を使います |
| 手話言語を特定せずに提供する | 対象者に必要な言語を使い、明示します |
| テストせずにサードパーティのアクセシビリティ声明を信頼する | 設定済みの現行プレーヤーをテストし、代替手段は埋め込みの外に用意します |
完了条件チェックリスト
- メディアを音声のみ/動画のみ/同期/ライブ/録画済みに分類し、該当する A/AA の代替手段を記録している
- 音声付きメディアの自動再生がない
- 動画が(ミュートで)自動再生される場合は、
prefers-reduced-motionによって無効化され、一時停止コントロールが常に使用できる - WCAG 1.4.2:3 秒以上続く音声に、アクセシブルな停止/一時停止/ミュート機能がある
- 音声付きのすべての録画済み動画に同期字幕がある
- 自動生成字幕は、人が確認・修正してから公開されている
- 音声のみのコンテンツすべてにテキストの文字起こしがある。見つけやすい HTML 形式であり、PDF/ダウンロードのみではない
- 文字起こしに、安定したアンカー URL から直接リンクできる
- 重要な言葉にされていない視覚情報を含むすべての録画済み動画に、音声解説がある(AA)
- ライブ同期メディアに、テスト済みのリアルタイム字幕サービスがある
- メディアプレーヤーをこのプロジェクトで評価・テストしている。ライブラリの評判だけでアクセシブルだと判断していない
- すべてのメディアプレーヤーのコントロールをキーボードで操作でき、フォーカスインジケーターが見える
- 再生/一時停止/音量/字幕の状態が正しく通知され、
timeupdateの連続通知がない - 埋め込み/サードパーティプレーヤーに簡潔な iframe タイトルがあり、文字起こし/音声解説へのリンクが iframe の外にある
- メディアのメタデータに、再生時間、言語、利用可能な代替手段が記載されている
主な WCAG 基準
- 1.2.1 音声のみおよび動画のみ(収録済み)(A)
- 1.2.2 キャプション(収録済み)(A) — 欠如している場合は重大
- 1.2.3 音声解説またはメディアの代替コンテンツ(収録済み)(A)
- 1.2.4 キャプション(ライブ)(AA) — 欠如している場合は深刻。一般的な実現可能性を理由に免除されない
- 1.2.5 音声解説(収録済み)(AA) — 欠如している場合は深刻
- 1.2.6 手話(収録済み)(AAA)
- 1.2.7 拡張音声解説(収録済み)(AAA)
- 1.4.2 音声の制御(A) — 自動再生される音声を停止できない場合は重大
- 2.1.4 文字キーのショートカット(A)
- 2.2.2 一時停止、停止、非表示(A)
- 2.3.1 3 回の閃光、または閾値以下(A)
参考資料
- ベストプラクティスガイド全文
- W3C WAI:音声・動画メディアをアクセシブルにする
- WebVTT 仕様(W3C)
- テクニック H95:キャプションを提供するために
trackを使用する - テクニック G9:ライブの同期メディアにキャプションを作成する
- WCAG 2.2 解説 1.2 時間ベースのメディアの概要
- WCAG 2.2 解説 1.4.2 音声の制御
規格の動向: WCAG 3.0 では、1.2.x の時間ベースのメディアに関する要件の 実質的な内容が維持される見込みです。 最新情報:https://www.w3.org/TR/wcag-3.0/