Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ymrl
May 19, 2023

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

アクセシビリティの祭典 https://accfes.com/2023/
スポンサースペシャルトークセッション freee株式会社の登壇資料です
Googleスライド版はこちら

ymrl

May 19, 2023
Tweet

More Decks by ymrl

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 7

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 11

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

    View full-size slide

  12. 12

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

    View full-size slide

  13. 13

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

    View full-size slide

  14. 14

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

    View full-size slide

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

    View full-size slide