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 / magi
February 18, 2018
1
6.8k
freeeのアクセシビリティ、いまとこれから
Rikiya Ihara / magi
February 18, 2018
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
200
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.6k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
370
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.1k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
A Tale of Four Properties
chriscoyier
158
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Building Applications with DynamoDB
mza
93
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
4 Signs Your Business is Dying
shpigford
182
22k
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