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
アクセシビリティを意識したプロダクトづくり / Creating Products w...
Search
ymrl
May 19, 2023
Design
0
23k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
アクセシビリティの祭典
https://accfes.com/2023/
スポンサースペシャルトークセッション freee株式会社の登壇資料です
Googleスライド版はこちら
ymrl
May 19, 2023
Tweet
Share
More Decks by ymrl
See All by ymrl
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
4
620
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
ymrl
1
260
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
160
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
270
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
200
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
94
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
1.2k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
23k
やっぱりやりたいのはUIデザインだった
ymrl
0
28k
Other Decks in Design
See All in Design
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
330
portfolio.pdf
onof003
0
110
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
130
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.1k
Memory Man v3 (WIP)
storybychad
PRO
0
2.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
280
7 Core Values of Round-L
wired888
0
930
UXデザインはなぜ定着しないのか?
designstudiopartners
0
830
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
線で考える画面構成
natsuume
1
900
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
750
#Dubois Challenge 2025: Economics
ajstarks
0
150
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
530
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Building Adaptive Systems
keathley
43
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How STYLIGHT went responsive
nonsquared
100
5.7k
Facilitating Awesome Meetings
lara
54
6.5k
Faster Mobile Websites
deanohume
308
31k
How GitHub (no longer) Works
holman
314
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
アクセシビリティを意識したプロダクトづくり 2023.05.19 @ymrl
2 2014年にエンジニアとしてfreeeに⼊社。社内デザイ ンシステムを本腰⼊れて作っていくために異動した。 デザインシステムディレクターとして、コードも書く しデザインもする⼈をやっています。 2023年に共著書「Webアプリケーションアクセシビリ ティ」を出版。 ⼭本 伶
(@ymrl) freee株式会社 デザインシステムディレクター
Mission スモールビジネスを、 世界の主役に。 freeeは「スモールビジネスを、世界の主役に。」 をミッションに掲げ、 「だれもが⾃由に経営できる統合型経営プラットフォーム」 の構築を⽬指してサービスの開発及び提供をしております。 ⼤胆に、スピード感をもってアイデアを具現化することができる スモールビジネスは、様々なイノベーションを⽣むと同時に、
⼤企業を刺激して世の中全体に新たなムーブメントを起こすことが できる存在だと考えております。
あらゆる業務とデータがつながることで、⾃動化‧可視化に加えてスマートで適切な経営アクションが可能に 統合型クラウドERP
freeeのビジョン だれもが⾃由に経営できる 統合型経営プラットフォーム。 統合型経営プラットフォームはみんなで使うもの。 だれもが⾃由に⾃然体で使えるプロダクトを作っていきたい。 なぜfreeeはアクセシビリティーに取り組むのか
6 毎年、freee社内のアクセシビリティの取り組みの振り返り記事を公開しています 最新版は https://note.com/magi1125/n/n50e160bb0b41 freeeのアクセシビリティのこれまでの歩み
7 全メンバー向け研修の実施 • 全職種の全メンバー向けに1時間のアクセシビリティ研修を実施 ◦ アクセシビリティという考え⽅、障害や⽀援技術の紹介 ◦ スクリーンリーダーのデモ ◦ 社内での活動で考えてほしいことの紹介
• 開発職やWebマーケティング等に関わるビジネス職向けには、 より具体的な内容の研修を実施 ◦ キーボード操作やスクリーンリーダーの体験 ◦ アクセシビリティチェックや改善⽅法の探り⽅ ◦ ボタンやフォームなど、製品の具体的な部分の良い例‧悪い例 • 動画を公開しています https://developers.freee.co.jp/entry/a11y-training
8 難解なWCAGを整理して、現場で使いやすいガイドラインやチェックリストを策定 https://a11y-guidelines.freee.co.jp/ ガイドラインとチェックリスト
9 「デザイン」「コード」「プロダクト」のチェックリストを⽤意 デザイナーやエンジニアは作りながらチェックして、QA(品質保証)チームが最終チェックする 早い段階からチェックを⾏うことで、⼩さい⼿戻りで修正できるようにする 3段階のチェックリスト デザイナー エンジニア QA デザインの アクセシビリティ
チェック コードの アクセシビリティ チェック プロダクトの アクセシビリティ チェック
freeeのアクセシビリティ 最近のトピック
11 開発チームのグローバル化 • 2021年にフィリピンの開発会社 Likha-iT inc.を⼦会社化、 ⽇本とフィリピン横断のGlobal Engineering Teamが始動 •
フィリピンにはQA(品質保証)が担当のメンバーもいて、 通常の動作確認に加えて、アクセシビリティチェックも実施しています • フィリピンのメンバーがチェックを実施できるように、 QA⽤のチェックリストや社内資料には英語翻訳版を追加 • 先⽇、フィリピンのQAメンバーが来⽇する機会があったため、 スクリーンリーダーなどの実演を交えたワークショップを実施
12 モバイルアプリのアクセシビリティ • freeeはWebアプリだけでなく、⼀部の機能のモバイルアプリも提供 ◦ 帳簿付けや経費精算、勤怠や給与明細などがモバイルで利⽤できる • モバイルアプリはWebよりも幅広いユーザー層が使う可能性が⾼いので、 モバイルアプリでのアクセシビリティも重要 •
モバイル(iOS/Androidアプリ)⽤のチェックリストも⽤意 ◦ エンジニア向けチェックリストには具体的な実装⽅法も記載されている • ブラウザの開発者ツールで実装の状態を確認しやすいWebアプリと⽐べると、 モバイルアプリは実装段階でなるべく多くの問題を解消しておく必要がある
13 NVDAを使ったチェック⼿順の動画を公開しました • Webアプリは、NVDA(スクリーンリーダー)によるチェックを必須にしている • しかし、ほとんどのメンバーはスクリーンリーダーの操作に慣れていない ◦ 操作⽅法がわからない、スクリーンリーダーの挙動の正解がわからない • NVDA⽇本語チームの開発者である⻄本卓也⽒と、NVDAでアクセシビリティ
チェックを⾏う⼿順の動画を作ってYouTubeで公開しはじめました ◦ https://www.youtube.com/@freee_a11y • freeeのチェックリストに沿って、チェック⽅法の例を増やしていきます
14 おわりに: ⽬指したい未来 「スモールビジネスを、世界の主役に。」 「だれもが⾃由に経営できる統合型経営プラットフォーム。」 • だれもが世界の主役になることができるようにしたい • freeeのプロダクトのアクセシビリティが⾼くなることで、より多様な⼈たちが より活躍して、より良い世界を作っていけるようになると信じています
• もし、freeeに興味のある⽅は、プロダクトを試してみたり、 私たちと⼀緒に働くことを検討していただけるとうれしいです
スモールビジネスを、世界の主役に。