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
830
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
ymrl
1
370
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
220
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
350
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
330
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
110
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
1.3k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
23k
やっぱりやりたいのはUIデザインだった
ymrl
0
28k
Other Decks in Design
See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
450
佐藤千晶|ポートフォリオ
chimi_chia
0
170
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
harutaka Vision Deck
zenkigenforrecruit
0
250
Installing and Running decksh/pdfdeck
ajstarks
1
860
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
400
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
88
4.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
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に興味のある⽅は、プロダクトを試してみたり、 私たちと⼀緒に働くことを検討していただけるとうれしいです
スモールビジネスを、世界の主役に。