「職能の越境」でアクセシビリティが加速する / GAAD Japan 2022 Crossing the border

GAAD Japan 2022のサイボウズのセッションの発表資料です。

Google Slide版はこちらです：
https://docs.google.com/presentation/d/1fz1637rymBjb0ym0CfYFtT7N0KXMsa_BL-n3RXzYBtQ/edit?usp=sharing

Transcript

1. GAAD Japan 2022
   「職能の越境」で
   アクセシビリティが加速する
   

   View Slide

2. 登壇者紹介
   杉崎信清
   ⼩林⼤輔
   

   View Slide

3. サイボウズという会社
   チームワークあふれる
   社会を創る
   

   View Slide

4. 開発の知識がなくても
   業務に合わせたシステムを
   かんたんに作成できる
   クラウドサービス
   

   View Slide

5. フロントエンドリアーキテクチャプロジェクト
   ü kintoneのすべてのページを React で書き換える
   ü フロントエンドが複数の開発チームに分割され
   各チームが主体的に改善に取り組めるようにする
   kintone
   開発チームA
   kintone
   開発チームB
   kintone
   開発チームC
   

   View Slide

6. ユーザー体験を最⾼にするチーム（Mantle）
   開発チームを横断して⼀貫したユーザー体験を提供する
   kintone
   開発チームA
   kintone
   開発チームB
   kintone
   開発チームC
   Mantleチーム
   

   View Slide

7. Mantleチームの⽬標と活動内容
   kintone共通コンポーネントの
   集約と提供
   コンポーネントドキュメントの
   作成
   アクセシビリティや
   ユーザビリティの品質向上
   コンポーネントのテスト設計
   テストの⾃動化
   kintoneデザインシステムの作成・普及
   

   View Slide

8. Mantleチームの活動体制
   アクセシビリティ デザイン
   フロントエンド 品質保証
   

   View Slide

9. 越境することでみえてきたこと
   1. アクセシビリティの話題を持ち掛けやすい
   2. アクセシビリティの話題を持ち掛けられやすい
   3. アクセシビリティに詳しい仲間ができる
   

   View Slide

10. 1. アクセシビリティの話題を持ち掛けやすい
    Mantle以前はkintone開発チームとは別の独⽴したチームで活動
    フィードバックしたいけど忙しいんだろうか…
    ⽴て込んでいるときにタスク増やすことにならない...︖
    今どのタスクに着⼿してるんだろうか…
    スコープ外のことを指摘することにならない…︖
    

    View Slide

11. 話題にあげる⼼理的ハードルが下がる
    ▌話すべきタイミングを逃さない
    ▌込み⼊った話もしやすい
    デザイナー ホバーやフォーカススタイルの背景を確認する
    エンジニア フォーカスの改善⽅法・改修時期を相談する
    品質保証 キーボード不具合の現象確認・期待結果を相談する
    

    View Slide

12. 2. アクセシビリティの話題を持ち掛けられやすい
    ▌アクセシビリティに関する相談件数が増加
    l ⼤⼩さまざまな規模の相談を受けている
    l Mantleチームからも、それ以外のチームからも相談がある
    

    View Slide

13. アクセシビリティのIssueを登録してくれるように
    ▌登録されたIssueの例︓
    l キーボード操作で正常に動作しない
    l フォーカス・ホバーのスタイルが正常に表⽰されない
    

    View Slide

14. 3. アクセシビリティに明るい仲間ができる
    フロントエンド WAI-ARIA・キーボードフォーカスなどを⼀
    緒に考えてくれる
    品質保証 アクセシビリティの観点を盛り込んだ
    テストケースを作成してくれる
    デザイナー ⾊のコントラストやアイコンの表現を
    事前に相談してくれる
    

    View Slide

15. 今後の⽅針や理想も共有できるように
    ▌ドロップダウンのキーボード操作が破綻しないように
    開閉ボタンとポップアップをセットで提供したい
    ▌ボタンとリンクの違いを明確にして定義を決めたい
    ▌フォントサイズをremなどの相対単位で統⼀したい
    ▌アイコン画像を整理して統⼀したい
    

    View Slide

16. 越境することでアクセシビリティチームが学んだこと
    1. デザイン背景や実装を知る機会が増えた
    2. アクセシビリティの取り組みが加速した
    

    View Slide

17. 1. デザイン背景や実装を知る機会が増えた
    ▌踏み込んでデザインや実装に携わる機会が増えた
    ▌フロントエンドの知識・スキルを学ぶことができた
    確度の⾼いフィードバックができるようになった
    

    View Slide

18. 2.アクセシビリティの取り組みが加速した
    ▌これまでガイドラインや⾃動チェックなどの守りの姿勢で活動
    してきた
    ▌チームに⼊り、各職能を越境することでアクセシビリティの取
    り組みは加速した
    

    View Slide

19. まとめ
    ▌⾃然とアクセシビリティの話題ができる
    ▌アクセシビリティのスキルを⾃然と⾝に着けてもらえる
    ▌アクセシビリティに明るい仲間が増える
    職能の越境でアクセシビリティの取り組みは加速する
    

    View Slide