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

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

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

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

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

Daisuke Kobayashi

May 19, 2022
Tweet

More Decks by Daisuke Kobayashi

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide