ウェブディレクターのためのWeb A11Y 勉強会

#04 (2017-09-12)

自己紹介

@caztcha

ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家

ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG https://website-usability.info

前回までのあらすじ#01 • ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう

#02 • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう!

前回までのあらすじ#03 • WCAG 2.0 の概略

• 基本構成 : 「原則」「ガイドライン」「達成基準」

• WCAG 本体と関連文書 (解説書、達成方法集)

• WCAG 2.0 (Level A) を読もう！ • 1.1.1 非テキストコンテンツ

画像などに対する情報保障について学びました。

今日のメニュー• WCAG 2.0 (Level A) を読もう！ • 1.2.1 音声のみ及び映像のみ (収録済み) • 1.2.2 キャプション (収録済み) • 1.2.3 音声解説又はメディアに対する代替コンテンツ (収録済み)

• ケーススタディ、お悩み相談

音声/動画に対する情報保障について学びます。

WCAG 2.0 (Level A) を読もう！ (達成基準、解説書、達成方法集)

WCAG 2.0 の基本構成

おさらい

原則 (4)

ガイドライン (12)

達成基準 (61) このうちレベル「A」のみが本勉強会の対象です。

1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)

原則 1. 知覚可能 (Perceivable)

情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。

おさらい

ガイドライン 1.2 時間依存メディア

時間依存メディアには代替コンテンツを提供すること。

「時間依存メディア」とは、時間軸で変化するコンテンツのこと。動画や音声コンテンツの総称。

それでは、達成基準を読んでみましょう。

達成基準 1.2.1 音声のみ及び映像のみ (収録済み)収録済の音声しか含まないメディア及び収録済の映像しか含まないメディアは、次の事項を満たしている。ただし、その音声又は映像がメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く: (レベル A) • 収録済の音声しか含まない場合: 時間依存メディアに対する代替コンテンツによって、

収録済の音声しか含まないコンテンツと同等の情報を提供している。 • 収録済の映像しか含まない場合: 時間依存メディアに対する代替コンテンツ又は音声ト

ラックによって、収録済の映像しか含まないコンテンツと同等の情報を提供している。

達成基準 1.2.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html

[用語] 達成基準 1.2.1 音声だけ及び映像だけ (収録済み)

収録済み ライブではない。あらかじめ録画/録音されている状態のこと。

メディアによる (テキストの) 代替 テキスト既に提示されている以上の情報を提示していないメディアのこと。

音声しか含まないメディア オーディオコンテンツ (映像なし) のこと。

映像しか含まないメディア 無音の動画コンテンツのこと。

時間依存メディア 時間軸で変化するコンテンツ。動画や音声コンテンツの総称。

[まとめ] 達成基準 1.2.1 音声だけ及び映像だけ (収録済み)

�音声のみ (映像なし) のコンテンツには、聴覚障害への配慮として、代替コンテンツ (テキストによる書き起こし文 : トランスクリプト) を併せて提供しましょう。

�映像のみ (音声なし) のコンテンツには、視覚障害への配慮として、代替コンテンツ (テキストによる書き起こし文 : トランスクリプト) または音声解説を併せて提供しましょう。

�あくまでもテキストで提供されている情報がメインで、それ以上の情報が音声/映像によって提供されていない場合は、この限りではありません。

達成基準 1.2.2 キャプション (収録済み)同期したメディアに含まれているすべての収録済の音声コンテンツに対して、キャプションが提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く。 (レベル A)

達成基準 1.2.2 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-captions.html

[用語] 達成基準 1.2.2 キャプション (収録済み)

同期したメディア 映像と音声が同期して一緒に再生される動画コンテンツのこと。

収録済み ライブではない。あらかじめ録画/録音されている状態のこと。

キャプション 動画の音声トラックに対応した字幕のこと。

メディアによる (テキストの) 代替 既に提示されている以上の情報を提示していないメディアのこと。

[まとめ] 達成基準 1.2.2 キャプション (収録済み)

�音声付きの動画コンテンツには、聴覚障害への配慮として、キャプション (字幕) を併せて提供しましょう。 ✓オープンキャプション (常に表示される字幕) とクローズドキャプション (利用者

の任意で表示/非表示できる字幕) があります。 ✓HTML5の <video> 要素や YouTube では、クローズドキャプションを付加する

ことができます。 ✓クローズドキャプションはテキストなので、マルチデバイス対応、多言語展開、

SEO の面で有利です。 �あくまでもテキストで提供されている情報がメインで、それ以上の情報が動画コンテ

ンツ (音声トラック) によって提供されていない場合は、この限りではありません。

達成基準 1.2.3 音声解説、又はメディアに対する代替 (収録済み)同期したメディアに含まれている収録済の映像コンテンツに対して、時間依存メディアに対する代替コンテンツ又は音声解説が提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く。 (レベル A)

達成基準 1.2.3 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html

[用語] 達成基準 1.2.3 音声解説、又はメディアに対する代替 (収録済み)

同期したメディア 映像と音声が同期して一緒に再生される動画コンテンツのこと。

収録済み ライブではない。あらかじめ録画/録音されている状態のこと。

時間依存メディアに対する代替コンテンツ トランスクリプト (書き起こし文) など。

音声解説 動画の映像による情報を説明するために、音声トラックに追加されたナレーション 。

メディアによる (テキストの) 代替 テキスト既に提示されている以上の情報を提示していないメディアのこと。

[まとめ] 達成基準 1.2.3 音声解説、又はメディアに対する代替 (収録済み)

�音声付きの動画コンテンツには、視覚障害への配慮として、代替コンテンツ (テキストによる書き起こし文 : トランスクリプト) または音声解説を併せて提供しましょう。

�あくまでもテキストで提供されている情報がメインで、それ以上の情報が動画コンテンツ (映像トラック) よって提供されていない場合は、この限りではありません。

ケーススタディ、お悩み相談

Anyone?

次回予告

• WCAG 2.0 (Level A) を読もう！ • 1.3.1 情報及び関係性

• 1.3.2 意味のある順序

• 1.3.3 感覚的な特徴

• ケーススタディ、お悩み相談

多様なユーザーエージェント (デバイス、ブラウザ、支援技術) への適応について学びます。

To be continued…