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

伊原 力也

2018.02.11｜Inside Frontend #2 (Seminar B)

1

伊原 力也

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

2

3

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

4

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

5

freee

「スモールビジネスに携わるすべての人が�　創造的な活動にフォーカスできるよう」

• クラウドで開業/会社設立、会計、人事労務、マイナンバー…
• バックオフィスを一気通貫して効率化していく

6

+�Accessibility

7

freeeとアクセシビリティと私

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

​

​

8

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

9

10

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

11

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

いま

A11Y

A11Y

A11Y

A11Y

A11Y

A11Y

A11Y

最初に行ったこと

12

13

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

14

15

16

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

17

18

19

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

20

21

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

22

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

23

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

24

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

アクセシビリティの連想

25

26

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

27

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

28

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

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

29

多数のサイト・アプリ

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

30

Webサイトのチェック

31

32

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

33

34

Webサイトの課題

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

35

カラのi要素

36

画像にaltがない

37

画像にaltがない

38

エラーを読み上げない

39

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

40

中根さんにインタビュー

• アクセシビリティの専門家
• 全盲、スクリーンリーダーを利用
• 4年前からfreeeユーザー

41

インタビュー結果

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

42

カラのi要素

43

divボタン

44

for属性のないlabel

45

複合的な課題

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

46

iOS版に切り替えつつ利用

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

47

48

インタビュー所感：20:80の法則ありそう

• よく使う機能、よく遭遇するコンポーネント、�発生する問題のパターンは、いずれも限られている
• 課題を絞って対策すれば「ひとまず使える」状況は訪れるのでは

49

50

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

51

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

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

52

Webサイトのこれから

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

​

53

54

55

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

アプリケーションのこれから

新しく作る・機能追加する場合

• UI検討時のアクセシビリティ視点でのレビュー
• 既に整備を開始しているコンポーネントの適用
• コンポーネントの拡充時にCI
• 実際のマークアップサンプルの整備

56

57

58

59

アプリケーションのこれから

既存のUIを修正する場合

• 課題を挙げるバックログの運用開始
• アクセシビリティ関連のPRが出始めた
• チェックプロセスの整備
• いきなりCIだと真っ赤でマージできなさそう
• まずは水際で機械チェック→人間チェックか

60

61

62

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

63

既存のUIの修正に向き合う

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

64

アクセシビリティの必要性に向き合う

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

65

66

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

67

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

68

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

69

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

70

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

必要とする当事者に向き合う

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

71

https://jbict.net/

72

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

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

73

74

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

いま

A11Y

A11Y

A11Y

A11Y

A11Y

A11Y

A11Y

75

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

A11Y

A11Y

A11Y

A11Y

A11Y

A11Y

A11Y

これから

76

+�Accessibility

�Blue Ocean

77

78

エンジニア・UXデザイナー積極採用中！

ありがとうございました

@magi1125

79