音声・映像コンテンツ
これらのガイドライン項目は、音声のみのコンテンツ、音声を含む動画コンテンツ、映像のみの動画コンテンツに関するものです。
音声・映像コンテンツの存在を明示する
音声・映像コンテンツの存在を認知できるようにする。
- 対象プラットフォーム
Web、モバイル
- 意図
視覚障害者、聴覚障害者が音声や映像を含むコンテンツの存在を認知できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.1.1(レベルA):
- 参考情報
チェック内容
チェックID:1411
ページ内に音声や動画プレイヤーが埋め込まれている場合、その事実が容易に認知できる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順:Web
以下の1411-content-00または1411-content-01または1411-content-02を満たしていることを確認する。
1411-content-00:その他の手段によるチェック方法の例
チェック対象の画面に音声や動画プレイヤーは埋め込まれていない。
1411-content-01:その他の手段によるチェック方法の例
ページに埋め込まれている音声や動画のプレイヤーには、そこにプレイヤーがあることが分かるようなラベルが適切に付けられている。
1411-content-02:その他の手段によるチェック方法の例
ページに埋め込まれている音声や動画のプレイヤーは、前後のテキストから、そこにプレイヤーがあることが推測できるようになっている。
音声の自動再生
3秒以上の長さの音声を自動再生しない。
- 対象プラットフォーム
Web、モバイル
- 意図
スクリーン・リーダーの音声出力を阻害しない。
- 対応するWCAG 2.1の達成基準
達成基準1.4.2(レベルA):
- 参考情報
チェック内容
チェックID:1421
3秒以上の長さの自動再生される音声コンテンツがない。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
チェックID:1441
スクリーン・リーダーの音声出力を阻害するような、音声を含む自動再生されるコンテンツがない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
チェック手順:Web
以下の1441-content-00または1441-content-01を満たしていることを確認する。
1441-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、音声を含む自動再生されるコンテンツがない。
1441-content-01:その他の手段によるチェック方法の例
音声を含む自動再生されるコンテンツは、3秒以内に音声の再生が終了する。
動きを伴うコンテンツ
自動的に開始し5秒以上継続する、アニメーションや動画のなどの視覚的な動きを伴うコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。
- 対象プラットフォーム
Web、モバイル
- 意図
ロービジョン者や認知障害者が、集中を阻害されないようにする。
- 対応するWCAG 2.1の達成基準
達成基準2.2.2(レベルA):
チェック内容
チェックID:1451
自動的に開始し5秒以上続く動画、アニメーションがない。または
動画やアニメーションを停止、一時停止、または非表示にすることができる。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェックID:1471
ユーザーの注意を阻害するような自動再生される動画やアニメーションがない。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェック手順:Web
以下の1471-content-00または1471-content-01または1471-content-02を満たしていることを確認する。
1471-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、自動再生される動画やアニメーションがない。
1471-content-01:その他の手段によるチェック方法の例
自動再生される動画やアニメーションは、5秒以内に再生が終了する。
1471-content-02:その他の手段によるチェック方法の例
ユーザーが、自動再生される動画やアニメーションを停止、一時停止、または非表示にできる。
キーボード・トラップの回避
音声/動画のプレイヤーをページに埋め込む場合、そのコンポーネントにフォーカスした状態から、Tabキー、矢印キー、Escキーなどで抜け出すことができるようにする。
- 対象プラットフォーム
Web
- 意図
キーボードのみを利用している場合に、ページ中の特定のコンポーネントがページの他の部分へのアクセスを阻害しないようにする。
- 対応するWCAG 2.1の達成基準
達成基準2.1.2(レベルA):
- 参考情報
チェック内容
チェックID:0201
Tab/Shift+Tabキーによるフォーカスの移動時、特定の箇所からフォーカスが抜け出せないような状況が発生しない、または
特定の箇所からフォーカスが抜け出せない状態では、矢印キーやEscキーの押下といった簡単な操作でその状態を抜け出すことができる
特に注意が必要なコンポーネントの例:
動画や音声コンテンツのプレイヤー
ポップアップ・メニュー
モーダル・ダイアログ
- 対象
プロダクト
- 対象プラットフォーム
Web
- 重篤度
[CRITICAL]
チェック手順:Web
以下の0201-keyboard-01を満たしていることを確認する。
0201-keyboard-01:キーボード操作によるチェック方法の例
Tabキーを使って、ページの先頭からフォーカスを順に移動したときの挙動は、以下を満たしている:
TabキーまたはShift+Tabキーを押下しても、特定の場所からフォーカスが抜け出せないような状況が発生しない、または
TabキーやShift+Tabキーの押下でフォーカスが抜け出せない場合に、矢印キーやEscキーなど、簡単なキー操作でフォーカスを当該箇所から外すことができる。
テキスト情報と同等の内容にする
テキスト情報の代替情報として音声・映像コンテンツを用い、そのコンテンツがテキスト情報の代替であることを明示する。
- 対象プラットフォーム
Web、モバイル
- 意図
音声・映像コンテンツの利用ができないユーザーも支障なくコンテンツを利用できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.2.1(レベルA):
達成基準1.2.2(レベルA):
達成基準1.2.3(レベルA):
達成基準1.2.4(レベルAA):
- 参考情報
チェック内容
チェックID:1481
音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェックID:1501
音声・映像コンテンツは、そのコンテンツがなくても不足なくその画面で提供されている情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェック手順:Web
以下の1501-content-00を満たしている、または(1501-content-01と1501-content-02を満たしている)ことを確認する。
1501-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、音声コンテンツ、動画、アニメーションがない。
1501-content-01:その他の手段によるチェック方法の例
音声コンテンツ、動画、アニメーションは、テキスト情報と同一の内容を伝えるためのもので、そのコンテンツがなくても情報の理解やサービスの利用に支障がない。
1501-content-02:その他の手段によるチェック方法の例
音声コンテンツ、動画、アニメーションは、そのコンテンツがテキスト情報と同一の内容であることが明示されている。
キャプションの提供
テキストの代替情報ではない音声・映像コンテンツにおいて、音声情報には、同期したキャプションを提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
音声情報を理解できなくてもサービスの利用が困難にならないようにする。
聴覚障害者が、音声コンテンツおよび動画コンテンツ内の音声を理解できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.2.2(レベルA):
達成基準1.2.4(レベルAA):
- 参考情報
チェック内容
チェックID:1511
音声を含むコンテンツには、同期したキャプションが提供されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID:1531
音声を含むコンテンツには、同期したキャプションが提供されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順:Web
以下の1531-content-00または1531-content-01を満たしていることを確認する。
1531-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、音声を含むコンテンツが存在しない。
1531-content-01:その他の手段によるチェック方法の例
音声を含むコンテンツには、同期したキャプションが提供されている。
書き起こしテキストの提供
テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
音声コンテンツを理解できなくてもサービスの利用が困難にならないようにする。
聴覚障害者が音声のみのコンテンツを理解できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.2.1(レベルA):
- 参考情報
チェック内容
チェックID:1571
映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID:1591
映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順:Web
以下の1591-content-00または1591-content-01または1591-content-02を満たしていることを確認する。
1591-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、音声コンテンツが存在しない。
1591-content-01:その他の手段によるチェック方法の例
音声コンテンツは、テキスト情報と同一の内容を伝えるためのもので、その音声コンテンツがなくても情報の理解やサービスの利用に支障がない。
1591-content-02:その他の手段によるチェック方法の例
その音声コンテンツを書き起こしたテキストが提供されている。
テキスト情報または音声解説の提供
テキストの代替情報ではない音声・映像コンテンツにおいて、映像がある収録済みコンテンツの場合、映像の内容が分かるような同期した音声情報、またはテキストによる説明を提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
映像情報を理解できなくてもサービスの利用が困難にならないようにする。
視覚障害者が、映像コンテンツを理解できるようにする。
- 対応するWCAG 2.1の達成基準
- 参考情報
チェック内容
チェックID:1541
動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または
動画には音声解説が含まれている。または
映像に関するテキストによる説明が提供されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID:1561
動画について、映像を見られない視覚障害者も、サービスの利用や必要な情報の取得を支障なくできる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順:Web
以下の1561-content-00または1561-content-01または1561-content-02または1561-content-03または1561-content-04を満たしていることを確認する。
1561-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、動画コンテンツが存在しない。
1561-content-01:その他の手段によるチェック方法の例
動画は、テキスト情報と同一の内容を伝えるためのもので、その動画がなくても情報の理解やサービスの利用に支障がない。
1561-content-02:その他の手段によるチェック方法の例
動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。
1561-content-03:その他の手段によるチェック方法の例
動画には音声解説が含まれている。
1561-content-04:その他の手段によるチェック方法の例
映像に関するテキストによる説明が提供されている。
音声解説の提供
すべての音声・映像コンテンツにおいて、映像がある収録済みコンテンツの場合、映像の内容が分かるような同期した音声情報を提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
映像情報を理解できなくてもサービスの利用が困難にならないようにする。
視覚障害者が、映像コンテンツを理解できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.2.3(レベルA):
達成基準1.2.5(レベルAA):
- 参考情報
チェック内容
チェックID:1542
動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または
動画には音声解説が含まれている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID:1562
すべての動画は、映像を見られない視覚障害者にも理解できるようになっている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順:Web
以下の1562-content-00または1562-content-01または1562-content-02を満たしていることを確認する。
1562-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、動画コンテンツが存在しない。
1562-content-01:その他の手段によるチェック方法の例
動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。
1562-content-02:その他の手段によるチェック方法の例
動画には音声解説が含まれている。
手話の提供
収録済みコンテンツの音声情報には、同期した手話通訳を提供する。
- 対象プラットフォーム
Web、モバイル
- 意図
手話を主たる言語として使う聴覚障害者が、音声コンテンツまたは動画コンテンツ中の音声を理解できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準1.2.6(レベルAAA):
- 参考情報
チェック内容
チェックID:1601
動画の音声情報には同期した手話通訳が提供されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
チェックID:1621
音声を含む情報には同期した手話通訳が提供されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MINOR]
チェック手順:Web
以下の1621-content-00または1621-content-01を満たしていることを確認する。
1621-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、音声を含むコンテンツが存在しない。
1621-content-01:その他の手段によるチェック方法の例
音声を含むコンテンツには、同期した手話通訳が提供されている。
充分に小さい背景音
映像がなく音声のみの収録済みコンテンツの場合で主たる発話音声があるとき、背景音がない、もしくは主たる発話音声に対して背景音の音量が少なくとも20db小さい状態にする。
- 対象プラットフォーム
Web、モバイル
- 意図
音声コンテンツの内容を聞き取りやすいものにする。
- 対応するWCAG 2.1の達成基準
達成基準1.4.7(レベルAAA):
- 参考情報
チェック内容
チェックID:1631
音声コンテンツについて、充分に聴き取りやすい。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID:1651
音声を含むコンテンツにおいて、背景音は適切な音量になっている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順:Web
以下の1651-content-00または1651-content-01を満たしていることを確認する。
1651-content-00:その他の手段によるチェック方法の例
チェック対象の画面に、音声コンテンツが存在しない。
1651-content-01:その他の手段によるチェック方法の例
音声コンテンツは、充分に聴き取りやすい。