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

Transcript

1. あなたの価値を高める Webアクセシビリティ 2017.11.11 / Japan Accessibility Conference vol.1 Rikiya Ihara / freee K.K.
2. 伊原 力也 @magi1125 freee IA/UX ウェブアクセシビリティ基盤委員会 WG1委員 HCD‑Net 評議委員、認定人間中心設計専門家
5. 本日の流れ アクセシビリティとは Webアクセシビリティの解剖 Webアクセシビリティの誤解 どこからはじめるか
6. アクセシビリティとは
7. Q アクセシビリティに なんらか取り組んでいる？
8. A この場にいる全員が 実は取り組んでいる
9. Webに載るだけで 圧倒的にアクセシブル
10. お店　→　Web 新聞　→　Web 学校　→　Web 業務　→　Web
11. robustness findability portability usability shareability hackability 頑健:存在が維持される 発見:特定できる、探し出せる 携帯:持ち運べる、呼び出せる 使用: 知覚・理解・操作、目的達成 共有: 誰かに渡せる、共有できる 改変: 加工できる、再利用できる
12. ユーザは、 わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか？ あなたの言葉で伝えるWebアクセシビリティ http://www.slideshare.net/KobayashiDaisuke1/web‑59111913
13. 製品・サービス 価値 Web
14. http://www.ric.co.jp/book/contents/pdfs/893_6_1.pdf
15. Intertwingled http://intertwingled.org/jp/
16. アクセシビリティ ＝使えるかどうか？ 使いものになるか 使えるか accessible usable
17. remote control pig pile https://www.flickr.com/photos/redjar/136216456/
18. ISO 9241‑11 のユーザビリティ定義 特定の目的を達成するために、 特定の利用者が、特定の利用状況で、 有効性、効率性、そして満足とともに ある製品を利用することができる度合い。
19. 様々な能力を持つ幅広い層の人々に対する、 製品、サービス、環境または施設のユーザビリティ。 ISO 9241‑20 のアクセシビリティ定義
20. ユーザビリティ アクセシビリティ Use Use ある状況での使える度 使える度合いの幅広さ
21. アクセシビリティ ＝障害者・高齢者対応？
22. 腱鞘炎でマウスが持てない Bluetoothイヤホンが電池切れ 子どもにメガネを壊された
23. Web Content Accessibility Guidelines (WCAG) 2.0 イントロダクション： しばしば利用者全般の ユーザビリティを向上させる。
24. アクセシビリティ ＝ユーザビリティの幅広さ
25. Webアクセシビリティの解剖
28. A‑2 アクセシビリティ・ガイドラインの歩き方（初心者編） 15:20 ‑ 16:00 / Room A もんど ／ 太田良典
29. 素人とは違う、Webプロフェッショナルの 仕事としてのWebコンテンツ開発を考えてみた http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727
30. ヒューマンリーダブル 人の目で見やすいか、わかりやすいか ひとつの表現で幅広く使えるようにする 物理的な製品のユニバーサルデザインに近い
31. コンテンツを、利用者にとって見やすく、聞きやすいものにすること。 これには、前景と背景を区別することも含む。 1.4 判別可能 1. 知覚可能
32. 利用者がナビゲートしたり、コンテンツを探し出したり、 現在位置を確認したりすることを手助けする手段を提供すること。 2.4 ナビゲーション可能 発作を引き起こすようなコンテンツを設計しないこと。 2.3 発作の防止 利用者がコンテンツを読み、使用するために十分な時間を提供すること。 2.2 十分な時間 2: 操作可能
33. テキストのコンテンツを読みやすく理解可能にすること。 ウェブページの表示や挙動を予測可能にすること。 利用者の間違いを防ぎ、修正を支援すること。 3.1 読みやすさ 3.2 予測可能 3.3 入力支援 3: 理解可能
34. モバイルの利用状況から来るデザインヒント 必要十分な表現にとどめる チラ見しやすいようにデザインする 階層を深くしない 自然な形で接点を見せる 途中で操作を止めても同じことができる 時間軸を使って情報を整理する
38. UI 幅広い状況でのヒューマンリーダビリティ ≒アクセシビリティ 特定状況でのユーザビリティ ＝いわゆるユーザビリティ
39. マシンリーダブル プログラムが解釈できるか 様々な形に変換して幅広く使えるようにする Webならではのアプローチ
40. ヒューマンリーダブル ひとつのものでは 対応範囲に限界がある マシンリーダブル WCAG 2.0 レベルA 必ず満たすべきもの
45. A‑3 アクセシビリティ検証ツールとしてのNVDA入門 16:20 ‑ 17:00 / Room A NVDA日本語チーム 西本卓也
48. ブラウザや支援技術で 状況に適した表現に変えられること Webアクセシビリティの重要なポイント
51. 最も多くの人に伝わる表現方法は「テキスト」 それをマークアップすると機械が解釈できるようになる 使い方に応じ、プログラムを通して変換可能になる これがWebアクセシビリティの根幹
52. 可能性を保つ マシン リーダビリティ 網を張る ヒューマン リーダビリティ 狙い撃つ ユーザビリティ Web
53. Webアクセシビリティの誤解
54. アクセシビリティ ＝売りにつながらない？
55. 遷移・回遊 コンバージョン 利用開始 流入 理解 申込 母数へのアプローチ デザイン側での唯一のアプローチ手段 65歳以上の利用が16.4％（1,653万人） 障害者の利用率は高い（82.7～93.4%） 流入を増やす？アクセシブルにする？
56. 遷移・回遊 コンバージョン 利用開始 流入 理解 申込 各段階へのアプローチ WCAG2.0 に含まれる内容： ナビゲーションのガイドライン ライティングのガイドライン フォーム最適化のガイドライン
57. 流入 例：ナビゲーション
58. 流入 例：テキストライティング
59. 流入 例：テキストライティング
60. 流入 例：フォーム最適化
61. アクセシビリティ ＝売りにつながる
62. アクセシビリティ ＝守りのイメージ？
65. https://calil.jp/
68. アクセシビリティ ＝攻めの一手
69. アクセシビリティ ＝コストが増える？
70. http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada
73. 個別対応が減る → コスト削減＆品質の安定 コンポーネント テンプレート 一貫性、再利用性 アクセシビリティ 幅広い環境に 全体最適化
76. アクセシビリティ ＝利益につながる
77. アクセシビリティ ＝いまは必要ない？
81. 各国で進む法整備 Section 508, ADA, ACAA EN 301 549 障害者差別禁止法 AODA
82. B‑3 アクセシビリティに対する WordPress の責任について 16:20 ‑ 17:00 / Room B 合同会社ロックロブスター 三好隆之
83. A‑4 日本最大級のトラフィックを操る企業を動かす障害当事者の声。 17:20 ‑ 18:00 / Room A ヤフー株式会社 中野信 ／ AccSell 中根雅文
84. B‑4 メディア事業でのアクセシビリティ展開事例・CAではこうやってます 17:20 ‑ 18:00 / Room B 株式会社サイバーエージェント 桝田草一・土岐真里奈
86. アクセシビリティ ＝はじめるなら今！
88. どこからはじめるか
89. マシンとヒューマンの架け橋は 「テキスト」
90. 伝わる可能性が一番高いUI「テキスト」 Webコンテンツのほとんどは「テキスト」 IAの中心にあるのは「テキスト」 検索に使うのも「テキスト」 書き込むのも「テキスト」
91. http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/
92. The Final Hamburger A/B Test http://sitesforprofit.com/menu‑eats‑hamburger
93. 設計・デザインの段階でテキストを意識 わかりやすく、構造を持ったテキストを 「ヒューマンリーダブル」な形で出す
94. マシンリーダブルは テキストがあればこそ テキストが無ければマークアップはできない（！） 構造を持つテキストあれば、マークアップは難しくない
95. WCAG2.0 レベルAでやるべきこと：3つ 1. テキストだけでわかるように書く 2. それを適切にマークアップする 3. 勝手に動かさない、チカチカさせない
96. 可能性を保つ マシン リーダビリティ 網を張る ヒューマン リーダビリティ 狙い撃つ ユーザビリティ Web
97. 一人でなくチームで取り組もう
98. 方針があれば、はじめからチームで取り組める
100. B‑2 チームで取り組む！アクセシビリティコーディング・デザイン 15:20 ‑ 16:00 / Room B サイボウズ株式会社 小林大輔 ／ Cocktailz 伊敷政英
101. おわりに
102. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Webのパワーは、その普遍性にある。 障害の有無に関係なく、誰もが使えることが、その本質である。 Webの本質はアクセシビリティ Tim Berners‑Lee, W3C Director and inventor of the World Wide Web
103. Q アクセシビリティに なんらか取り組んでいる？
104. A この場にいる全員が 実は取り組んでいる
105. さあ、次の一歩を踏み出そう！
106. ありがとうございました @magi1125 facebook.com/rikiya.ihara