Más contenido relacionado
La actualidad más candente (20)
Similar a ウェブディレクターのための Web A11Y 勉強会 (Season 2) #01 (20)
Más de Kazuhiko Tsuchiya (8)
ウェブディレクターのための Web A11Y 勉強会 (Season 2) #01
- 6. 年間計画
4月
1. イントロダクション
2. WCAG 2.0 (Level AA) を読もう
• レベルAとAAの違い
• 1.2.4 キャプション (ライブ)
• 1.2.5 音声解説 (収録済)
3. UI ケーススタディ
5月
1. WCAG 2.0 (Level AA) を読もう
• 1.4.3 コントラスト (最低限)
• 1.4.4 テキストのサイズ変更
2. UI ケーススタディ
6月
1. WCAG 2.0 (Level AA) を読もう
• 1.4.5 文字画像
• 2.4.5 複数の手段
2. UI ケーススタディ
7月
1. WCAG 2.0 (Level AA) を読もう
• 2.4.6 見出し及びラベル
• 2.4.7 フォーカスの可視化
2. UI ケーススタディ
8月
1. WCAG 2.0 (Level AA) を読もう
• 3.1.2 一部分の言語
• 3.2.3 一貫したナビゲーション
• 3.2.4 一貫した識別性
2. UI ケーススタディ
9月
1. WCAG 2.0 (Level AA) を読もう
• 3.3.3 エラー修正の提案
• 3.3.4 エラー回避 (法的、金融、データ)
2. UI ケーススタディ
- 7. 年間計画
10月
1. WCAG 2.1 とは?
2. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 1.3.4 Identify Common Purpose (AA)
• 1.4.10 Reflow (AA)
3. UI ケーススタディ
11月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 1.4.11 Non-text Contrast (AA)
• 1.4.12 Text Spacing (AA)
2. UI ケーススタディ
12月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 1.4.13 Content on Hover or Focus (AA)
• 2.4.11 Character Key Shortcuts (A)
2. UI ケーススタディ
1月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 2.4.12 Label in Name (A)
• 2.5.1 Pointer Gestures (A)
2. UI ケーススタディ
2月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 2.5.2 Pointer Cancellation (A)
• 2.6.1 Motion Actuation (A)
2. UI ケーススタディ
3月
1. WCAG 2.1 追加達成基準 (Level A & AA) を読もう
• 2.6.2 Orientation (AA)
• 3.2.6 Status Changes (AA)
2. UI ケーススタディ
- 10. WCAG (Web Content Accessibility
Guidelines) の基本構成
原則 (4)
ガイドライン (12)
達成基準 (61)
1. 知覚可能 (Perceivable)
2. 操作可能 (Operable)
3. 理解可能 (Understandable)
4. 堅牢 (Robust)
3つのレベルに分かれている
• A (シングルエー)
• AA (ダブルエー)
• AAA (トリプルエー)
- 12. 非干渉 (non-interference)
WCAG 達成基準 (いずれもレベル A) のうち、以下の4つは「非干渉」に該当する、重要な達成基準です (ご参考 :
WCAG2.0 適合要件 ‒ 5.非干渉)。これらの達成基準を満たしていない場合、他の達成基準との間で「干渉」を引き起こし
てしまい、利用者がそのウェブページ全体を使用できなくなる恐れがあるため、特に注意が必要です。
1.4.2 音声の制御
✓ 音声が自動再生されて停止できないと、スクリーンリーダーの音声をかき消してしまい、視覚障害者は何もできな
くなります。
2.1.2 キーボードトラップなし
✓ キーボードフォーカスが「脱出不可能」に陥ると、キーボード操作に依存したユーザーは、他の部分にアクセスで
きなくなります。
2.2.2 一時停止、停止、非表示
✓ 画面の一部に動き続ける要素があると、認知や学習に障害のある (注意力の欠如を抱える) ユーザーなどは、動く要
素に気を取られて他の部分を読むことができなくなります。
2.3.1 3回の閃光、又は閾値以下
✓ 画面の一部が閃光を放つと、光過敏性発作を起こしたユーザーは他の箇所にアクセスできなくなります。
ご参考
- 14. 原則 1. 知覚可能 (Perceivable)
情報及びユーザインタフェース コンポーネントは、利用者が知覚
できる方法で利用者に提示可能でなければならない。
おさらい
- 16. 達成基準 1.2.4
キャプション (ライブ)
同期したメディアに含まれているすべてのライブの音声コンテンツに対して
キャプションが提供されている。(レベル AA)
達成基準 1.2.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-real-time-captions.html
- 17. [用語] 達成基準 1.2.4 キャプション (ライブ)
同期したメディア
映像と音声が同期して一緒に再生される動画コンテンツのこと。
ライブ
収録済みではなく、リアルタイムで送信されること。
キャプション
動画の音声トラックに対応した字幕のこと。
- 18. [まとめ] 達成基準 1.2.4 キャプション (ライブ)
音声付きの動画コンテンツには、収録済のものだけでなく「ライブ」なものに対して
も、聴覚障害への配慮として、キャプション (字幕) を併せて提供しましょう。
✓オープンキャプション (常に表示される字幕) とクローズドキャプション (利用者の
任意で表示/非表示できる字幕) があります。
- 19. リアルタイムの字幕生成…
実際、法律などで WCAG 2.0 AA への適合が求められているケースでも、
この達成基準は例外とされることが多いです。
(近い将来、音声認識や画像解析といった AI によって、簡単に自動生成できそう!
収録済の動画であれば、YouTube が自動字幕付与機能を実現している。)
どう実現する?
誰かがライブで高速で
タイピング?
- 20. 達成基準 1.2.5
音声解説 (収録済)
同期したメディアに含まれているすべての収録済の映像コンテンツに対して、
音声解説が提供されている。(レベル AA)
達成基準 1.2.5 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html
- 21. [用語] 達成基準 1.2.5 音声解説 (収録済)
同期したメディア
映像と音声が同期して一緒に再生される動画コンテンツのこと。
収録済
ライブではない、あらかじめ録画/録音されている状態のこと。
音声解説
主音声だけでは理解できない重要で視覚的な詳細を説明するために、
音声トラックに追加されたナレーション。
- 22. [まとめ] 達成基準 1.2.5 音声解説 (収録済)
音声付きの動画コンテンツには、視覚障害への配慮として、音声解説 (副音声でのナレー
ション) を併せて提供しましょう。
- 28. • WCAG 2.0 (Level AA) を読もう
• 1.4.3 コントラスト (最低限)
• 1.4.4 テキストのサイズ変更
• UI ケーススタディ
ガイドライン 1.4「判別
可能」の中にある AA
達成基準を読みます。