Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
freeeのアクセシビリティ、いまとこれから
Search
Rikiya Ihara
February 18, 2018
1
5.4k
freeeのアクセシビリティ、いまとこれから
Rikiya Ihara
February 18, 2018
Tweet
Share
More Decks by Rikiya Ihara
See All by Rikiya Ihara
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
0
150
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
4
1.6k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
15k
アクセシビリティの効果測定
magi1125
1
6.2k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
12k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
5.3k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
5.3k
ユビーAI受診相談でほんとうに起きていた怖い話
magi1125
0
5.3k
noteアクセシビリティ勉強会〜虚空編〜
magi1125
0
5.2k
Featured
See All Featured
Happy Clients
brianwarren
91
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Designing for Performance
lara
601
67k
Visualization
eitanlees
135
14k
What's new in Ruby 2.0
geeforr
335
31k
Statistics for Hackers
jakevdp
789
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Into the Great Unknown - MozCon
thekraken
10
830
Documentation Writing (for coders)
carmenintech
59
3.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Transcript
freeeのアクセシビリティ、 いまとこれから 伊原 力也 2018.02.11|Inside Frontend #2 (Seminar B) 1
伊原 力也 2 • freee プロダクト戦略 IA/UX(2017年10月〜) • HCD-Net 評議委員
/ 認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • 国際ユニヴァーサルデザイン協議会 移動空間研究部会 副主査
Amazonで「アクセシビリティ」と検索! 3
4 Amazonで「インクルーシブHTML」と検索!
5
freee 「スモールビジネスに携わるすべての人が 創造的な活動にフォーカスできるよう」 • クラウドで開業/会社設立、会計、人事労務、マイナンバー… • バックオフィスを一気通貫して効率化していく 6
7 + Accessibility
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
30 多数のサイト・アプリ • Webサイト ◦ 製品系:公式サイト、ヘルプ、freeeカード、開業応援パック ◦ 会社系:コーポレート、採用ブログ、開発者ブログ ◦ メディア:パラキャリ、経営ハッカー
• アプリケーション ◦ Webアプリ:会計 freee、申告 freee、人事労務 freee、 開業 freee、会社設立 freee、マイナンバー管理 freee ◦ iOS/Androidアプリ:会計ソフト freee、freee for Team
31 Webサイトのチェック
32 https://www.w3.org/WAI/eval/preliminary
33
34
35 Webサイトの課題 • マークアップの問題は軽微(意味不明にはならない) • 画像や動画の代替テキスト • 水色テキストのコントラスト • フォーム系のエラー表示
• この傾向は他サイトもおおむね同じ
36 カラのi要素
37 画像にaltがない
38 画像にaltがない
39 エラーを読み上げない
40 アプリケーションのチェック
中根さんにインタビュー 41 • アクセシビリティの専門家 • 全盲、スクリーンリーダーを利用 • 4年前からfreeeユーザー
インタビュー結果 • 総評 ◦ 機能は優れている、自分たちこそが使いたいもの ◦ しかし、現状ではかなり試行錯誤しないと使えない • 課題 ◦
読み上げない場合あり:アイコンにラベルが無い ◦ 関連付かない場合あり:ラベルが入力項目と紐付いていない ◦ 先に進めない場合あり:ボタンが押せない 42
43 カラのi要素
44 divボタン
45 for属性のないlabel
46 複合的な課題 クリッカブルなtr要素、ラベル未連携、サジェストのARIA未対応, outline:none 等
iOS版に切り替えつつ利用 • iOS版の特徴 ◦ 機能が絞られている、画面内要素が絞られている ◦ そのため全容を把握しやすく、比較的使える ◦ 押せないケースはあまりなく、おおむね先には進める •
課題 ◦ たまに読み上げない:アイコンにラベルが無い ◦ たまに関連付かない:ラベルが入力項目と紐付いていない ◦ たまに操作しづらい:フォーカス位置が想定と違うケースあり 47
48
49 インタビュー所感:20:80の法則ありそう • よく使う機能、よく遭遇するコンポーネント、 発生する問題のパターンは、いずれも限られている • 課題を絞って対策すれば「ひとまず使える」状況は訪れるのでは
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
53 Webサイトのこれから • 有志でEasy Checksの和訳開始 • 各Webマスターがチェックしていく流れを作る • アクセシビリティ方針策定も視野に入れたいが、まずは重要なところから •
ヘルプは利用時の命綱なので、先行していく方向で検討
54
55 https://www.slideshare.net/KobayashiDaisuke1/ss-77124282
56 アプリケーションのこれから 新しく作る・機能追加する場合 • UI検討時のアクセシビリティ視点でのレビュー • 既に整備を開始しているコンポーネントの適用 • コンポーネントの拡充時にCI •
実際のマークアップサンプルの整備
57
58
59
60 アプリケーションのこれから 既存のUIを修正する場合 • 課題を挙げるバックログの運用開始 ◦ アクセシビリティ関連のPRが出始めた • チェックプロセスの整備 ◦
いきなりCIだと真っ赤でマージできなさそう ◦ まずは水際で機械チェック→人間チェックか
61
62
freeeのアクセシビリティ、 これからの意識 63
64 既存のUIの修正に向き合う • 機能追加によるユーティリティ向上 ◦ 業務を移せるケースが増える、 売上に直結、因果を示しやすい • UIの修正によるユーザビリティ向上 ◦
効果・効率・満足度が上がる、 継続や推奨意向に影響、因果を示しにくい • UXメトリクスの必要性
65 アクセシビリティの必要性に向き合う • 個人の正義だけに頼らず、目標と成果の明示が必要そう • しかし、それはfreeeにおいては十分可能そう ◦ 障害者や高齢者の就労人口はかなりの人数 ◦ バックオフィスはすべての業務に必要
◦ かなりの割合でPCやスマホを利用 ◦ サブスクリプションモデルとして十分ペイするはず(推定中)
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/
71 必要とする当事者に向き合う • ここ数ヶ月の活動で最大のインパクトは中根さんインタビュー • 「この人が使えるようにできないか」 当事者の声は、数多の理由より強く響く • 新しい気付きの源泉にもなる、インクルーシブデザイン •
中根さんが立ち上げた「JBICT」にぜひ問い合わせを 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
77 + Accessibility Blue Ocean
78 エンジニア・UXデザイナー積極採用中!
ありがとうございました @magi1125 79