2017/6/20に行われたCybozu Meetup #5の発表資料です。

1. すべての人にチームワークを
サイボウズのアクセシビリティ
Cybozu Meetup#5
小林大輔

2. 自己紹介
▌小林大輔 (@sukoyakarizumu)
▌2012年 東京第2開発部 kintoneチーム プログラマー
▌2016年 デザイングループ兼務

3. アクセシビリティとは
障がい者・高齢者を含めて
「すべての人」が 製品・建物・サービスなどを
利用できること

4. 本日お話しすること
取り組む
理由
社内啓蒙 製品反映

5. サイボウズの理想
チームワークあふれる社会を創る

6. Accessibility = Access + Ability

7. ユーザは、わたしたちの製品にアクセスすることで
何にアクセスしようとしているのか？

8. ユーザ サイボウズ製品 チーム

9. サイボウズにとって、アクセシビリティとは
「ユーザがチームにアクセスできる能力」

10. アクセシビリティを確保することは
「チームに参加したい」というユーザのねがいを
尊重すること

12. もくじ
取り組む
理由
社内啓蒙 製品反映

13. グループウェアでの啓蒙

14. アクセシビリティ勉強会
▌参加メンバー約20人
• プログラマー
• デザイナー
• プロダクトマネージャー
• ドキュメントライター
▌ 輪講形式で章ごとに発表

15. 外部の方による講演

16. 障がい者の方と一緒に学ぶ

17. 障がい者の方と一緒に学ぶ

18. 啓蒙活動のポイント
▌既存の情報共有の方法を利用する
▌コストが低くできる勉強会から開催する
「今できること」からはじめよう
▌開発の視点だけでない観点も盛りこむ
多くの人をまきこもう

19. もくじ
取り組む
理由
社内啓蒙 製品反映

20. 既存の問題を減らす
新規開発で
アクセシビリティを
確保する

21. 「今できること」からはじめよう

22. アクセシビリティDay
▌WCAG2.0を読んで製品の問題点を洗い出す
▌さまざまな支援技術を使って製品を操作する
製品のアクセシビリティについての問題点を把握

24. 基準ごとに整理した場合の問題点
プロダクトにどんな価値を与えるかがわかりづらい

25. ユーザーストーリーの形式にして整理する
<役割:ロービジョンのユーザー> として、
私は<目的:ヘッダーのアイコンを簡単に見分け> たい。
なぜなら<利益:ヘッダーの操作箇所を特定しやすくなる>
からだ。
[ヘッダー] アイコンのコントラスト比を上げる

26. kintoneの優先順位づけ
新規開発
ユーザーストーリー
アクセシビリティ
ユーザーストーリー
…
…
統合

27. 既存の問題を減らす
新規開発で
アクセシビリティを
確保する

28. 新規開発でアクセシビリティの問題を防ぐには？
要件定義 デザイン 実装 テスト

29. 新規開発でアクセシビリティの問題を防ぐには？
要件定義 デザイン 実装 テスト

30. ▌たくさんの要件に対応しきれない
▌レビューした要件の内容が変更されることがある
▌チームの知見が育たない
自分ひとりで完璧にこなそうとすると…

31. チームメンバーがレビューできるようにする
デザイン
チェックリスト
実装
チェックリスト
実装
チェックリスト
詳説

32. ▌見出し
▌キーボード操作
▌画像と代替テキスト
▌感覚非依存
▌リサイズ
▌動きのあるコンテンツ
▌コントラスト比
デザインチェックリストの項目

33. ▌実装するUIはキーボード操作できる用意がある
▌フォーカスしたときのスタイルが決まっている
▌フォーカスしたときにコンテキストが変化しない
(別ウィンドウが開く, 別のコンポーネントの内容が大きく変化するなど)
キーボード操作

34. ▌マークアップの原則
▌画像
▌ボタンとリンク
▌入力フォーム
▌見出し
▌ホバーとフォーカス
実装チェックリストの項目

35. ▌キーボードのみで操作可能にする
▌ページ遷移する場合: a要素を使う.必ずhref属性をつける.
▌ページ遷移しない処理を行う場合: button要素を使う
(div要素やspan要素を使わない)
ボタンとリンク

36. ▌多くの項目を一度に守ることは難しい
▌すべてのプロセスですべてのチェックが必要なわけではない
▌チームのスキルが高まったときにリストを更新すればよい
完全性よりチームが運用可能かどうかを重視する
ベストよりベターを求めよう

37. 製品反映の事例

38. アプリストア再利用画面
キーボード操作可能

39. Webhook一覧・詳細画面
色のみに依存しないアイコン
（モノクロにしても情報が伝わる）

40. アプリストア画面
見出し＆代替テキスト

41. 本日お話ししたこと
取り組む
理由
社内啓蒙 製品反映

42. 取り組む
理由
社内啓蒙 製品反映
①「今できること」を続けよう
② ベストよりベターを求めよう
③ 多くの人をまきこもう
大事な視点

43. おわり