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
19k
アクセシビリティを意識したプロダクトづくり / 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
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
0
260
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
19k
やっぱりやりたいのはUIデザインだった
ymrl
0
24k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
20k
開発チームみんなで取り組むアクセシビリティ
ymrl
0
20k
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
20k
Web技術基礎 for インターン
ymrl
1
7.3k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
190
Webエンジニアとして いま知っておきたい Webアクセシビリティ
ymrl
3
750
Other Decks in Design
See All in Design
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.8k
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
320
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.5k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
250
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Credence
lratmansunu
0
340
Kim Possible - Crush
olgastoryboard
0
120
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
900
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
340
Dreamia
elsh
0
150
ito aya|Portfolio2409
itoaya116
0
240
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
730
Embracing the Ebb and Flow
colly
84
4.4k
Writing Fast Ruby
sferik
626
60k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
Adopting Sorbet at Scale
ufuk
73
9k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Why Our Code Smells
bkeepers
PRO
334
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.7k
Speed Design
sergeychernyshev
23
550
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
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に興味のある⽅は、プロダクトを試してみたり、 私たちと⼀緒に働くことを検討していただけるとうれしいです
スモールビジネスを、世界の主役に。