freeeのアクセシビリティ、いまとこれから

Transcript

1. 　freeeのアクセシビリティ、 いまとこれから 伊原 力也 2018.02.11｜Inside Frontend #2 (Seminar B) 1
2. 伊原 力也 2 • freee プロダクト戦略 IA/UX（2017年10月〜） • HCD-Net 評議委員 / 認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • 国際ユニヴァーサルデザイン協議会 移動空間研究部会 副主査
3. Amazonで「アクセシビリティ」と検索！ 3
4. 4 Amazonで「インクルーシブHTML」と検索！
6. freee 「スモールビジネスに携わるすべての人が 　創造的な活動にフォーカスできるよう」 • クラウドで開業/会社設立、会計、人事労務、マイナンバー… • バックオフィスを一気通貫して効率化していく 6
7. 7 + Accessibility
8. freeeとアクセシビリティと私 • 「できたらやること」感が強いアクセシビリティ • アクセシビリティでビジネスに貢献することにトライしたい • freeeはアクセシビリティと相性がいい製品のはず ◦ どんな仕事にも必要、Webが主戦場、扱うのはテキスト、手堅いUI • IA / UX / UI / A11y あたりをやる前提で入社 8
9. 　freeeのアクセシビリティ、 いまの意識 9
10. 10 https://dentsu-ho.com/articles/3122
11. 11 https://dentsu-ho.com/articles/3122 いま A11Y A11Y A11Y A11Y A11Y A11Y A11Y
12. 12 最初に行ったこと
13. 13 https://slack-files.com/T097LSLJK-F8AGTE44D-d0b2edda82
16. 16 http://developers.freee.co.jp/entry/japan-accessibility-conf-vol1
20. 20 自分ごとにしやすい ＝理解しやすい
21. 21 http://developers.freee.co.jp/entry/keyboards-2017
22. 22 https://www.microsoft.com/ja-jp/surface/devices/surface-book-2/overview
23. 23 http://www.hpp-c.jp/mud.html
24. 24 http://developers.freee.co.jp/entry/chatbot_support | https://keiei.freee.co.jp/2017/08/22/communication-of-barrier/
25. 25 アクセシビリティの連想
26. 26 https://www.apple.com/jp/accessibility/iphone/vision/
27. 27 http://developers.freee.co.jp/entry/freee-accounting-voice-control-with-ifttt-and-google-spreadsheet
28. 28 https://twitter.com/mako_yukinari/status/958864046261813252
29. 　freeeのアクセシビリティ、 いまのサービス 29
30. 30 多数のサイト・アプリ • Webサイト ◦ 製品系：公式サイト、ヘルプ、freeeカード、開業応援パック ◦ 会社系：コーポレート、採用ブログ、開発者ブログ ◦ メディア：パラキャリ、経営ハッカー • アプリケーション ◦ Webアプリ：会計 freee、申告 freee、人事労務 freee、 開業 freee、会社設立 freee、マイナンバー管理 freee ◦ iOS/Androidアプリ：会計ソフト freee、freee for Team
31. 31 Webサイトのチェック
32. 32 https://www.w3.org/WAI/eval/preliminary
35. 35 Webサイトの課題 • マークアップの問題は軽微（意味不明にはならない） • 画像や動画の代替テキスト • 水色テキストのコントラスト • フォーム系のエラー表示 • この傾向は他サイトもおおむね同じ
36. 36 カラのi要素
37. 37 画像にaltがない
38. 38 画像にaltがない
39. 39 エラーを読み上げない
40. 40 アプリケーションのチェック
41. 中根さんにインタビュー 41 • アクセシビリティの専門家 • 全盲、スクリーンリーダーを利用 • 4年前からfreeeユーザー
42. インタビュー結果 • 総評 ◦ 機能は優れている、自分たちこそが使いたいもの ◦ しかし、現状ではかなり試行錯誤しないと使えない • 課題 ◦ 読み上げない場合あり：アイコンにラベルが無い ◦ 関連付かない場合あり：ラベルが入力項目と紐付いていない ◦ 先に進めない場合あり：ボタンが押せない 42
43. 43 カラのi要素
44. 44 divボタン
45. 45 for属性のないlabel
46. 46 複合的な課題 クリッカブルなtr要素、ラベル未連携、サジェストのARIA未対応, outline:none 等
47. iOS版に切り替えつつ利用 • iOS版の特徴 ◦ 機能が絞られている、画面内要素が絞られている ◦ そのため全容を把握しやすく、比較的使える ◦ 押せないケースはあまりなく、おおむね先には進める • 課題 ◦ たまに読み上げない：アイコンにラベルが無い ◦ たまに関連付かない：ラベルが入力項目と紐付いていない ◦ たまに操作しづらい：フォーカス位置が想定と違うケースあり 47
49. 49 インタビュー所感：20:80の法則ありそう • よく使う機能、よく遭遇するコンポーネント、 発生する問題のパターンは、いずれも限られている • 課題を絞って対策すれば「ひとまず使える」状況は訪れるのでは
50. 50 https://havelog.ayumusato.com/develop/a11y/e718-a11y_atonose_sakusaku.html
51. 51 https://havelog.ayumusato.com/develop/a11y/e710-ios_a11y_guidelines.html.html
52. 　freeeのアクセシビリティ、 これからのサービス 52
53. 53 Webサイトのこれから • 有志でEasy Checksの和訳開始 • 各Webマスターがチェックしていく流れを作る • アクセシビリティ方針策定も視野に入れたいが、まずは重要なところから • ヘルプは利用時の命綱なので、先行していく方向で検討
55. 55 https://www.slideshare.net/KobayashiDaisuke1/ss-77124282
56. 56 アプリケーションのこれから 新しく作る・機能追加する場合 • UI検討時のアクセシビリティ視点でのレビュー • 既に整備を開始しているコンポーネントの適用 • コンポーネントの拡充時にCI • 実際のマークアップサンプルの整備
60. 60 アプリケーションのこれから 既存のUIを修正する場合 • 課題を挙げるバックログの運用開始 ◦ アクセシビリティ関連のPRが出始めた • チェックプロセスの整備 ◦ いきなりCIだと真っ赤でマージできなさそう ◦ まずは水際で機械チェック→人間チェックか
63. 　freeeのアクセシビリティ、 これからの意識 63
64. 64 既存のUIの修正に向き合う • 機能追加によるユーティリティ向上 ◦ 業務を移せるケースが増える、 売上に直結、因果を示しやすい • UIの修正によるユーザビリティ向上 ◦ 効果・効率・満足度が上がる、 継続や推奨意向に影響、因果を示しにくい • UXメトリクスの必要性
65. 65 アクセシビリティの必要性に向き合う • 個人の正義だけに頼らず、目標と成果の明示が必要そう • しかし、それはfreeeにおいては十分可能そう ◦ 障害者や高齢者の就労人口はかなりの人数 ◦ バックオフィスはすべての業務に必要 ◦ かなりの割合でPCやスマホを利用 ◦ サブスクリプションモデルとして十分ペイするはず（推定中）
66. 66 http://www.mofa.go.jp/mofaj/files/000171086.pdf
67. 67 http://www.mhlw.go.jp/file/05-Shingikai-12601000-Seisakutoukatsukan-Sanjikanshitsu_Shakaihoshoutantou/0000118215.pdf
68. 68 http://nichimou.org/welfare/160617-jouhou-1/
69. 69 http://www.soumu.go.jp/iicp/chousakenkyu/data/research/survey/telecom/2012/disabilities2012.pdf
70. 70 http://www.ieice.org/ken/paper/20171019DbX1/
71. 71 必要とする当事者に向き合う • ここ数ヶ月の活動で最大のインパクトは中根さんインタビュー • 「この人が使えるようにできないか」 当事者の声は、数多の理由より強く響く • 新しい気付きの源泉にもなる、インクルーシブデザイン • 中根さんが立ち上げた「JBICT」にぜひ問い合わせを https://jbict.net/
72. 72 https://accsell.net/info/accsell-meetup-013.html
73. 　freeeのアクセシビリティ、 いまとこれから 73
74. 74 https://dentsu-ho.com/articles/3122 いま A11Y A11Y A11Y A11Y A11Y A11Y A11Y
75. 75 https://dentsu-ho.com/articles/3122 A11Y A11Y A11Y A11Y A11Y A11Y A11Y これから
77. 77 + Accessibility Blue Ocean
78. 78 エンジニア・UXデザイナー積極採用中！
79. ありがとうございました @magi1125 79