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

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

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

Transcript

1. Garoon x Accessibility
2. 自己紹介 ▌河内山（コウチヤマ） ⚫サイボウズ グローバル開発本部 デザイングループ ⚫2006年中途入社 ⚫入社以来ずっとUX/UIデザイン部署 ⚫ほとんどのサイボウズ製品に絡む ⚫2011年から Garoon 担当 @kochitaku
3. 目次 ▌Garoonの紹介（軽め） ▌Garoonのアクセシビリティ対応の歴史 ▌職能別活動紹介（デザイナー/PG/QA） 河内山 杉山 小関
4. Garoon（ガルーン）について ▌中堅・大規模組織向けグループウェア ▌2002年～ ▌オンプレミス / クラウド ▌4,800社以上 / 200万ユーザー以上 ▌中央省庁における導入実績あり
5. アクセシビリティ対応の歴史 *PC用WEB画面
6. 4年前 ゴールが良くわからない、 とてつもなく大変そう 大事なのはわかるけど…
7. 現在 ゴールと やるべきことが わかってきた! チームで試行錯誤で 進めていこう!
8. 現在 Garoon アクセシビリティ ギルド
9. ギルドができるまで ▌会社のビジョンとのつながりを提唱（by 小林さん） “ 多くの人が製品を通してチームワークに参加するために アクセシビリティ対応は大事 ” ▼ ▌社内で心動かされるメンバーが急増 ▼ ▌Garoon担当だったデザイナー/PGで結成。後にQA参加
10. ギルド活動 ▌ゴールの設定 ⚫Garoonユーザーがチームにアクセスできると自信をもって言える。 ⚫アクセシビリティ対応状況を宣言している。 ▌時間を決めてその場で活動 ⚫宿題なし。他タスク都合で後回しになりがちなため ⚫1h/2w ⚫WCAG2.0 読み合わせ ⚫スクリーンリーダー、拡大表示で製品を使う ▌勉強会・ワークショップ参加 ⚫社内勉強会 ⚫全盲、弱視の方に製品を触ってもらう
11. ギルド活動 ▌アクセシビリティチェックリスト ⚫WCAG2.0網羅は厳しいため、 最低限を精査して製品に関する部分だけに絞る ⚫開発メンバーがより 理解しやすい文言に置き換え ⚫仮運用スタート
12. ギルド活動 ▌要件化へのアピール ⚫PM(Product Manager)にアクセシビリティの啓蒙 ⚫製品価値向上に紐づける ⚫ 導入検討時のプラス材料 ⚫ ブランドイメージアップ ⚫ インクルーシブデザイン（モダンな思考） ★祝★要件化
13. ギルド活動 ▌進め方プラン ⚫各 Ver で n% アクセシビリティ改善要件を入れる XXX XX X XX X XX X XX X XX X XX X XX X XX X XX X XX X 要件
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
15. ギルド活動 ▌最新の進め方 ⚫新規要件で触れるところはアクセシビリティも考慮 XXX XX X XXX XXX XX X XX X XX X XX X XX X 要件 XXX XX X 粛 々 粛 々
16. ギルド活動 所感 ▌1人は厳しい。仲間を見つける ▌心が動くポイント ⚫社会貢献・正義感 ⚫ビジョンとの関係性 ⚫製品価値向上 ⚫好奇心 ▌試行錯誤 ▌歩みを止めない 先は長いよ！
17. 続きまして デザイナー編
18. デザイナーの立ち位置 PM Designer UX/UIデザイン PG QA UX/UIデザイン html/css/image UI不具合
19. 主なデザイナーのチェック ▌マウス/キーボード/タッチデバイスで操作できる ⚫×例：D&Dのみだとキーボードで操作できない ▌スクリーンリーダーで情報が把握できる ⚫×例：アイコンのみの部分に補足情報がない ▌色のみで情報を伝えない ▌文字と背景色のコントラスト比を確保する ▌ブラウザで200%拡大でも操作できる
20. 新デザイン化とアクセシビリティ 2018
21. 新デザイン化とアクセシビリティ ▌軸 ⚫トレンド（見た目・操作・効果） ⚫社内他製品との親和性 ⚫アクセシビリティ
22. 新デザイン化とアクセシビリティ ▌ビジュアルの変更 ⚫色 ⚫ コントラスト比考慮 ⚫アイコン ⚫ 絵柄の単純化 ⚫ 拡大考慮。PNG → SVG
23. デザイナー編 所感 ▌まずはキーボードのみでスクリーンリーダーで操作してみる ⚫WAI-ARIAタグがどのように有用かがわかる ⚫いろいろわかる ⚫Win：NVDA / Mac：Voice Over ▌ビジュアルの変更は進めやすい ⚫ロジックへの影響が少ない ⚫デザイナーのみで進めやすい
24. 最後に ▌アクセシビリティ対応を日常にしたい ⚫特別扱いしない ⚫ブラウザチェックのように ⚫歯を磨くように
25. Thanks :)