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.

Webアクセシビリティ 今ならどうするの?

584 views

Published on

2017-12-2(土)に高知市文化プラザかるぽーとにて行われた「WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」」でのスライドです。

Published in: Internet
  • Be the first to comment

Webアクセシビリティ 今ならどうするの?

  1. 1. Webアクセシビリティ 今ならどうするの? 2017年12月2日
  2. 2. 自己紹介 3
  3. 3. 4 澤田 望
  4. 4. 5 中年男性 パーマ メガネ(老眼) ガリガリ
  5. 5. 岡山で独立(2014) キヤノン (~2013) 6 • Webアクセシビリティ検証 • イラスト制作 • 岡山情報ビジネス学院 非常勤講師 • ウェブアクセシビリティ基盤委員会 などなど • サイトデザイン監修 • Webアクセシビリティ対応
  6. 6. 7 Webアクセシビリティに  ついてのコラムを担当。 https://www.mdn.co.jp/di/book/3217203008/より
  7. 7. 岡山旅ねっとより
  8. 8. 岡山旅ねっとより 昭和42年(1967年)3月18日、岡山 県立盲学校の生徒が登下校の際に利用して いた当時の国道2号(現国道250号)原尾 島交差点の横断歩道に230枚の点字ブロッ クが敷設されたのです。これがわが国初の ことで、その後各地に徐々に広まって行き ました。 ” ”
  9. 9. 今日の目標 10
  10. 10. 11 Webアクセシビリティって、 2017年の今なら、 どう取り組んでおけばいいの? ココの解決
  11. 11. 「Webデザイン」って何するの? 12
  12. 12. 13https://kotobank.jp/word/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-100877より
  13. 13. 14https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3より
  14. 14. 15 問題 is 何?
  15. 15. 16 目的を達成するための課題。
  16. 16. 17 つまり「Webデザイン」とは?
  17. 17. 18 Webサイトの目的を達成するために 必要な状態(ビジュアルを含む)を実現すること
  18. 18. Webサイトを作る意味ってなんだろう? 19
  19. 19. 20 • 商品を買ってもらいたい • サービスを利用してもらいたい • 会社の株を買ってもらいたい • 社員になってもらいたい ※広告は除外 Webサイトの目的(の例)
  20. 20. 21 • 商品を気に入ってもらいたい • サービスを気に入ってもらいたい • 会社の株を気に入ってもらいたい • 社員を気に入ってもらいたい 目的を達成するには?
  21. 21. 22 • 商品を知ってもらいたい • サービスを知ってもらいたい • 会社の株を知ってもらいたい • 社員を知ってもらいたい 目的を達成するには? 多くの人に情報を届けたい
  22. 22. 23 多くの人に情報を届けたい 目的を達成するには? アクセシブルな状態 多くの人にアクセスしてもらいたい アクセスできる状態にしておく必要
  23. 23. 24 アクセシビリティを考えることが Webサイトの目的に直結している
  24. 24. Webアクセシビリティ、 25 これからどうなるの?
  25. 25. 26 ぞくぞく登場!
  26. 26. 27 「スマートスピーカー」の画像検索結果より
  27. 27. 28 ビックカメラ岡山店
  28. 28. 29Google検索結果ページ より
  29. 29. 30 音声による情報伝達が、より身近に
  30. 30. 31 10年ぶりのバージョンアップ。
  31. 31. 32https://www.w3.org/TR/WCAG21/ より
  32. 32. 33https://w3c.github.io/wcag21/guidelines/ より
  33. 33. 34 • WCAG 2.0勧告から10年ぶりの更新 • 勧告目標:2018年半ば • WCAG 2.0の内容は変更予定なし • ルールの追加:21 → 今までよりも条件が厳しくなる WCAG 2.1の概要(2017/11時点)
  34. 34. 35 • 認知障害や弱視の利用者を想定したルール追加 • モバイルや音声入力を想定したルール追加 • 拡大表示:2方向へのスクロールなしで400% • コントラスト比:図形やUIコンポーネントにも • 操作や理解の妨げとなるインタラクションの抑制 • タッチする要素:44 x 44 CSSpx以上 • デバイスのセンサーや向きだけに依存しない WCAG 2.1の主な変更点(2017/11時点)
  35. 35. 36 = WCAGがバージョンアップする影響
  36. 36. 37 • JIS X 8341-3の更新間隔:約6年 • 次回更新:2022年?? WCAGを採用しているグローバルな企業 →早めに影響あるかも WCAGがバージョンアップする影響
  37. 37. 38 利用者の現状に見合った  内容になるってことね。
  38. 38. じゃ、今ならどうするの? 39
  39. 39. 40 「孤高のサイト」にならないよう 注意しましょう。
  40. 40. 41 50点のサイトを100点に高めるよりも
  41. 41. 42 50点のサイトをもっとたくさん作りましょう
  42. 42. 43https://www.amazon.co.jp/dp/4862463878/ より
  43. 43. 44 Webに載るだけで 圧倒的にアクセシブル freee 伊原氏
  44. 44. 45 情報は溜め込んでいてもダメ。 利用者に届かないと意味がない。
  45. 45. 46 JIS X 8341-3 関連文書の翻訳を どんどん更新しています。
  46. 46. 47WCAG 2.0 解説書(WAIC) より
  47. 47. 48How to Meet WCAG 2.0(WAIC) より
  48. 48. 49 50点のサイトをもっとたくさん作りましょう
  49. 49. 50 じゃ、これから始めたいという方は?
  50. 50. 51 まずはサイトの現状認識から。
  51. 51. ページにたどり着けるか 52 アクセシビリティ・チェックの優先順位 コンテンツに たどり着けるか 迷わず 利用できるか 読んで理解できるか 操作可能 知覚可能 堅牢性 理解可能 UXの世界
  52. 52. 53 1. ページにたどり着けるか • 適切で固有のページタイトル •「403」「404」「500」「503」はNG • 適切なリンクラベル • コントラスト比が十分なナビゲーション色 (小さい文字4.5:1/大きい文字3.0:1)
  53. 53. • 適切な見出し • 代替コンテンツの用意(画像/音声/動画) • キーボード操作可能(見えるフォーカスインジケータ) • 200%まで文字サイズ拡大可能 54 2. コンテンツにたどり着けるか
  54. 54. 55 3. 読んで理解できるか • 正しい文書構造 • コントラスト比が十分なコンテンツ色 (小さい文字4.5:1/大きい文字3.0:1) • 使える入力フォーム(ラベル/必須項目/説明) • 理解できるテーブル(複雑さ/caption/見出し) • 感覚に頼らない表現(色/位置など) • 適切な内容の代替コンテンツ
  55. 55. 56 4. 迷わず利用できるか • メインコンテンツに移動できる(h要素) • コンテキストの変化を適切に伝える • 重複のない情報 (リンク画像の代替テキストとリンクテキストなど) • 的確なエラーメッセージ • オートスタートはNG
  56. 56. 57 実際にチェックしてみよう。
  57. 57. 58高知県庁ホームページ より
  58. 58. 59 アクセシビリティの PDCAサイクル PLAN DO CHECKACTION 評価改善 ウェブアクセシビリティ 方針 制作/運用
  59. 59. 60 焦らずのんびりやりましょう。
  60. 60. まとめ 61
  61. 61. 62 コンテンツそのもののアクセシビリティが より一層大切に
  62. 62. 63https://www.w3.org/TR/WCAG21/ より
  63. 63. ページにたどり着けるか 64 アクセシビリティ・チェックの優先順位 コンテンツに たどり着けるか 迷わず 利用できるか 読んで理解できるか 操作可能 知覚可能 堅牢性 理解可能 UXの世界
  64. 64. 65 アクセシビリティを考えることが Webサイトの目的に直結している
  65. 65. 66 Webサイトの目的は何だったのか もう一度考えてみよう
  66. 66. 67 ありがとうございました @SawadaStdDesign

×