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アクセシビリティ(アクセシビリティの祭典バージョン)

994 views

Published on

2017年5月18日開催のイベント「アクセシビリティの祭典」で使用したスライドです。

Published in: Internet
  • Be the first to comment

あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)

  1. 1. あなたの価値を高める  Webアクセシビリティ 2017.05.18 | アクセシビリティの祭典  Rikiya Ihara | BA
  2. 2. 伊原力也 @magi1125  BA(ビジネス・アーキテクツ)  ユーザー調査、情報設計、UIデザイン  ウェブアクセシビリティ基盤委員会 WG1委員  HCD‑Net 評議委員、認定人間中心設計専門家
  3. 3. 本日プレゼント!  イベント限定の特別定価で販売! 会場後方の試し読みコーナーをチェック!
  4. 4. 本日のターゲット アクセシビリティが気になるWeb制作者  そういったチームメンバーを後押ししたい人  ちょっと変わった語り口を知りたい玄人筋の人
  5. 5. 現状認識
  6. 6. http://wd‑flat.com/blog/internet/enquete2016/
  7. 7. Q:アクセシビリティについて 仕様書を見てはいないが  感覚的に意識している  (100人、51%)
  8. 8. QWCAG 2.0  JIS X 8341‑3
  9. 9. 24位:アクセシブルなサイト構築    3位:優れたユーザビリティ設計  2位:優れたインターフェイス/ナビゲーション設計  1位:JavaScript Q:近いうちに習得したいものは?
  10. 10. Web制作者がアクセシビリティに  取り組む価値とは?
  11. 11. access + ability  アクセスできる度合い
  12. 12. Intertwingled  http://intertwingled.org/jp/
  13. 13. Evaluation method of UX “The User Experience Honeycomb”  http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
  14. 14. Qアクセシビリティに  なんらか取り組んでいる?
  15. 15. Aこの場にいる全員が  実は取り組んでいる
  16. 16. Webに載るだけで  圧倒的にアクセシブル
  17. 17. お店 → Web  新聞 → Web  学校 → Web  業務 → Web
  18. 18. robustness findability portability usability shareability hackability 頑健:存在が維持される 発見:特定できる、探し出せる 携帯:持ち運べる、呼び出せる 使用: 知覚・理解・操作、目的達成 共有: 誰かに渡せる、共有できる 改変: 加工できる、再利用できる
  19. 19. ユーザは、  わたしたちの製品にアクセスすることで  何にアクセスしようとしているのか? あなたの言葉で伝えるWebアクセシビリティ  http://www.slideshare.net/KobayashiDaisuke1/web‑59111913
  20. 20. 製品・サービス 価値 Web
  21. 21. アクセシビリティ  =特殊な対応?
  22. 22. アクセシビリティ  =障害者・高齢者対応?
  23. 23. 腱鞘炎でマウスが持てない Bluetoothイヤホンが電池切れ 子どもにメガネを壊された
  24. 24. アクセシビリティ  =使えるかどうか? 使いものになるか使えるか accessible usable
  25. 25. remote control pig pile  https://www.flickr.com/photos/redjar/136216456/
  26. 26. ISO 9241‑11 のユーザビリティ定義 特定の目的を達成するために、  特定の利用者が、特定の利用状況で、  有効性、効率性、そして満足とともに  ある製品を利用することができる度合い。
  27. 27. 様々な能力を持つ幅広い層の人々に対する、  製品、サービス、環境または施設のユーザビリティ。 ISO 9241‑20 のアクセシビリティ定義
  28. 28. ユーザビリティ アクセシビリティ Use Use ある状況での使える度 使える度合いの幅広さ
  29. 29. アクセシビリティ  =ユーザビリティの幅広さ
  30. 30. Webアクセシビリティの解剖
  31. 31. 素人とは違う、Webプロフェッショナルの  仕事としてのWebコンテンツ開発を考えてみた  http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727
  32. 32. マシンリーダブル プログラムが解釈できるか  様々な形に変換して幅広く使えるようにする  Webならではのアプローチ
  33. 33. ヒューマンリーダブル 人の目で見やすいか、わかりやすいか  ひとつの表現で幅広く使えるようにする  物理的な製品のユニバーサルデザインに近い
  34. 34. WCAG 2.0 の  ヒューマンリーダブル関連
  35. 35. コンテンツを、利用者にとって見やすく、聞きやすいものにすること。  これには、前景と背景を区別することも含む。 1.4 判別可能 1. 知覚可能
  36. 36. 利用者がナビゲートしたり、コンテンツを探し出したり、  現在位置を確認したりすることを手助けする手段を提供すること。 2.4 ナビゲーション可能 発作を引き起こすようなコンテンツを設計しないこと。 2.3 発作の防止 利用者がコンテンツを読み、使用するために十分な時間を提供すること。 2.2 十分な時間 2: 操作可能
  37. 37. テキストのコンテンツを読みやすく理解可能にすること。 ウェブページの表示や挙動を予測可能にすること。 利用者の間違いを防ぎ、修正を支援すること。 3.1 読みやすさ 3.2 予測可能 3.3 入力支援 3: 理解可能
  38. 38. Web Content Accessibility Guidelines (WCAG) 2.0  イントロダクション: しばしば利用者全般の  ユーザビリティを向上させる。
  39. 39. 幅広い状況でのヒューマンリーダビリティ  ≒モバイル、マルチデバイス
  40. 40. https://material.google.com/
  41. 41. https://developer.apple.com/ios/human‑interface‑guidelines/overview/design‑principles/
  42. 42. モバイルの利用状況から来るデザインヒント 必要十分な表現にとどめる  チラ見しやすいようにデザインする  階層を深くしない  自然な形で接点を見せる  途中で操作を止めても同じことができる  時間軸を使って情報を整理する
  43. 43. http://www.slideshare.net/rikiha/mobile‑accessibility‑64942570
  44. 44. https://www.w3.org/TR/WCAG21/
  45. 45. http://website‑usability.info/2017/03/entry_170303.html
  46. 46. 特定状況でのユーザビリティ  =いわゆるユーザビリティ UI
  47. 47. UI 幅広い状況でのヒューマンリーダビリティ  ≒アクセシビリティ 特定状況でのユーザビリティ  =いわゆるユーザビリティ
  48. 48. 可能性をさらに広げる  マシンリーダビリティ
  49. 49. ヒューマンリーダブル ひとつのものでは  対応範囲に限界がある マシンリーダブル 形を変えることで  様々な状況に対応できる 実はWCAG 2.0ではレベルA、必ず満たすべきとされている
  50. 50. https://calil.jp/
  51. 51. https://support.google.com/webmasters/answer/70897?hl=ja
  52. 52. http://www.softbank.jp/mobile/service/visually‑support‑iphone/
  53. 53. マシンとヒューマンの架け橋は  「テキスト」
  54. 54. 伝わる可能性が一番高いUI「テキスト」 Webコンテンツのほとんどは「テキスト」  IAの中心にあるのは「テキスト」  検索に使うのも「テキスト」  書き込むのも「テキスト」
  55. 55. http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/
  56. 56. The Final Hamburger A/B Test http://sitesforprofit.com/menu‑eats‑hamburger
  57. 57. 設計・デザインの段階でテキストを意識 わかりやすく、構造を持ったテキストを  「ヒューマンリーダブル」な形で出す
  58. 58. マシンリーダブルは  テキストがあればこそ テキストが無ければマークアップはできない(!)  構造を持つテキストあれば、マークアップは難しくない  title, h1~h6, ul, ol, a, form, label   nav, article, section, aside, header, footer, main
  59. 59. 可能性を保つ  マシン  リーダビリティ 網を張る  ヒューマン  リーダビリティ 狙い撃つ  ユーザビリティ Web
  60. 60. アクセシビリティ  =売りにつながらない?
  61. 61. 遷移・回遊 コンバージョン 利用開始 流入 理解 申込 母数へのアプローチ デザイン側での唯一のアプローチ手段  65歳以上の利用が16.4%(1,653万人)  障害者の利用率は高い(82.7~93.4%)  流入を増やす?アクセシブルにする?
  62. 62. 遷移・回遊 コンバージョン 利用開始 流入 理解 申込 各段階へのアプローチ WCAG2.0 に含まれる内容: ナビゲーションのガイドライン ライティングのガイドライン フォーム最適化のガイドライン
  63. 63. 流入 例:ナビゲーション
  64. 64. 流入 例:ナビゲーション
  65. 65. 流入 例:ライティング
  66. 66. 流入 例:ライティング
  67. 67. 流入 例:フォーム最適化
  68. 68. 流入 例:フォーム最適化
  69. 69. アクセシビリティ  =売りにつながる
  70. 70. アクセシビリティ  =コストが増える?
  71. 71. http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada
  72. 72. ルールを要する案件にアクセシビリティを絡める
  73. 73. ルールを要する案件にアクセシビリティを絡める
  74. 74. ルールを要する案件にアクセシビリティを絡める 標準のガイドラインがあることで:  理由付けがしやすい  CMS選定の基準となる  対応後に評価しやすい  発展させる際に立ち戻りやすい http://www.yasuhisa.com/could/article/design‑system‑language/
  75. 75. アクセシビリティ  =利益につながる
  76. 76. まとめ まずWebに載せるだけでアクセシブル  アクセシビリティ=ユーザビリティの幅広さ  アクセシビリティ=ヒューマン向けとマシン向け  ヒューマン向けはマルチデバイス対応との重なり大  マシンリーダブルなら形も変えて届けられる  ヒューマンとマシンの架け橋はテキスト  アクセシビリティはビジネス上の利益につながる
  77. 77. 僕なら「ウェブ制作の教科書」とか「ウェブ制作のすべて」とつける  すべてのウェブサイト制作者のための「ウェブサイト構築」の教科書  土台の揺らぐことのないウェブサイトを構築するチャート  本書はWebデザインの「型」の説明をしてくれています  実は、ユニバーサルなユーザビリティの解説本 Webの本質は  アクセシビリティ
  78. 78. さあ、はじめよう!
  79. 79. ありがとうございました @magi1125  facebook.com/rikiya.ihara

×