Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

岡山をリーダブルな世界に

308 views

Published on

2018-09-03(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/09/03」でのスライドです。

Published in: Internet
  • Be the first to comment

岡山をリーダブルな世界に

  1. 1. 岡山をリーダブルな世界に リーダブルな夜 on 20180903
  2. 2. 自己紹介 3
  3. 3. 4 澤田 望 パーマ メガネ (老眼) ガリガリ 中年講師
  4. 4. 5 岡山で独立(2014)  Webアクセシビリティ検証/ イラスト制作/ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン (~2013)  サイトデザイン監修/ Webアクセシビリティ対応 WAIC  (2011~) (ウェブアクセシビリティ基盤委員会) コラムを担当
  5. 5. 本日の目標 6
  6. 6. 「リーダブル」とはどういうことなのか? オッサン達は岡山をどうしたいのか? 7
  7. 7. Webアクセシビリティとは 8
  8. 8. 9 abilityaccess accessibility アクセスする 入手する たどり着く + = Webコンテンツに対するアクセスのしやすさ 能力 技量 度合い アクセスできる度合い たどり着けるかどうか
  9. 9. 10 ユーザビリティ 使い易いか/使い難いか の度合い 対象:利用できる人(使えることが前提) アクセシビリティ 使えるか/使えないか の度合い 対象:全ての人や機械(前提なし) U X 的な指標
  10. 10. 11 建築物 サービス 交通機関 情報(Web) 耳マーク
  11. 11. Webでは何を実現しているの? 12
  12. 12. 13 見えていない人
  13. 13. 聞こえていない人 14 テキスト 字幕
  14. 14. 15 Webから情報を得る バリエーションの一つに過ぎない をで操作し、 画面 音声 点字 見る 聞く 触る マウス       タッチスクリーン      キーボード      スイッチ 音声 視線
  15. 15. 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の力はその普遍性にある。 障害の有無に関わらず誰もがアクセスできることが本質的な姿なのだ。 ”
  16. 16. Webに公開さえすれば伝わるの? 17
  17. 17. 「リーダブル」とは 18
  18. 18. 19 readable 〔手書きや印刷の文字が〕読める、判読できる 〔本や文章などが〕面白く読める、読みやすい、分かりやすい 〔プログラムのソースコードが〕読みやすい、理解しやすい 〔データなどが機械で〕読める、読み出せる 英辞郎 on the WEB:アルク より ” ”
  19. 19. 20https://webtan.impress.co.jp/e/2012/05/17/12727 より プログラムにとって 読み易く理解し易い 人間にとって 読み易く理解し易い
  20. 20. 21 文書構造 <meta> このHTMLはどういうデータか? どう扱うべきか? 誰でも扱える 刺さるキャッチコピー いい感じの ビジュアルデザイン 読みやすい編集 レイアウト https://webtan.impress.co.jp/e/2012/05/17/12727 より
  21. 21. 22 マシンリーダビリティに偏った状態
  22. 22. 23 利用者は障害者だけではない マシンリーダブルにしただけでは 全ての障害者のWebアクセシビリティは向上しない 障害者 ≠ 全盲の視覚障害者
  23. 23. 24 ヒューマンリーダビリティに偏った状態
  24. 24. 25 利用者は健常者だけではない ヒューマンリーダブルにしただけでは 全ての健常者のWebアクセシビリティは向上しない
  25. 25. 26
  26. 26. 27
  27. 27. 28
  28. 28. 29
  29. 29. 30
  30. 30. 31
  31. 31. 岡山をどうしたいのか? 32
  32. 32. 33
  33. 33. 34 コストに見合わない。 アクセシビリティって、覚えても実際の案 件で求められないから、使ったことない。 自治体案件やらないから関係なくね?
  34. 34. ホントにそうなのか? 35
  35. 35. 36
  36. 36. 37www.city.okayama.jp/okayama/okayama_t00070.html より
  37. 37. 一般企業は? 38
  38. 38. 39https://waic.jp/report/survey-corporations-201702/ より
  39. 39. 40https://waic.jp/report/survey-corporations-201702/ より
  40. 40. 41Google検索結果画面より
  41. 41. 岡山の企業は出てこない... 42
  42. 42. じゃ、案件を作ろう! 43
  43. 43. 何をどうすれば案件になる? 44
  44. 44. 45 環境選定/構築 意思決定 予算編成 ビジュアルデザイン コピーライト 発注/決済者 サーバー技術者 ディレクター 原稿制作者 デザイナー (営業) PM チーム/WBS/要件定義 調査/分析/ルール策定 実装担当者 マークアップ
  45. 45. 46 環境選定/構築 : 情報 △ 意思決定 : 情報 ×? 予算編成 : 情報 ×? ビジュアルデザイン : 情報 ◯ コピーライト : 情報 △ 発注/決済者 サーバー技術者 ディレクター 原稿制作者 デザイナー (営業) PM チーム/WBS/要件定義 : 情報 ×? 調査/分析/ルール策定 : 情報 △ 実装担当者 マークアップ : 情報 ◯ あくまで個人の感想です
  46. 46. 47www.optic.or.jp/seo/ より
  47. 47. 努力が報われる世の中(大げさ)にしたい。 48
  48. 48. そんな岡山にしたい。(照 49
  49. 49. 体験:リーダブルではない世界 50
  50. 50. 51 bit.ly/2yhFxvH Google Chromeに機能拡張プログラムを追加事前準備 bit.ly/2AN4Atm
  51. 51. 画像から情報が得られない 52
  52. 52. 53 1. 岡山県サイトにアクセス www.pref.okayama.jp/ 2. トップページを上から下まで、ざっと目を通す 3. Web Developerで画像を非表示にする
  53. 53. Q :「SEA TO SUMMIT 2018」バナーはどこ? 54
  54. 54. 55岡山県ホームページ トップページ より
  55. 55. Q : 「移住情報」ボタンはどこ? 56
  56. 56. 57岡山県ホームページ トップページ より
  57. 57. 58岡山県ホームページ トップページ より
  58. 58. 59岡山県ホームページ トップページ より
  59. 59. 1. Images タブ > Disable Images チェックを外して再読み込み 2. Web Developer で代替テキストを表示 60
  60. 60. 画面が見えにくい 61
  61. 61. 62 【 弱視 】low vision • 視機能が弱く、矯正もできない状態 • 「見えにくい」視覚障害のこと • 見えにくさは人それぞれで、症状はバラバラ • 白杖を使うので、全盲と間違われやすい
  62. 62. じゃ、どうやってPCの画面を見てるの? 63
  63. 63. 64 伊敷さん(弱視)のPC利用シーン bit.ly/2phJek8
  64. 64. マネしてやってみよう。 65
  65. 65. • システム環境設定 > アクセシビリティ > ズーム機能 
 「キーボードショートカットを使ってズーム」を✅
 拡大:option + command + ^
 縮小:option + command + - • ディスプレイ > カラーを反転 • 拡大鏡
 拡大:Windowsキー + +
 縮小:Windowsキー + - • コンピューターの簡単操作 > ハイコントラスト 66 Mac Windows
  66. 66. 67www.pref.okayama.jp/ より
  67. 67. Q : 県庁の駐車料金はいくら? 68
  68. 68. 69www.pref.okayama.jp/page/409090.html より
  69. 69. 他にも色々な見え方があるね。 70
  70. 70. • Blur:ぼやけ • Contrast loss:光低感度 • Glare:光過敏 • Ghosting:ぶれ • Snow:ノイズ • Cloudiness:濁り/曇り • Flutter:眼振 • Color deficiency:色覚特性(P/D/T/A型) • Central:中心暗点(加齢黄斑変性) • Peripheral:視野狭窄(緑内障/網膜色素変性症) • Corner:網膜剥離 • Side:半盲 • Large spots:糖尿病性網膜症 • Floaters:飛蚊症 71 NoCoffee
  71. 71. 72 Protanopia P型(1型) 赤色が見えない 先天性色覚障害の約25% 色覚正常?者 Tritanopia T型(3型) 青色が見えにくい Deuteranopia D型(2型) 緑色が見えない 先天性色覚障害の約75%
  72. 72. 男性:23人に1人/女性:642人に1人 73バリアフリー:色覚障害者の移動等円滑化に関する調査研究 - 国土交通省 より
  73. 73. 74 1. 表示中の画面で「Protanopia」に設定 2. 色が変わったのを確認して 3. 下記ページにアクセス bit.ly/2PkF0C1
  74. 74. Q : 野菜は何種類? 75
  75. 75. 76https://www.pakutaso.com/20180245032post-15041.html より
  76. 76. 77https://www.pakutaso.com/20180227032post-15035.html より
  77. 77. 78 1. 表示中の画面で「Tritanopia」に設定 2. 色が変わったのを確認して 3. 下記ページにアクセス bit.ly/2HWTK7Q
  78. 78. Q : 益野西線は地図上のどれ? 79
  79. 79. 80https://bit.ly/2HWTK7Q より
  80. 80. 81Photoshop で色域指定で選んだところ
  81. 81. フォーカスインジケータについて 82
  82. 82. 83https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html より
  83. 83. 84https://waic.jp/docs/WCAG20/Overview.html#operable より
  84. 84. 85https://waic.jp/docs/WCAG20/Overview.html#navigation-mechanisms より
  85. 85. 86 @SawadaStdDesign また来週!

×