Slide 1
Slide 1 text
freee 株式会社
2019.05.16
人事労務freeeのアクセシビリティへの取組み
~ アクセシビリティQAのススメ ~
Slide 2
Slide 2 text
竹田 祥
freee関西支社 開発部長
・エンジニア
・プロダクトマネージャー
・アクセシビリティ初級
2
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
スモールビジネスを、世界の主役に。
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
6
アイデアやパッションやスキルがあれば
だれでもビジネスを強くできるプラットフォーム
Slide 7
Slide 7 text
Q.この数字は何でしょう
99.7%
Slide 8
Slide 8 text
中小企業
99.7%
A.日本の企業規模の割合
※出典：中小企業庁 平成26年
Slide 9
Slide 9 text
この99.7%のビジネスを
サポートし、強くしたい
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
ビジネスをはじめる
Slide 12
Slide 12 text
ビジネスを続ける、育てる
Slide 13
Slide 13 text
アクセシビリティ
に取組む理由
Slide 14
Slide 14 text
14
アイデアやパッションやスキルがあれば
だれでもビジネスを強くできるプラットフォーム
Slide 15
Slide 15 text
アイデアやパッションやスキルがあれば
だれでもビジネスを強くできるプラットフォーム
Slide 16
Slide 16 text
だれでも ＝ あらゆる人
Slide 17
Slide 17 text
アクセシビリティ対応
=
あらゆる人が使えるようにする
Slide 18
Slide 18 text
freeeが目指している
ものと完全に一致
↓
やらない理由がない
Slide 19
Slide 19 text
どうやっているか
Slide 20
Slide 20 text
アクセシビリティQA
という仕組みを始めました
Slide 21
Slide 21 text
そもそも ”QA” とは
品質保証
サービスの開発において
機能の 、デザインの などは
一般的に実施されている。
Slide 22
Slide 22 text
“アクセシビリティQA” とは
機能やデザインと同じく
「アクセシビリティの品質保証」
を開発プロセスに組み込む
Slide 23
Slide 23 text
チーム構成
Slide 24
Slide 24 text
アクセシビリティやっていき
CAO (Chief Accessibility Ojisan)
会計フリー開発メンバー
モバイル開発メンバー etc
人事労務フリー開発メンバー
Slide 25
Slide 25 text
CAO (Chief Accessibility Ojisan)
中根さん / 全盲のエンジニア / AccSell運営
Slide 26
Slide 26 text
AKO (Accessibility no hon Kaiteru Ojisan)
伊原さん / PM / アクセシビリティ本の執筆、監修
Slide 27
Slide 27 text
● アクセシビリティやっていき がある
● 先ほどの強豪 名を軸に、各開発チームからエンジニアやデ
ザイナー、 など複数のメンバーが参加
● 全体で使う共通のライブラリなどの作成
● それぞれが各プロダクトでアクセシビリティを意識した開発を
行いつつ、 にて情報共有や悩み相談を行う
Slide 28
Slide 28 text
プロセス
Slide 29
Slide 29 text
つの観点でクオリティをチェック
システムQA
デザインQA
アクセシビリティQA
動作テストチーム
UI/UXデザイナー
強豪2名
Slide 30
Slide 30 text
アクセシビリティQA 強豪2名
● アクセシビリティ が存在し、他のチェックと同様にリ
リースまでのプロセスに組み込まれている
● 今は強豪 名がチェック（今後広げたい）
● 画面モック時点での事前チェック、検証環境で実際に動作
する状態でのチェックの 段階実施
Slide 31
Slide 31 text
強豪のおじさん2名が厳しくチェック
Slide 32
Slide 32 text
具体的な事例
Slide 33
Slide 33 text
月リリース
「特別休暇」機能
Slide 34
Slide 34 text
勤怠管理担当者が会社独自の休暇を定義する
Slide 35
Slide 35 text
従業員は日々の勤務でその休暇を取得できる
Slide 36
Slide 36 text
アクセシビリティ
の流れ
Slide 37
Slide 37 text
DesignDoc(要件まとめ)作成 / PM
UXデザイン → UIモック作成 / デザイナー
アクセシビリティQA(事前チェック) / 強豪
Slide 38
Slide 38 text
強豪のおじさん2名が厳しくチェック
Slide 39
Slide 39 text
Adobe XDで作ったモックに強豪が指摘やアドバイス
Slide 40
Slide 40 text
モックを元に以下のチェックを行う
・デザインで改善できるもの
・実装時に気をつけるもの
Slide 41
Slide 41 text
デザインで解決できるものはモックを修正して報告
Slide 42
Slide 42 text
コーディング時に解決すべきものはgithub issueに
Slide 43
Slide 43 text
ここまで終わったら
実際のコーディングへ
Slide 44
Slide 44 text
コーディング&検証環境へアップ / エンジニア
アクセシビリティQA(実動作のチェック) / 強豪
※システムQA、デザインQAも並行して実施
※各指摘の影響範囲によっては実施順序を調整
Slide 45
Slide 45 text
強豪のおじさん2名が厳しくチェック
Slide 46
Slide 46 text
実画面を元に以下のチェックを行う
・スクリーンリーダーの解釈確認
・障害を持つ方にとっての操作感
(実用に耐えうるか)
Slide 47
Slide 47 text
具体的な指摘内容がコメントされる
要約：aria-labelちゃんと設定してね☆
Slide 48
Slide 48 text
指摘内容はgithub issueに
Slide 49
Slide 49 text
その後、優先度に応じて実際に対応する
Slide 50
Slide 50 text
レビューする人のために確認方法をしっかり書く
Slide 51
Slide 51 text
優先度の高い指摘
に対応できたら
無事にリリース
Slide 52
Slide 52 text
優先度の低いissueは改善時間に対応
大阪チームだと毎週金曜日の午後は自由に使える
「たこ Hack Day」
この時間にアクセシビリティ対応を進めるエンジニアも。
Slide 53
Slide 53 text
アクセシビリティ に役立つ情報
強豪がいなくても大丈夫！
Slide 54
Slide 54 text
強豪の一人 中根さん が運用してるサイト
Slide 55
Slide 55 text
強豪の一人 伊原さん が執筆 監修された書籍
で「アクセシビリティ」で検索
Slide 56
Slide 56 text
デザイニングWebアクセシビリティを実践するためのチェックリスト
様作成
Slide 57
Slide 57 text
※その他、随時更新します！
まずは始めてみることが大事です
ぜひ一緒にチャレンジしましょう
Slide 58
Slide 58 text
58
アイデアやパッションやスキルがあれば
“だれでも” ビジネスを強くできるプラットフォーム
を実現していきます。ご期待ください。
Slide 59
Slide 59 text
No content