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

by Rikiya Ihara / magi

Slide 1

Slide 1 text

　freeeのアクセシビリティ、いまとこれから伊原力也 2018.02.11｜Inside Frontend #2 (Seminar B) 1

Slide 2

Slide 2 text

伊原力也 2 ● freee プロダクト戦略 IA/UX（2017年10月〜） ● HCD-Net 評議委員 / 認定人間中心設計専門家 ● ウェブアクセシビリティ基盤委員会 WG1委員 ● 国際ユニヴァーサルデザイン協議会移動空間研究部会副主査

Slide 3

Slide 3 text

Amazonで「アクセシビリティ」と検索！ 3

Slide 4

Slide 4 text

4 Amazonで「インクルーシブHTML」と検索！

Slide 5

Slide 5 text

Slide 6

Slide 6 text

freee 「スモールビジネスに携わるすべての人が　創造的な活動にフォーカスできるよう」 ● クラウドで開業/会社設立、会計、人事労務、マイナンバー… ● バックオフィスを一気通貫して効率化していく 6

Slide 7

Slide 7 text

7 + Accessibility

Slide 8

Slide 8 text

freeeとアクセシビリティと私 ● 「できたらやること」感が強いアクセシビリティ ● アクセシビリティでビジネスに貢献することにトライしたい ● freeeはアクセシビリティと相性がいい製品のはず ○ どんな仕事にも必要、Webが主戦場、扱うのはテキスト、手堅いUI ● IA / UX / UI / A11y あたりをやる前提で入社 8

Slide 9

Slide 9 text

　freeeのアクセシビリティ、いまの意識 9

Slide 10

Slide 10 text

10 https://dentsu-ho.com/articles/3122

Slide 11

Slide 11 text

11 https://dentsu-ho.com/articles/3122 いま A11Y A11Y A11Y A11Y A11Y A11Y A11Y

Slide 12

Slide 12 text

12 最初に行ったこと

Slide 13

Slide 13 text

13 https://slack-files.com/T097LSLJK-F8AGTE44D-d0b2edda82

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

16 http://developers.freee.co.jp/entry/japan-accessibility-conf-vol1

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

20 自分ごとにしやすい＝理解しやすい

Slide 21

Slide 21 text

21 http://developers.freee.co.jp/entry/keyboards-2017

Slide 22

Slide 22 text

22 https://www.microsoft.com/ja-jp/surface/devices/surface-book-2/overview

Slide 23

Slide 23 text

23 http://www.hpp-c.jp/mud.html

Slide 24

Slide 24 text

24 http://developers.freee.co.jp/entry/chatbot_support | https://keiei.freee.co.jp/2017/08/22/communication-of-barrier/

Slide 25

Slide 25 text

25 アクセシビリティの連想

Slide 26

Slide 26 text

26 https://www.apple.com/jp/accessibility/iphone/vision/

Slide 27

Slide 27 text

27 http://developers.freee.co.jp/entry/freee-accounting-voice-control-with-ifttt-and-google-spreadsheet

Slide 28

Slide 28 text

28 https://twitter.com/mako_yukinari/status/958864046261813252

Slide 29

Slide 29 text

　freeeのアクセシビリティ、いまのサービス 29

Slide 30

Slide 30 text

30 多数のサイト・アプリ ● Webサイト ○ 製品系：公式サイト、ヘルプ、freeeカード、開業応援パック ○ 会社系：コーポレート、採用ブログ、開発者ブログ ○ メディア：パラキャリ、経営ハッカー ● アプリケーション ○ Webアプリ：会計 freee、申告 freee、人事労務 freee、開業 freee、会社設立 freee、マイナンバー管理 freee ○ iOS/Androidアプリ：会計ソフト freee、freee for Team

Slide 31

Slide 31 text

31 Webサイトのチェック

Slide 32

Slide 32 text

32 https://www.w3.org/WAI/eval/preliminary

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

35 Webサイトの課題 ● マークアップの問題は軽微（意味不明にはならない） ● 画像や動画の代替テキスト ● 水色テキストのコントラスト ● フォーム系のエラー表示 ● この傾向は他サイトもおおむね同じ

Slide 36

Slide 36 text

36 カラのi要素

Slide 37

Slide 37 text

37 画像にaltがない

Slide 38

Slide 38 text

38 画像にaltがない

Slide 39

Slide 39 text

39 エラーを読み上げない

Slide 40

Slide 40 text

40 アプリケーションのチェック

Slide 41

Slide 41 text

中根さんにインタビュー 41 ● アクセシビリティの専門家 ● 全盲、スクリーンリーダーを利用 ● 4年前からfreeeユーザー

Slide 42

Slide 42 text

インタビュー結果 ● 総評 ○ 機能は優れている、自分たちこそが使いたいもの ○ しかし、現状ではかなり試行錯誤しないと使えない ● 課題 ○ 読み上げない場合あり：アイコンにラベルが無い ○ 関連付かない場合あり：ラベルが入力項目と紐付いていない ○ 先に進めない場合あり：ボタンが押せない 42

