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

UXCafe: チームで取り組む！サイボウズのアクセシビリティ
トーク1: Garoonチームのアクセシビリティ
デザイナー編

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

Transcript

1. Garoon x Accessibility
   

   View Slide

2. 自己紹介
   ▌河内山（コウチヤマ）
   ⚫サイボウズ グローバル開発本部 デザイングループ
   ⚫2006年中途入社
   ⚫入社以来ずっとUX/UIデザイン部署
   ⚫ほとんどのサイボウズ製品に絡む
   ⚫2011年から Garoon 担当 @kochitaku
   

   View Slide

3. 目次
   ▌Garoonの紹介（軽め）
   ▌Garoonのアクセシビリティ対応の歴史
   ▌職能別活動紹介（デザイナー/PG/QA）
   河内山 杉山 小関
   

   View Slide

4. Garoon（ガルーン）について
   ▌中堅・大規模組織向けグループウェア
   ▌2002年～
   ▌オンプレミス / クラウド
   ▌4,800社以上 / 200万ユーザー以上
   ▌中央省庁における導入実績あり
   

   View Slide

5. アクセシビリティ対応の歴史
   *PC用WEB画面
   

   View Slide

6. 4年前
   ゴールが良くわからない、
   とてつもなく大変そう
   大事なのはわかるけど…
   

   View Slide

7. 現在
   ゴールと
   やるべきことが
   わかってきた!
   チームで試行錯誤で
   進めていこう!
   

   View Slide

8. 現在
   Garoon
   アクセシビリティ
   ギルド
   

   View Slide

9. ギルドができるまで
   ▌会社のビジョンとのつながりを提唱（by 小林さん）
   “ 多くの人が製品を通してチームワークに参加するために
   アクセシビリティ対応は大事 ”
   ▼
   ▌社内で心動かされるメンバーが急増
   ▼
   ▌Garoon担当だったデザイナー/PGで結成。後にQA参加
   

   View Slide

10. ギルド活動
    ▌ゴールの設定
    ⚫Garoonユーザーがチームにアクセスできると自信をもって言える。
    ⚫アクセシビリティ対応状況を宣言している。
    ▌時間を決めてその場で活動
    ⚫宿題なし。他タスク都合で後回しになりがちなため
    ⚫1h/2w
    ⚫WCAG2.0 読み合わせ
    ⚫スクリーンリーダー、拡大表示で製品を使う
    ▌勉強会・ワークショップ参加
    ⚫社内勉強会
    ⚫全盲、弱視の方に製品を触ってもらう
    

    View Slide

11. ギルド活動
    ▌アクセシビリティチェックリスト
    ⚫WCAG2.0網羅は厳しいため、
    最低限を精査して製品に関する部分だけに絞る
    ⚫開発メンバーがより
    理解しやすい文言に置き換え
    ⚫仮運用スタート
    

    View Slide

12. ギルド活動
    ▌要件化へのアピール
    ⚫PM(Product Manager)にアクセシビリティの啓蒙
    ⚫製品価値向上に紐づける
    ⚫ 導入検討時のプラス材料
    ⚫ ブランドイメージアップ
    ⚫ インクルーシブデザイン（モダンな思考）
    ★祝★要件化
    

    View Slide

13. ギルド活動
    ▌進め方プラン
    ⚫各 Ver で n% アクセシビリティ改善要件を入れる
    XXX
    XX
    X
    XX
    X XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    要件
    

    View Slide

14. プランが。。。
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XXX
    XX
    X
    XXX
    XXX
    要件
    XXX
    XX
    X
    XXX
    XXX
    

    View Slide

15. ギルド活動
    ▌最新の進め方
    ⚫新規要件で触れるところはアクセシビリティも考慮
    XXX
    XX
    X
    XXX
    XXX
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    要件
    XXX
    XX
    X
    粛
    々
    粛
    々
    

    View Slide

16. ギルド活動 所感
    ▌1人は厳しい。仲間を見つける
    ▌心が動くポイント
    ⚫社会貢献・正義感
    ⚫ビジョンとの関係性
    ⚫製品価値向上
    ⚫好奇心
    ▌試行錯誤
    ▌歩みを止めない
    先は長いよ！
    

    View Slide

17. 続きまして デザイナー編
    

    View Slide

18. デザイナーの立ち位置
    PM Designer
    UX/UIデザイン
    PG
    QA
    UX/UIデザイン
    html/css/image
    UI不具合
    

    View Slide

19. 主なデザイナーのチェック
    ▌マウス/キーボード/タッチデバイスで操作できる
    ⚫×例：D&Dのみだとキーボードで操作できない
    ▌スクリーンリーダーで情報が把握できる
    ⚫×例：アイコンのみの部分に補足情報がない
    ▌色のみで情報を伝えない
    ▌文字と背景色のコントラスト比を確保する
    ▌ブラウザで200%拡大でも操作できる
    

    View Slide

20. 新デザイン化とアクセシビリティ
    2018
    

    View Slide

21. 新デザイン化とアクセシビリティ
    ▌軸
    ⚫トレンド（見た目・操作・効果）
    ⚫社内他製品との親和性
    ⚫アクセシビリティ
    

    View Slide

22. 新デザイン化とアクセシビリティ
    ▌ビジュアルの変更
    ⚫色
    ⚫ コントラスト比考慮
    ⚫アイコン
    ⚫ 絵柄の単純化
    ⚫ 拡大考慮。PNG → SVG
    

    View Slide

23. デザイナー編 所感
    ▌まずはキーボードのみでスクリーンリーダーで操作してみる
    ⚫WAI-ARIAタグがどのように有用かがわかる
    ⚫いろいろわかる
    ⚫Win：NVDA / Mac：Voice Over
    ▌ビジュアルの変更は進めやすい
    ⚫ロジックへの影響が少ない
    ⚫デザイナーのみで進めやすい
    

    View Slide

24. 最後に
    ▌アクセシビリティ対応を日常にしたい
    ⚫特別扱いしない
    ⚫ブラウザチェックのように
    ⚫歯を磨くように
    

    View Slide

25. Thanks
    :)
    

    View Slide