Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

あなたの価値を高めるWebアクセシビリティ

7 856 vues

Publié le

2016年12月3日に開催されたWCAN 2016 Winterで使用したスライドです。

Publié dans : Internet
  • Soyez le premier à commenter

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

×