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
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.1k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
840
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.6k
Installing and Running decksh/pdfdeck
ajstarks
1
860
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
150
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
#Dubois Challenge 2025: Economics
ajstarks
1
180
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
240
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Invisible Side of Design
smashingmag
301
51k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Why Our Code Smells
bkeepers
PRO
339
57k
Six Lessons from altMBA
skipperchong
28
4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Being A Developer After 40
akosma
91
590k
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に興味のある⽅は、プロダクトを試してみたり、 私たちと⼀緒に働くことを検討していただけるとうれしいです
スモールビジネスを、世界の主役に。