WCAG2.0/2.1とCUDの整理、スクリーンメディアにおけるCUD

Transcript

1. 　WCAG2.0 / 2.1とCUDの整理、 スクリーンメディアにおけるCUD 2017.11.09 freee 伊原 力也 カラーユニバーサルデザイン
2. 自己紹介：伊原 力也 • freee IA/UX • IAUD 移動空間研究部会 副主査 • ウェブアクセシビリティ基盤委員会 WG1委員 • HCD-Net認定 人間中心設計専門家 / 評議委員 • アクセシビリティ系書籍を共著・監訳 ◦ インクルーシブHTML+CSS & JavaScript ◦ デザイニングWebアクセシビリティ ◦ コーディングWebアクセシビリティ
3. https://iaud.net
4. http://waic.jp 4
5. Amazonで「アクセシビリティ」と検索！ 5
6. 6 Amazonで「インクルーシブHTML」と検索！
7. アクセシビリティガイドラインと 　カラーユニバーサルデザイン、 どっちをどう考えたら良い？
8. WCAG と CUD　 Webコンテンツ 色に依存しない前提 区切りにフォーカス コントラストが基準 機械的にチェッカーで判定 最低限の基準 間違わないためのもの 印刷、ハード、デジタル 色が存在する前提 面にフォーカス ベストプラクティスで判断 シミュレーターで人間が検討 発展的な手法 色を活かすためのもの
9. 色を見分けられるメリットは絶大であり対象者も多い [ CUDでアプローチ ] [ WCAGでアプローチ ] 色を見分けられなくても問題ない作りは堅牢である
10. 目次 • WCAGの概要 • 達成基準のレベル分け • 色に関する達成基準：その1 • 色に関する達成基準：その2 • CUDとスクリーンメディア • WCAGとCUDの交点 • WCAGとCUDの整理
11. WCAGの概要 • Web Content Accessibility Guidelines • W3C勧告 • 現在のバージョンは2.0 • JIS X 8341-3:2016と一致 • 2018年6月にバージョン2.1が勧告予定 • ロービジョン対応やモバイルデバイス対応関連の 達成基準が追加される見通し
14. 達成基準のレベル分け • レベルA（対応必須）は概ね 「マシンリーダブルか」「キーボード操作可能か」「干渉しないか」 • 視覚的に見やすいかは「レベルAA」以上
15. 色に関する達成基準 その1
16. 1.4.1 色の使用 (レベルA) WCAG2.0
17. 1.4.1 色の使用 (レベルA) WCAG2.0
18. 1.4.1 色の使用 (レベルA) WCAG2.0
19. 1.4.1 色の使用 (レベルA) WCAG2.0
20. 1.4.1 色の使用 (レベルA) WCAG2.0
21. 1.4.1 色の使用 (レベルA) WCAG2.0
22. 色に関する達成基準 その2
23. 1.4.3 コントラスト (最低限) ／1.4.6 コントラスト (高度) • 最低限（レベルAA） →テキスト及び文字画像：4.5:1（大きい文字なら3:1） • 高度（レベルAAA） →テキスト及び文字画像：7:1（大きい文字なら4.5:1） WCAG2.0
24. コントラストチェッカー
25. 1.4.11 Graphics Contrast • 内容または機能を理解するために不可欠なグラフィックオブジェクト • 隣接する色に対して4.5:1 • 境界が3px以上なら3:1 WCAG2.1
26. 1.4.11 Graphics Contrast (WCAG2.1) WCAG2.1
27. 1.4.11 Graphics Contrast (WCAG2.1) WCAG2.1
28. 1.4.11 Graphics Contrast (WCAG2.1) WCAG2.1
29. 1.4.12 User Interface Component Contrast (Minimum) • ユーザインタフェースコンポーネントの必須ビジュアル識別子 ◦ フォーカスインジケーター、タブの選択済み表示、 入力フォーム、ボタン… • 周囲の色に対して4.5:1 • 境界が3px以上なら3:1 • Inactiveなもの、UAで決定されるものを除く WCAG2.1
32. CUDとスクリーンメディア
33. http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf
34. CUD
35. CUD
36. CUD
37. https://technical-creator.com/stark/
38. https://technical-creator.com/stark/
39. WCAGとCUDの交点
40. CUD
41. CUD
42. CUD
43. CUD
44. WCAGとCUDの整理
45. WCAG と CUD　 Webコンテンツ 色に依存しない前提 区切りにフォーカス コントラストが基準 機械的にチェッカーで判定 最低限の基準 間違わないためのもの 印刷、ハード、デジタル 色が存在する前提 面にフォーカス ベストプラクティスで判断 シミュレーターで人間が検討 発展的な手法 色を活かすためのもの
46. 色を見分けられるメリットは絶大であり対象者も多い [ CUDでアプローチ ] [ WCAGでアプローチ ] 色を見分けられなくても問題ない作りは堅牢である
47. お試し電子版：https://www.borndigital.co.jp/book/6111.html
48. 会場で販売中！
49. 事例紹介に続く！