20181128_kintoneチームのアクセシビリティ_デザイナー編 / 20181128 Accessibility kintone

UXCafe: チームで取り組む！サイボウズのアクセシビリティ
トーク3: kintoneチームのアクセシビリティ

イベントページ: https://cybozu.connpass.com/event/106185/

Transcript

1. アクセシビリティを日常に
   kintoneチームのアクセシビリティ
   サイボウズ株式会社
   小林大輔
   

   View Slide

2. 自己紹介
   小林大輔 ( @sukoyakarizumu )
   ▌2012年
   kintone プログラマー
   ▌2018年
   アクセシビリティエキスパート
   ウェブアクセシビリティ基盤委員会 WG1 委員
   

   View Slide

3. ▌アクセシビリティチェックリストを作成する
   ▌実装した成果物のレビュー会を開く
   ▌書籍の輪講
   ▌外部の有識者による講演会
   ▌当事者を交えたワークショップ
   今まで行ってきたkintoneチームへの施策
   

   View Slide

4. アクセシビリティチェックリストを作成する
   ▌ごく簡単なチェックリストを作成(A4に収まるくらい)
   デザイン
   チェックリスト
   実装
   チェックリスト
   

   View Slide

5. View Slide

6. チェックリスト
   できたこと・できなかったこと
   ▌基本的なHTML・CSSのカタログとして使ってもらえた
   ▌上流でなかなか活用されない(要件定義の段階など)
   ▌対応する度合いがまちまち
   ▌複雑なUIに対応できなかった
   

   View Slide

7. アクセシビリティレビュー会
   ▌成果物のアクセシビリティをチェックして共有
   VoiceOverでは
   こんな読み上げになります
   ここはキーボード操作
   できないですね
   ここはチェックリストを
   参照しましょう
   

   View Slide

8. アクセシビリティレビュー会
   できたこと・できなかったこと
   ▌アクセシビリティ対応が足りないことが理解された
   ▌チェックリストを参照してもらえる機会が増えた
   ▌修正コストが高く直せないことがあった
   ▌開催コストが高く期間が空いてしまった
   

   View Slide

9. アクセシビリティは大切. でも…
   

   View Slide

10. アクセシビリティを特別視せず
    日常的にメンバーと議論しよう
    

    View Slide

11. Try1: 社内ユーザビリティテスト
    ロービジョンの社員も混ぜてユーザビリティテストを実施
    Aさん(営業部門)
    Bさん(営業部門)
    Cさん(受発注部門)
    Dさん(コンサル部門)
    Eさん(コンサル部門)
    ロービジョン
    反転・拡大を使用
    Fさん(コンサル部門)
    ロービジョン
    反転を使用
    

    View Slide

12. ▌通常のユーザビリティテストと同じように、要件定義やデザ
    インを担当するメンバーに観察してもらえた
    ▌具体的なデザインの改善につながった(反転を考慮した色選び)
    社内ユーザビリティテストの利点
    

    View Slide

13. ▌最近のkintoneプログラマー&デザイナーの開発スタイル
    • 1つの画面を複数のデザイナーでデザインする
    • 1つの機能を複数のプログラマーで実装する
    Try2: モブデザイン・モブプログラミング
    

    View Slide

14. View Slide

15. ▌一緒によりよいHTML/CSSを考える
    ▌WAI-ARIAのテクニックをその場で伝える
    ▌VoiceOverを起動して読み上げを聞いてもらう
    

    View Slide

16. ▌実装をその場で確認するため修正コストが低い
    ▌プログラマー・デザイナー全員に知見を共有できる
    ▌レビュー会と比べて、チームメンバーにコストがかからない
    モブデザイン・モブプログラミングの利点
    

    View Slide

17. Try3: プランニングで議論
    プランニングとは？
    ▌要件を実装するにあたり、
    実装時の懸念点や考慮すべきポイントを議論する会議
    ▌週1回開催
    

    View Slide

18. View Slide

19. アニメーションを
    CSSでどう実装する？
    コンポーネントは
    こんな構成がいい
    こんな風に実装すると
    レンダリングがはやそう
    VoiceOverで適切に
    読み上げられるようにしよう
    

    View Slide

20. ▌開発者全員にアクセシビリティの課題を認識してもらえる
    ▌複雑なUIについて、対応方針を具体的に議論できる
    ▌プランニングはもともとある会議体なので参加するだけ
    プランニングの利点
    

    View Slide

21. ▌今ある開発プロセスを使ってアクセシビリティを日常にしよう
    ▌kintoneチームの例
    • 社内ユーザビリティテスト
    • モブデザイン・モブプログラミング
    • プランニング
    まとめ
    

    View Slide