ウェブディレクターのための web a11y 勉強会 #04
TRANSCRIPT
![Page 1: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/1.jpg)
ウェブディレクターのためのWeb A11Y 勉強会
#04 (2017-09-12)
![Page 2: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/2.jpg)
自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG https://website-usability.info
![Page 3: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/3.jpg)
前回までのあらすじ#01 • ウェブアクセシビリティとは? • ウェブアクセシビリティはなぜ必要なの? • 支援技術を知ろう
#02 • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう!
![Page 4: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/4.jpg)
前回までのあらすじ#03 • WCAG 2.0 の概略
• 基本構成 : 「原則」「ガイドライン」「達成基準」
• WCAG 本体と関連文書 (解説書、達成方法集)
• WCAG 2.0 (Level A) を読もう! • 1.1.1 非テキストコンテンツ
画像などに対する情報保障について学びました。
![Page 5: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/5.jpg)
今日のメニュー• WCAG 2.0 (Level A) を読もう! • 1.2.1 音声のみ及び映像のみ (収録済み) • 1.2.2 キャプション (収録済み) • 1.2.3 音声解説又はメディアに対する代替コンテンツ (収録済み)
• ケーススタディ、お悩み相談
音声/動画に対する情報保障について学びます。
![Page 6: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/6.jpg)
WCAG 2.0 (Level A) を読もう! (達成基準、解説書、達成方法集)
![Page 7: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/7.jpg)
WCAG 2.0 の基本構成
おさらい
原則 (4)
ガイドライン (12)
達成基準 (61) このうちレベル「A」のみが本勉強会の対象です。
1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)
![Page 8: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/8.jpg)
原則 1. 知覚可能 (Perceivable)
情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
おさらい
![Page 9: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/9.jpg)
ガイドライン 1.2 時間依存メディア
時間依存メディアには代替コンテンツを提供すること。
「時間依存メディア」とは、時間軸で変化するコンテンツのこと。動画や音声コンテンツの総称。
![Page 10: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/10.jpg)
それでは、達成基準を読んでみましょう。
![Page 11: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/11.jpg)
達成基準 1.2.1 音声のみ及び映像のみ (収録済み)収録済の音声しか含まないメディア及び収録済の映像しか含まないメディアは、次の事項を満たしている。ただし、その音声又は映像がメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く: (レベル A) • 収録済の音声しか含まない場合: 時間依存メディアに対する代替コンテンツによって、
収録済の音声しか含まないコンテンツと同等の情報を提供している。 • 収録済の映像しか含まない場合: 時間依存メディアに対する代替コンテンツ又は音声ト
ラックによって、収録済の映像しか含まないコンテンツと同等の情報を提供している。
達成基準 1.2.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html
![Page 12: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/12.jpg)
[用語] 達成基準 1.2.1 音声だけ及び映像だけ (収録済み)
収録済み ライブではない。あらかじめ録画/録音されている状態のこと。
メディアによる (テキストの) 代替 テキスト既に提示されている以上の情報を提示していないメディアのこと。
音声しか含まないメディア オーディオコンテンツ (映像なし) のこと。
映像しか含まないメディア 無音の動画コンテンツのこと。
時間依存メディア 時間軸で変化するコンテンツ。動画や音声コンテンツの総称。
![Page 13: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/13.jpg)
[まとめ] 達成基準 1.2.1 音声だけ及び映像だけ (収録済み)
�音声のみ (映像なし) のコンテンツには、聴覚障害への配慮として、代替コンテンツ (テキストによる書き起こし文 : トランスクリプト) を併せて提供しましょう。
�映像のみ (音声なし) のコンテンツには、視覚障害への配慮として、代替コンテンツ (テキストによる書き起こし文 : トランスクリプト) または音声解説を併せて提供しましょう。
�あくまでもテキストで提供されている情報がメインで、それ以上の情報が音声/映像によって提供されていない場合は、この限りではありません。
![Page 14: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/14.jpg)
達成基準 1.2.2 キャプション (収録済み)同期したメディアに含まれているすべての収録済の音声コンテンツに対して、キャプションが提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く。 (レベル A)
達成基準 1.2.2 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-captions.html
![Page 15: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/15.jpg)
[用語] 達成基準 1.2.2 キャプション (収録済み)
同期したメディア 映像と音声が同期して一緒に再生される動画コンテンツのこと。
収録済み ライブではない。あらかじめ録画/録音されている状態のこと。
キャプション 動画の音声トラックに対応した字幕のこと。
メディアによる (テキストの) 代替 既に提示されている以上の情報を提示していないメディアのこと。
![Page 16: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/16.jpg)
[まとめ] 達成基準 1.2.2 キャプション (収録済み)
�音声付きの動画コンテンツには、聴覚障害への配慮として、キャプション (字幕) を併せて提供しましょう。 ✓オープンキャプション (常に表示される字幕) とクローズドキャプション (利用者
の任意で表示/非表示できる字幕) があります。 ✓HTML5の <video> 要素や YouTube では、クローズドキャプションを付加する
ことができます。 ✓クローズドキャプションはテキストなので、マルチデバイス対応、多言語展開、
SEO の面で有利です。 �あくまでもテキストで提供されている情報がメインで、それ以上の情報が動画コンテ
ンツ (音声トラック) によって提供されていない場合は、この限りではありません。
![Page 17: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/17.jpg)
達成基準 1.2.3 音声解説、又はメディアに対する代替 (収録済み)同期したメディアに含まれている収録済の映像コンテンツに対して、時間依存メディアに対する代替コンテンツ又は音声解説が提供されている。ただし、その同期したメディアがメディアによるテキストの代替であって、メディアによる代替であることが明確にラベル付けされている場合は除く。 (レベル A)
達成基準 1.2.3 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html
![Page 18: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/18.jpg)
[用語] 達成基準 1.2.3 音声解説、又はメディアに対する代替 (収録済み)
同期したメディア 映像と音声が同期して一緒に再生される動画コンテンツのこと。
収録済み ライブではない。あらかじめ録画/録音されている状態のこと。
時間依存メディアに対する代替コンテンツ トランスクリプト (書き起こし文) など。
音声解説 動画の映像による情報を説明するために、音声トラックに追加されたナレーション 。
メディアによる (テキストの) 代替 テキスト既に提示されている以上の情報を提示していないメディアのこと。
![Page 19: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/19.jpg)
[まとめ] 達成基準 1.2.3 音声解説、又はメディアに対する代替 (収録済み)
�音声付きの動画コンテンツには、視覚障害への配慮として、代替コンテンツ (テキストによる書き起こし文 : トランスクリプト) または音声解説を併せて提供しましょう。
�あくまでもテキストで提供されている情報がメインで、それ以上の情報が動画コンテンツ (映像トラック) よって提供されていない場合は、この限りではありません。
![Page 20: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/20.jpg)
ケーススタディ、お悩み相談
![Page 21: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/21.jpg)
Anyone?
![Page 22: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/22.jpg)
次回予告
![Page 23: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/23.jpg)
• WCAG 2.0 (Level A) を読もう! • 1.3.1 情報及び関係性
• 1.3.2 意味のある順序
• 1.3.3 感覚的な特徴
• ケーススタディ、お悩み相談
多様なユーザーエージェント (デバイス、ブラウザ、支援技術) への適応について学びます。
![Page 24: ウェブディレクターのための Web A11Y 勉強会 #04](https://reader031.vdocuments.pub/reader031/viewer/2022020119/5a672bb47f8b9a453d8b4c23/html5/thumbnails/24.jpg)
To be continued…