2. Webアクセシビリティ
今ならどうするの？
2017年12月2日

3. 自己紹介
3

4. 4
澤田 望

5. 5
中年男性
パーマ
メガネ（老眼）
ガリガリ

6. 岡山で独立（2014）
キヤノン （～2013）
6
• Webアクセシビリティ検証
• イラスト制作
• 岡山情報ビジネス学院 非常勤講師
• ウェブアクセシビリティ基盤委員会
などなど
• サイトデザイン監修
• Webアクセシビリティ対応

7. 7
Webアクセシビリティに
ついてのコラムを担当。
https://www.mdn.co.jp/di/book/3217203008/より

8. 岡山旅ねっとより

9. 岡山旅ねっとより
昭和４２年(１９６７年)３月１８日、岡山
県立盲学校の生徒が登下校の際に利用して
いた当時の国道２号(現国道２５０号)原尾
島交差点の横断歩道に２３０枚の点字ブロッ
クが敷設されたのです。これがわが国初の
ことで、その後各地に徐々に広まって行き
ました。
”
”

10. 今日の目標
10

11. 11
Webアクセシビリティって、
2017年の今なら、
どう取り組んでおけばいいの？
ココの解決

12. 「Webデザイン」って何するの？
12

13. 13https://kotobank.jp/word/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-100877より

14. 14https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3より

15. 15
問題 is 何？

16. 16
目的を達成するための課題。

17. 17
つまり「Webデザイン」とは？

18. 18
Webサイトの目的を達成するために
必要な状態（ビジュアルを含む）を実現すること

19. Webサイトを作る意味ってなんだろう？
19

20. 20
• 商品を買ってもらいたい
• サービスを利用してもらいたい
• 会社の株を買ってもらいたい
• 社員になってもらいたい
※広告は除外
Webサイトの目的（の例）

21. 21
• 商品を気に入ってもらいたい
• サービスを気に入ってもらいたい
• 会社の株を気に入ってもらいたい
• 社員を気に入ってもらいたい
目的を達成するには？

22. 22
• 商品を知ってもらいたい
• サービスを知ってもらいたい
• 会社の株を知ってもらいたい
• 社員を知ってもらいたい
目的を達成するには？
多くの人に情報を届けたい

23. 23
多くの人に情報を届けたい
目的を達成するには？
アクセシブルな状態
多くの人にアクセスしてもらいたい
アクセスできる状態にしておく必要

24. 24
アクセシビリティを考えることが
Webサイトの目的に直結している

25. Webアクセシビリティ、
25
これからどうなるの？

26. 26
ぞくぞく登場！

27. 27
「スマートスピーカー」の画像検索結果より

28. 28
ビックカメラ岡山店

29. 29Google検索結果ページ より

30. 30
音声による情報伝達が、より身近に

31. 31
10年ぶりのバージョンアップ。

32. 32https://www.w3.org/TR/WCAG21/ より

33. 33https://w3c.github.io/wcag21/guidelines/ より

34. 34
• WCAG 2.0勧告から10年ぶりの更新
• 勧告目標：2018年半ば
• WCAG 2.0の内容は変更予定なし
• ルールの追加：21
→ 今までよりも条件が厳しくなる
WCAG 2.1の概要（2017/11時点）

35. 35
• 認知障害や弱視の利用者を想定したルール追加
• モバイルや音声入力を想定したルール追加
• 拡大表示：2方向へのスクロールなしで400％
• コントラスト比：図形やUIコンポーネントにも
• 操作や理解の妨げとなるインタラクションの抑制
• タッチする要素：44 x 44 CSSpx以上
• デバイスのセンサーや向きだけに依存しない
WCAG 2.1の主な変更点（2017/11時点）

36. 36
=
WCAGがバージョンアップする影響

37. 37
• JIS X 8341-3の更新間隔：約6年
• 次回更新：2022年？？
WCAGを採用しているグローバルな企業
→早めに影響あるかも
WCAGがバージョンアップする影響

38. 38
利用者の現状に見合った
内容になるってことね。

39. じゃ、今ならどうするの？
39

40. 40
「孤高のサイト」にならないよう
注意しましょう。

41. 41
50点のサイトを100点に高めるよりも

42. 42
50点のサイトをもっとたくさん作りましょう

43. 43https://www.amazon.co.jp/dp/4862463878/ より

44. 44
Webに載るだけで
圧倒的にアクセシブル
freee 伊原氏

45. 45
情報は溜め込んでいてもダメ。
利用者に届かないと意味がない。

46. 46
JIS X 8341-3 関連文書の翻訳を
どんどん更新しています。

47. 47WCAG 2.0 解説書（WAIC） より

48. 48How to Meet WCAG 2.0（WAIC） より

49. 49
50点のサイトをもっとたくさん作りましょう

50. 50
じゃ、これから始めたいという方は？

51. 51
まずはサイトの現状認識から。

52. ページにたどり着けるか
52
アクセシビリティ・チェックの優先順位
コンテンツに
たどり着けるか
迷わず
利用できるか
読んで理解できるか
操作可能
知覚可能
堅牢性
理解可能
UXの世界

53. 53
1. ページにたどり着けるか
• 適切で固有のページタイトル
•「403」「404」「500」「503」はNG
• 適切なリンクラベル
• コントラスト比が十分なナビゲーション色
（小さい文字4.5：1／大きい文字3.0：1）

54. • 適切な見出し
• 代替コンテンツの用意（画像／音声／動画）
• キーボード操作可能（見えるフォーカスインジケータ）
• 200%まで文字サイズ拡大可能
54
2. コンテンツにたどり着けるか

55. 55
3. 読んで理解できるか
• 正しい文書構造
• コントラスト比が十分なコンテンツ色
（小さい文字4.5：1／大きい文字3.0：1）
• 使える入力フォーム（ラベル／必須項目／説明）
• 理解できるテーブル（複雑さ／caption／見出し）
• 感覚に頼らない表現（色／位置など）
• 適切な内容の代替コンテンツ

56. 56
4. 迷わず利用できるか
• メインコンテンツに移動できる（h要素）
• コンテキストの変化を適切に伝える
• 重複のない情報
（リンク画像の代替テキストとリンクテキストなど）
• 的確なエラーメッセージ
• オートスタートはNG

57. 57
実際にチェックしてみよう。

58. 58高知県庁ホームページ より

59. 59
アクセシビリティの
PDCAサイクル
PLAN DO
CHECKACTION
評価改善
ウェブアクセシビリティ
方針
制作／運用

60. 60
焦らずのんびりやりましょう。

61. まとめ
61

62. 62
コンテンツそのもののアクセシビリティが
より一層大切に

63. 63https://www.w3.org/TR/WCAG21/ より

64. ページにたどり着けるか
64
アクセシビリティ・チェックの優先順位
コンテンツに
たどり着けるか
迷わず
利用できるか
読んで理解できるか
操作可能
知覚可能
堅牢性
理解可能
UXの世界

65. 65
アクセシビリティを考えることが
Webサイトの目的に直結している

66. 66
Webサイトの目的は何だったのか
もう一度考えてみよう

67. 67
ありがとうございました
@SawadaStdDesign