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
freeeのアクセシビリティの取り組みの紹介
Search
ymrl
March 16, 2022
Technology
0
24k
freeeのアクセシビリティの取り組みの紹介
情報アクセシビリティ推進シンポジウム
での登壇資料です
ymrl
March 16, 2022
Tweet
Share
More Decks by ymrl
See All by ymrl
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
4
870
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
ymrl
1
380
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
230
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
370
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
360
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
110
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
1.3k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
23k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
23k
Other Decks in Technology
See All in Technology
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
880
SOTA競争から人間を超える画像認識へ
shinya7y
0
450
OSSで50の競合と戦うためにやったこと
yamadashy
3
980
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
330
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
470
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
230
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
130
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
360
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
Kubernetes self-healing of your workload
hwchiu
0
530
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
For a Future-Friendly Web
brad_frost
180
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Mobile First: as difficult as doing things right
swwweet
225
10k
Documentation Writing (for coders)
carmenintech
75
5.1k
Being A Developer After 40
akosma
91
590k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Faster Mobile Websites
deanohume
310
31k
The Language of Interfaces
destraynor
162
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Building an army of robots
kneath
305
46k
Transcript
freeeのアクセシビリティの取り組み
2 会社情報 Company Profile 会社名 freee株式会社(フリー株式会社) 設立年月 2012年7月
従業員数 572人(2021年6月末時点) 本社住所 東京都品川区西五反田2-8-1 五反田ファーストビル 9F 支社・営業所 中部支社、関西支社、九州支社、京都営業所、広島営業所 子会社 freee finance lab 株式会社(freee株式会社100%出資子会社) freee biz 株式会社(freee株式会社100%出資子会社) 株式会社サイトビジット(freee株式会社70%出資子会社) Likha-iT Inc(freee株式会社100%出資子会社)
3 使命 Mission スモールビジネスを、 世界の主役に。 freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型 経営プラットフォームを開発・提供し、だれもが自由に自然体で経営できる 環境をつくっていきます。 起業やビジネスを育てていくことを、もっと魅力的で気軽な行為に。個人事 業や中小企業などのスモールビジネスに携わるすべての人が、じぶんらしく
自信をもって経営できるように。 大胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今 までにない多様な価値観や生き方、新しいイノベーションを生み出す起爆剤 だと私たちは考えています。スモールビジネスが大企業を刺激し、社会をさ らにオモシロク、世の中全体をより良くする流れを後押ししていきます。(freee ブランドムービー)
4 製品・サービス Products 中小企業の経理業務を効率化。帳簿や決算書作成・請求業務に対応。 リアルタイムに数字を把握できます。 給与計算や労務管理を大幅に効率化。 給与明細作成や年末調整、入社手続きから勤怠管理まで対応。 税務申告書作成業務を効率化。 法人税・消費税・法定調書・申請届出や電子申告にも対応。会計から申告まで一気通貫。
5 製品・サービス Products 低コストでマイナンバーの収集から 保管、利用、破棄までがクラウド上で完結。 個人事業の開業手続きが無料、簡単、最速。 ガイドに沿って質問に答えるだけで書類作成が完了。 画面に沿って入力するだけで、 会社設立に必要なすべての書類を5分で作成できる無料サービス。 Webで申し込みでき、最短4営業日で発行。
創業時でも本人確認書類だけで審査可能。ライトプランは年会費無料。
6 なぜfreeeはアクセシビリティーに取り組むのか freeeのビジョン だれもが自由に経営できる 統合型経営プラットフォーム。 統合型経営プラットフォームはみんなで使うもの。 だれもが自由に自然体で使える
プロダクトを作っていきたい。
7 2018年以降、毎年年末にその年に取り組んできた内容をブログ記事として紹介しています。 2017年ごろからアクセシビリティに取り組んできた https://developers.freee.co.jp/entry/freee-a11y-2018 https://developers.freee.co.jp/entry/freee-a11y-2019 https://developers.freee.co.jp/entry/freee-a11y-2020 https://note.com/magi1125/n/ncc519a490f6c
8 アクセシビリティを推進する体制 • プロダクトデザイン部内の「デザイン基盤チーム」が推進役 ◦ メンバーのうち1名は視覚障害の当事者でもある • アクセシビリティ推進役としてのデザイン基盤の役割 ◦ ガイドラインやチェックリストの整備
◦ アクセシビリティを担保できる開発体制の整備・サポート ◦ デザインシステム “Vibes” によるアクセシビリティサポート ◦ アクセシビリティ研修や相談会の開催
9 freeeアクセシビリティー・ガイドラインの制定 • WCAG (Web Content Accessibility Guidelines) をもとに、 独自のガイドラインを作成
◦ 達成されるべき項目に絞って MUST と SHOULD に振り直した ◦ 対象となるコンテンツごとにカテゴリを分けた ◦ 現場で理解しやすいよう書き方を改めた • https://a11y-guidelines.freee.co.jp/
10 アクセシビリティー・チェックリストの整備 • freee社内のプロダクト開発体制にあわせて、 デザイナー用・エンジニア用・QA用のチェックリストを作成 • それぞれの開発フェーズでチェックできるようにすることで、 問題を早い段階で発見・修正できるようにしている • https://a11y-guidelines.freee.co.jp/checks/index.html
デザイナー エンジニア QA デザインの アクセシビリティ チェック コードの アクセシビリティ チェック プロダクトの アクセシビリティ チェック
11 チェックシートの管理 • 社内では、チェックシートをGoogle Formから生成するようにしている ◦ いつでも最新のチェックリストが使われるようになる (古いシートがコピーされ使い回されるのを防ぎたい) ◦ いつ誰がチェックシートを作っているのか把握できる
• 社内で使われたチェックシートはデザイン基盤メンバーでレビューする ◦ わかりにくい場所、NGになりがちな場所を発見するため ◦ サポートが必要そうな人・チームを発見するため • レビューの結果から、チェックリストやガイドライン、社内資料、 デザインシステムなどを改善するアクションを取っている
12 デザインシステムによるアクセシビリティのサポート • 社内のデザインシステムとしてUIコンポーネント集 “Vibes” を内製 • なるべくアクセシビリティが担保されるような設計・実装になっている ◦ 全員がアクセシビリティを念頭において開発するのは不可能
◦ 「何も考えずに作っても平均点くらいを狙える」を目指す ◦ チェックでNGになりやすい部分をVibesに取り込んでいく ◦ コンポーネント自体のほか、サンプルコードでもカバー • UIの一貫性や開発生産性を高めることも、Vibes の目的 ◦ アクセシビリティ以外の利点もあり、積極的に使ってもらいやすい
13 アクセシビリティ研修の実施 • 開発職向けだけでなく、すべての職種の新入社員に研修を実施 ◦ 現在は入社時に45分、開発職には加えて2時間の研修を実施 • プロダクト開発に関するものだけでなく、freee社内での生活で 気をつけてもらうべきことを、入社直後に伝える •
開発職向けには、スクリーンリーダーやキーボードによる操作の体験や 技術的な解説をして、アクセシブルな開発のやり方を紹介 • https://developers.freee.co.jp/entry/a11y-training
スモールビジネスを、世界の主役に。