Slide 43

Slide 43 text

43 カラのi要素

Slide 44

Slide 44 text

44 divボタン

Slide 45

Slide 45 text

45 for属性のないlabel

Slide 46

Slide 46 text

46 複合的な課題クリッカブルなtr要素、ラベル未連携、サジェストのARIA未対応, outline:none 等

Slide 47

Slide 47 text

iOS版に切り替えつつ利用 ● iOS版の特徴 ○ 機能が絞られている、画面内要素が絞られている ○ そのため全容を把握しやすく、比較的使える ○ 押せないケースはあまりなく、おおむね先には進める ● 課題 ○ たまに読み上げない：アイコンにラベルが無い ○ たまに関連付かない：ラベルが入力項目と紐付いていない ○ たまに操作しづらい：フォーカス位置が想定と違うケースあり 47

Slide 48

Slide 48 text

Slide 49

Slide 49 text

49 インタビュー所感：20:80の法則ありそう ● よく使う機能、よく遭遇するコンポーネント、発生する問題のパターンは、いずれも限られている ● 課題を絞って対策すれば「ひとまず使える」状況は訪れるのでは

Slide 50

Slide 50 text

50 https://havelog.ayumusato.com/develop/a11y/e718-a11y_atonose_sakusaku.html

Slide 51

Slide 51 text

51 https://havelog.ayumusato.com/develop/a11y/e710-ios_a11y_guidelines.html.html

Slide 52

Slide 52 text

　freeeのアクセシビリティ、これからのサービス 52

Slide 53

Slide 53 text

53 Webサイトのこれから ● 有志でEasy Checksの和訳開始 ● 各Webマスターがチェックしていく流れを作る ● アクセシビリティ方針策定も視野に入れたいが、まずは重要なところから ● ヘルプは利用時の命綱なので、先行していく方向で検討

Slide 54

Slide 54 text

Slide 55

Slide 55 text

55 https://www.slideshare.net/KobayashiDaisuke1/ss-77124282

Slide 56

Slide 56 text

56 アプリケーションのこれから新しく作る・機能追加する場合 ● UI検討時のアクセシビリティ視点でのレビュー ● 既に整備を開始しているコンポーネントの適用 ● コンポーネントの拡充時にCI ● 実際のマークアップサンプルの整備

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

60 アプリケーションのこれから既存のUIを修正する場合 ● 課題を挙げるバックログの運用開始 ○ アクセシビリティ関連のPRが出始めた ● チェックプロセスの整備 ○ いきなりCIだと真っ赤でマージできなさそう ○ まずは水際で機械チェック→人間チェックか

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

　freeeのアクセシビリティ、これからの意識 63

Slide 64

Slide 64 text

64 既存のUIの修正に向き合う ● 機能追加によるユーティリティ向上 ○ 業務を移せるケースが増える、売上に直結、因果を示しやすい ● UIの修正によるユーザビリティ向上 ○ 効果・効率・満足度が上がる、継続や推奨意向に影響、因果を示しにくい ● UXメトリクスの必要性

Slide 65

Slide 65 text

65 アクセシビリティの必要性に向き合う ● 個人の正義だけに頼らず、目標と成果の明示が必要そう ● しかし、それはfreeeにおいては十分可能そう ○ 障害者や高齢者の就労人口はかなりの人数 ○ バックオフィスはすべての業務に必要 ○ かなりの割合でPCやスマホを利用 ○ サブスクリプションモデルとして十分ペイするはず（推定中）

Slide 66

Slide 66 text

66 http://www.mofa.go.jp/mofaj/files/000171086.pdf

Slide 67

Slide 67 text

67 http://www.mhlw.go.jp/file/05-Shingikai-12601000-Seisakutoukatsukan-Sanjikanshitsu_Shakaihoshoutantou/0000118215.pdf

Slide 68

Slide 68 text

68 http://nichimou.org/welfare/160617-jouhou-1/

Slide 69

Slide 69 text

69 http://www.soumu.go.jp/iicp/chousakenkyu/data/research/survey/telecom/2012/disabilities2012.pdf

Slide 70

Slide 70 text

70 http://www.ieice.org/ken/paper/20171019DbX1/

Slide 71

Slide 71 text

71 必要とする当事者に向き合う ● ここ数ヶ月の活動で最大のインパクトは中根さんインタビュー ● 「この人が使えるようにできないか」当事者の声は、数多の理由より強く響く ● 新しい気付きの源泉にもなる、インクルーシブデザイン ● 中根さんが立ち上げた「JBICT」にぜひ問い合わせを https://jbict.net/

Slide 72

Slide 72 text

72 https://accsell.net/info/accsell-meetup-013.html

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

74 https://dentsu-ho.com/articles/3122 いま A11Y A11Y A11Y A11Y A11Y A11Y A11Y

Slide 75

Slide 75 text

75 https://dentsu-ho.com/articles/3122 A11Y A11Y A11Y A11Y A11Y A11Y A11Y これから