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 with Accessibility in Mind
Search
ymrl
May 19, 2023
Design
0
16k
アクセシビリティを意識したプロダクトづくり / 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
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
2
16k
やっぱりやりたいのはUIデザインだった
ymrl
0
21k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
17k
開発チームみんなで取り組むアクセシビリティ
ymrl
0
17k
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
17k
Web技術基礎 for インターン
ymrl
1
6.4k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
150
Webエンジニアとして いま知っておきたい Webアクセシビリティ
ymrl
3
670
世界を変えるための デザインシステム (アクセシビリティ編)
ymrl
1
6.7k
Other Decks in Design
See All in Design
今日から始めるDesignOpsのヒント
isaikaori
1
410
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
B/43プラスカードができるまで
putchomsmartbank
0
470
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
360
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
30
2.5k
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.2k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.7k
The Invisible Side of Design
smashingmag
294
49k
A designer walks into a library…
pauljervisheath
199
23k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Become a Pro
speakerdeck
PRO
10
4.5k
Unsuck your backbone
ammeep
662
57k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Gamification - CAS2011
davidbonilla
76
4.6k
Bash Introduction
62gerente
604
210k
Side Projects
sachag
451
41k
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に興味のある⽅は、プロダクトを試してみたり、 私たちと⼀緒に働くことを検討していただけるとうれしいです
スモールビジネスを、世界の主役に。