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

by Rikiya Ihara / magi

Slide 1

Slide 1 text

　WCAG2.0 / 2.1とCUDの整理、スクリーンメディアにおけるCUD 2017.11.09 freee 伊原力也カラーユニバーサルデザイン

Slide 2

Slide 2 text

自己紹介：伊原力也 ● freee IA/UX ● IAUD 移動空間研究部会副主査 ● ウェブアクセシビリティ基盤委員会 WG1委員 ● HCD-Net認定人間中心設計専門家 / 評議委員 ● アクセシビリティ系書籍を共著・監訳 ○ インクルーシブHTML+CSS & JavaScript ○ デザイニングWebアクセシビリティ ○ コーディングWebアクセシビリティ

Slide 3

Slide 3 text

https://iaud.net

Slide 4

Slide 4 text

http://waic.jp 4

Slide 5

Slide 5 text

Amazonで「アクセシビリティ」と検索！ 5

Slide 6

Slide 6 text

6 Amazonで「インクルーシブHTML」と検索！

Slide 7

Slide 7 text

アクセシビリティガイドラインと　カラーユニバーサルデザイン、どっちをどう考えたら良い？

Slide 8

Slide 8 text

WCAG と CUD　 Webコンテンツ色に依存しない前提区切りにフォーカスコントラストが基準機械的にチェッカーで判定最低限の基準間違わないためのもの印刷、ハード、デジタル色が存在する前提面にフォーカスベストプラクティスで判断シミュレーターで人間が検討発展的な手法色を活かすためのもの

Slide 9

Slide 9 text

色を見分けられるメリットは絶大であり対象者も多い [ CUDでアプローチ ] [ WCAGでアプローチ ] 色を見分けられなくても問題ない作りは堅牢である

Slide 10

Slide 10 text

目次 ● WCAGの概要 ● 達成基準のレベル分け ● 色に関する達成基準：その1 ● 色に関する達成基準：その2 ● CUDとスクリーンメディア ● WCAGとCUDの交点 ● WCAGとCUDの整理

Slide 11

Slide 11 text

WCAGの概要 ● Web Content Accessibility Guidelines ● W3C勧告 ● 現在のバージョンは2.0 ● JIS X 8341-3:2016と一致 ● 2018年6月にバージョン2.1が勧告予定 ● ロービジョン対応やモバイルデバイス対応関連の達成基準が追加される見通し

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

達成基準のレベル分け ● レベルA（対応必須）は概ね「マシンリーダブルか」「キーボード操作可能か」「干渉しないか」 ● 視覚的に見やすいかは「レベルAA」以上

Slide 15

Slide 15 text

色に関する達成基準その1

Slide 16

Slide 16 text

1.4.1 色の使用 (レベルA) WCAG2.0

Slide 17

Slide 17 text

1.4.1 色の使用 (レベルA) WCAG2.0

Slide 18

Slide 18 text

1.4.1 色の使用 (レベルA) WCAG2.0

Slide 19

Slide 19 text

1.4.1 色の使用 (レベルA) WCAG2.0

Slide 20

Slide 20 text

1.4.1 色の使用 (レベルA) WCAG2.0

Slide 21

Slide 21 text

1.4.1 色の使用 (レベルA) WCAG2.0

Slide 22

Slide 22 text

色に関する達成基準その2

Slide 23

Slide 23 text

1.4.3 コントラスト (最低限) ／1.4.6 コントラスト (高度) ● 最低限（レベルAA） →テキスト及び文字画像：4.5:1（大きい文字なら3:1） ● 高度（レベルAAA） →テキスト及び文字画像：7:1（大きい文字なら4.5:1） WCAG2.0

Slide 24

Slide 24 text

コントラストチェッカー

Slide 25

Slide 25 text

1.4.11 Graphics Contrast ● 内容または機能を理解するために不可欠なグラフィックオブジェクト ● 隣接する色に対して4.5:1 ● 境界が3px以上なら3:1 WCAG2.1

Slide 26

Slide 26 text

1.4.11 Graphics Contrast (WCAG2.1) WCAG2.1

Slide 27

Slide 27 text

1.4.11 Graphics Contrast (WCAG2.1) WCAG2.1

Slide 28

Slide 28 text

1.4.11 Graphics Contrast (WCAG2.1) WCAG2.1

Slide 29

Slide 29 text

1.4.12 User Interface Component Contrast (Minimum) ● ユーザインタフェースコンポーネントの必須ビジュアル識別子 ○ フォーカスインジケーター、タブの選択済み表示、入力フォーム、ボタン… ● 周囲の色に対して4.5:1 ● 境界が3px以上なら3:1 ● Inactiveなもの、UAで決定されるものを除く WCAG2.1

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

CUDとスクリーンメディア

Slide 33

Slide 33 text

http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf

Slide 34

Slide 34 text

CUD

Slide 35

Slide 35 text

CUD

Slide 36

Slide 36 text

CUD

Slide 37

Slide 37 text

https://technical-creator.com/stark/

Slide 38

Slide 38 text

https://technical-creator.com/stark/

Slide 39

Slide 39 text

WCAGとCUDの交点

Slide 40

Slide 40 text

CUD

Slide 41

Slide 41 text

CUD

Slide 42

Slide 42 text

CUD

Slide 43

Slide 43 text

CUD

Slide 44

Slide 44 text

WCAGとCUDの整理

Slide 45

Slide 45 text

Slide 46

Slide 46 text

色を見分けられるメリットは絶大であり対象者も多い [ CUDでアプローチ ] [ WCAGでアプローチ ] 色を見分けられなくても問題ない作りは堅牢である