アクセシビリティを意識したプロダクトづくり 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に興味のある⽅は、プロダクトを試してみたり、 私たちと⼀緒に働くことを検討していただけるとうれしいです

スモールビジネスを、世界の主役に。