2. 岡山をリーダブルな世界に
リーダブルな夜 on 20180903

3. 自己紹介
3

4. 4
澤田 望
パーマ
メガネ
（老眼）
ガリガリ
中年講師

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

6. 本日の目標
6

7. 「リーダブル」とはどういうことなのか？
オッサン達は岡山をどうしたいのか？
7

8. Webアクセシビリティとは
8

9. 9
abilityaccess accessibility
アクセスする
入手する
たどり着く
+ =
Webコンテンツに対するアクセスのしやすさ
能力
技量
度合い
アクセスできる度合い
たどり着けるかどうか

10. 10
ユーザビリティ
使い易いか／使い難いか の度合い
対象：利用できる人（使えることが前提）
アクセシビリティ
使えるか／使えないか の度合い
対象：全ての人や機械（前提なし）
U X 的な指標

11. 11
建築物
サービス
交通機関
情報（Web）
耳マーク

12. Webでは何を実現しているの？
12

13. 13
見えていない人

14. 聞こえていない人
14
テキスト 字幕

15. 15
Webから情報を得る
バリエーションの一つに過ぎない
をで操作し、
画面
音声
点字
見る
聞く
触る
マウス
タッチスクリーン
キーボード
スイッチ
音声
視線

16. 16
Tim Berners-Lee
（Wikipediaより）
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Webの力はその普遍性にある。
障害の有無に関わらず誰もがアクセスできることが本質的な姿なのだ。
”

17. Webに公開さえすれば伝わるの？
17

18. 「リーダブル」とは
18

19. 19
readable
〔手書きや印刷の文字が〕読める、判読できる
〔本や文章などが〕面白く読める、読みやすい、分かりやすい
〔プログラムのソースコードが〕読みやすい、理解しやすい
〔データなどが機械で〕読める、読み出せる
英辞郎 on the WEB：アルク より
”
”

20. 20https://webtan.impress.co.jp/e/2012/05/17/12727 より
プログラムにとって
読み易く理解し易い
人間にとって
読み易く理解し易い

21. 21
文書構造
<meta>
このHTMLはどういうデータか？
どう扱うべきか？
誰でも扱える
刺さるキャッチコピー
いい感じの
ビジュアルデザイン
読みやすい編集
レイアウト
https://webtan.impress.co.jp/e/2012/05/17/12727 より

22. 22
マシンリーダビリティに偏った状態

23. 23
利用者は障害者だけではない
マシンリーダブルにしただけでは
全ての障害者のWebアクセシビリティは向上しない
障害者 ≠ 全盲の視覚障害者

24. 24
ヒューマンリーダビリティに偏った状態

25. 25
利用者は健常者だけではない
ヒューマンリーダブルにしただけでは
全ての健常者のWebアクセシビリティは向上しない

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 岡山をどうしたいのか？
32

33. 33

34. 34
コストに見合わない。
アクセシビリティって、覚えても実際の案
件で求められないから、使ったことない。
自治体案件やらないから関係なくね？

35. ホントにそうなのか？
35

36. 36

37. 37www.city.okayama.jp/okayama/okayama_t00070.html より

38. 一般企業は？
38

39. 39https://waic.jp/report/survey-corporations-201702/ より

40. 40https://waic.jp/report/survey-corporations-201702/ より

41. 41Google検索結果画面より

42. 岡山の企業は出てこない...
42

43. じゃ、案件を作ろう！
43

44. 何をどうすれば案件になる？
44

45. 45
環境選定／構築
意思決定
予算編成
ビジュアルデザイン
コピーライト
発注／決済者
サーバー技術者
ディレクター
原稿制作者
デザイナー
（営業）
PM チーム／WBS／要件定義
調査／分析／ルール策定
実装担当者 マークアップ

46. 46
環境選定／構築 ： 情報 △
意思決定 ： 情報 ×？
予算編成 ： 情報 ×？
ビジュアルデザイン ： 情報 ◯
コピーライト ： 情報 △
発注／決済者
サーバー技術者
ディレクター
原稿制作者
デザイナー
（営業）
PM チーム／WBS／要件定義 ： 情報 ×？
調査／分析／ルール策定 ： 情報 △
実装担当者 マークアップ ： 情報 ◯
あくまで個人の感想です

