アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind

Transcript

1. 　
   アクセシビリティを意識したプロダクトづくり
   2023.05.19 @ymrl
   

   View Slide

2. 　
   2
   2014年にエンジニアとしてfreeeに⼊社。社内デザイ
   ンシステムを本腰⼊れて作っていくために異動した。
   デザインシステムディレクターとして、コードも書く
   しデザインもする⼈をやっています。
   2023年に共著書「Webアプリケーションアクセシビリ
   ティ」を出版。
   ⼭本 伶 (@ymrl)
   freee株式会社 デザインシステムディレクター
   

   View Slide

3. 　
   Mission
   スモールビジネスを、
   世界の主役に。
   freeeは「スモールビジネスを、世界の主役に。」 をミッションに掲げ、
   「だれもが⾃由に経営できる統合型経営プラットフォーム」
   の構築を⽬指してサービスの開発及び提供をしております。
   ⼤胆に、スピード感をもってアイデアを具現化することができる
   スモールビジネスは、様々なイノベーションを⽣むと同時に、
   ⼤企業を刺激して世の中全体に新たなムーブメントを起こすことが
   できる存在だと考えております。
   

   View Slide

4. あらゆる業務とデータがつながることで、⾃動化‧可視化に加えてスマートで適切な経営アクションが可能に
   統合型クラウドERP
   

   View Slide

5. freeeのビジョン
   だれもが⾃由に経営できる
   統合型経営プラットフォーム。
   統合型経営プラットフォームはみんなで使うもの。
   だれもが⾃由に⾃然体で使えるプロダクトを作っていきたい。
   なぜfreeeはアクセシビリティーに取り組むのか
   

   View Slide

6. 6
   毎年、freee社内のアクセシビリティの取り組みの振り返り記事を公開しています
   最新版は https://note.com/magi1125/n/n50e160bb0b41
   freeeのアクセシビリティのこれまでの歩み
   

   View Slide

7. 7

   全メンバー向け研修の実施
   ● 全職種の全メンバー向けに1時間のアクセシビリティ研修を実施
   ○ アクセシビリティという考え⽅、障害や⽀援技術の紹介
   ○ スクリーンリーダーのデモ
   ○ 社内での活動で考えてほしいことの紹介
   ● 開発職やWebマーケティング等に関わるビジネス職向けには、
   より具体的な内容の研修を実施
   ○ キーボード操作やスクリーンリーダーの体験
   ○ アクセシビリティチェックや改善⽅法の探り⽅
   ○ ボタンやフォームなど、製品の具体的な部分の良い例‧悪い例
   ● 動画を公開しています https://developers.freee.co.jp/entry/a11y-training
   

   View Slide

8. 8
   難解なWCAGを整理して、現場で使いやすいガイドラインやチェックリストを策定
   https://a11y-guidelines.freee.co.jp/
   ガイドラインとチェックリスト
   

   View Slide

9. 9
   「デザイン」「コード」「プロダクト」のチェックリストを⽤意
   デザイナーやエンジニアは作りながらチェックして、QA（品質保証）チームが最終チェックする
   早い段階からチェックを⾏うことで、⼩さい⼿戻りで修正できるようにする
   3段階のチェックリスト
   デザイナー エンジニア QA
   デザインの
   アクセシビリティ
   チェック
   コードの
   アクセシビリティ
   チェック
   プロダクトの
   アクセシビリティ
   チェック
   

   View Slide

10. 　
    freeeのアクセシビリティ
    最近のトピック
    

    View Slide

11. 11

    開発チームのグローバル化
    ● 2021年にフィリピンの開発会社 Likha-iT inc.を⼦会社化、
    ⽇本とフィリピン横断のGlobal Engineering Teamが始動
    ● フィリピンにはQA（品質保証）が担当のメンバーもいて、
    通常の動作確認に加えて、アクセシビリティチェックも実施しています
    ● フィリピンのメンバーがチェックを実施できるように、
    QA⽤のチェックリストや社内資料には英語翻訳版を追加
    ● 先⽇、フィリピンのQAメンバーが来⽇する機会があったため、
    スクリーンリーダーなどの実演を交えたワークショップを実施
    

    View Slide

12. 12

    モバイルアプリのアクセシビリティ
    ● freeeはWebアプリだけでなく、⼀部の機能のモバイルアプリも提供
    ○ 帳簿付けや経費精算、勤怠や給与明細などがモバイルで利⽤できる
    ● モバイルアプリはWebよりも幅広いユーザー層が使う可能性が⾼いので、
    モバイルアプリでのアクセシビリティも重要
    ● モバイル（iOS/Androidアプリ）⽤のチェックリストも⽤意
    ○ エンジニア向けチェックリストには具体的な実装⽅法も記載されている
    ● ブラウザの開発者ツールで実装の状態を確認しやすいWebアプリと⽐べると、
    モバイルアプリは実装段階でなるべく多くの問題を解消しておく必要がある
    

    View Slide

13. 13

    NVDAを使ったチェック⼿順の動画を公開しました
    ● Webアプリは、NVDA（スクリーンリーダー）によるチェックを必須にしている
    ● しかし、ほとんどのメンバーはスクリーンリーダーの操作に慣れていない
    ○ 操作⽅法がわからない、スクリーンリーダーの挙動の正解がわからない
    ● NVDA⽇本語チームの開発者である⻄本卓也⽒と、NVDAでアクセシビリティ
    チェックを⾏う⼿順の動画を作ってYouTubeで公開しはじめました
    ○ https://www.youtube.com/@freee_a11y
    ● freeeのチェックリストに沿って、チェック⽅法の例を増やしていきます
    

    View Slide

14. 14

    おわりに: ⽬指したい未来
    「スモールビジネスを、世界の主役に。」
    「だれもが⾃由に経営できる統合型経営プラットフォーム。」
    ● だれもが世界の主役になることができるようにしたい
    ● freeeのプロダクトのアクセシビリティが⾼くなることで、より多様な⼈たちが
    より活躍して、より良い世界を作っていけるようになると信じています
    ● もし、freeeに興味のある⽅は、プロダクトを試してみたり、
    私たちと⼀緒に働くことを検討していただけるとうれしいです
    

    View Slide

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

    View Slide