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
820
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
ymrl
1
370
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
210
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
340
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
330
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
100
いま求められるソフトウェアのアクセシビリティ / 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
Streamlit は社内ツールだけじゃない!PoC の速さで実現する'商用品質'の分析 SaaS アーキテクチャ
kdash
2
1k
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3k
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.3k
北海道の人に知ってもらいたいGISスポット / gis-spot-in-hokkaido-2025
sakaik
0
190
stupid jj tricks
indirect
0
7.5k
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.5k
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
280
GopherCon Tour 概略
logica0419
2
160
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
300
CData MCP ナイト!「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
shisyu_gaku
0
190
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
130
Goのビルドシステムの変遷 / The history of Go's build system
ymotongpoo
12
3.4k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Visualization
eitanlees
148
16k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Language of Interfaces
destraynor
162
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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
スモールビジネスを、世界の主役に。