47. 47www.optic.or.jp/seo/ より

48. 努力が報われる世の中（大げさ）にしたい。
48

49. そんな岡山にしたい。（照
49

50. 体験：リーダブルではない世界
50

51. 51
bit.ly/2yhFxvH
Google Chromeに機能拡張プログラムを追加事前準備
bit.ly/2AN4Atm

52. 画像から情報が得られない
52

53. 53
1. 岡山県サイトにアクセス
www.pref.okayama.jp/
2. トップページを上から下まで、ざっと目を通す
3. Web Developerで画像を非表示にする

54. Q :「SEA TO SUMMIT 2018」バナーはどこ？
54

55. 55岡山県ホームページ トップページ より

56. Q : 「移住情報」ボタンはどこ？
56

57. 57岡山県ホームページ トップページ より

58. 58岡山県ホームページ トップページ より

59. 59岡山県ホームページ トップページ より

60. 1. Images タブ > Disable Images チェックを外して再読み込み
2. Web Developer で代替テキストを表示
60

61. 画面が見えにくい
61

62. 62
【 弱視 】low vision
• 視機能が弱く、矯正もできない状態
• 「見えにくい」視覚障害のこと
• 見えにくさは人それぞれで、症状はバラバラ
• 白杖を使うので、全盲と間違われやすい

63. じゃ、どうやってPCの画面を見てるの？
63

64. 64
伊敷さん（弱視）のPC利用シーン bit.ly/2phJek8

65. マネしてやってみよう。
65

66. • システム環境設定 > アクセシビリティ > ズーム機能
「キーボードショートカットを使ってズーム」を✅
拡大：option + command + ^
縮小：option + command + -
• ディスプレイ > カラーを反転
• 拡大鏡
拡大：Windowsキー + +
縮小：Windowsキー + -
• コンピューターの簡単操作 > ハイコントラスト
66
Mac
Windows

67. 67www.pref.okayama.jp/ より

68. Q : 県庁の駐車料金はいくら？
68

69. 69www.pref.okayama.jp/page/409090.html より

70. 他にも色々な見え方があるね。
70

71. • Blur：ぼやけ
• Contrast loss：光低感度
• Glare：光過敏
• Ghosting：ぶれ
• Snow：ノイズ
• Cloudiness：濁り／曇り
• Flutter：眼振
• Color deficiency：色覚特性（P／D／T／A型）
• Central：中心暗点（加齢黄斑変性）
• Peripheral：視野狭窄（緑内障／網膜色素変性症）
• Corner：網膜剥離
• Side：半盲
• Large spots：糖尿病性網膜症
• Floaters：飛蚊症
71
NoCoffee

72. 72
Protanopia
P型（1型）
赤色が見えない
先天性色覚障害の約25％
色覚正常？者
Tritanopia
T型（3型）
青色が見えにくい
Deuteranopia
D型（2型）
緑色が見えない
先天性色覚障害の約75％

73. 男性：23人に1人／女性：642人に1人
73バリアフリー：色覚障害者の移動等円滑化に関する調査研究 - 国土交通省 より

74. 74
1. 表示中の画面で「Protanopia」に設定
2. 色が変わったのを確認して
3. 下記ページにアクセス
bit.ly/2PkF0C1

75. Q : 野菜は何種類？
75

76. 76https://www.pakutaso.com/20180245032post-15041.html より

77. 77https://www.pakutaso.com/20180227032post-15035.html より

78. 78
1. 表示中の画面で「Tritanopia」に設定
2. 色が変わったのを確認して
3. 下記ページにアクセス
bit.ly/2HWTK7Q

79. Q : 益野西線は地図上のどれ？
79

80. 80https://bit.ly/2HWTK7Q より

81. 81Photoshop で色域指定で選んだところ

82. フォーカスインジケータについて
82

83. 83https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html より

84. 84https://waic.jp/docs/WCAG20/Overview.html#operable より

85. 85https://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms より

86. 86
@SawadaStdDesign
また来週！