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
3
340
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
ymrl
0
27
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
22
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
83
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
90
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
92
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
1.2k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
23k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
23k
Other Decks in Technology
See All in Technology
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
390
今日からあなたもGeminiを好きになる
subaruhello
1
560
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
250
Wasmで社内ツールを作って配布しよう
askua
0
110
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
710
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
390
Data Engineering Study#30 LT資料
tetsuroito
1
550
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
240
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
200
PHPでResult型やってみよう
higaki_program
0
190
生成AIによる情報システムへのインパクト
taka_aki
0
100
Jitera Company Deck / JP
jitera
0
140
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Applications with DynamoDB
mza
95
6.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Music & Morning Musume
bryan
46
6.7k
GitHub's CSS Performance
jonrohan
1031
460k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Side Projects
sachag
455
43k
Embracing the Ebb and Flow
colly
86
4.8k
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
スモールビジネスを、世界の主役に。