Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

すべての人にチームワークを サイボウズのアクセシビリティ

0 views

Published on

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

Published in: Internet
  • Be the first to comment

すべての人にチームワークを サイボウズのアクセシビリティ

  1. 1. すべての人にチームワークを サイボウズのアクセシビリティ Cybozu Meetup#5 小林大輔
  2. 2. 自己紹介 ▌小林大輔 (@sukoyakarizumu) ▌2012年 東京第2開発部 kintoneチーム プログラマー ▌2016年 デザイングループ兼務
  3. 3. アクセシビリティとは 障がい者・高齢者を含めて 「すべての人」が 製品・建物・サービスなどを 利用できること
  4. 4. 本日お話しすること 取り組む 理由 社内啓蒙 製品反映
  5. 5. サイボウズの理想 チームワークあふれる社会を創る
  6. 6. Accessibility = Access + Ability
  7. 7. ユーザは、わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか?
  8. 8. ユーザ サイボウズ製品 チーム
  9. 9. サイボウズにとって、アクセシビリティとは 「ユーザがチームにアクセスできる能力」
  10. 10. アクセシビリティを確保することは 「チームに参加したい」というユーザのねがいを 尊重すること
  11. 11. もくじ 取り組む 理由 社内啓蒙 製品反映
  12. 12. グループウェアでの啓蒙
  13. 13. アクセシビリティ勉強会 ▌参加メンバー約20人 • プログラマー • デザイナー • プロダクトマネージャー • ドキュメントライター ▌ 輪講形式で章ごとに発表
  14. 14. 外部の方による講演
  15. 15. 障がい者の方と一緒に学ぶ
  16. 16. 障がい者の方と一緒に学ぶ
  17. 17. 啓蒙活動のポイント ▌既存の情報共有の方法を利用する ▌コストが低くできる勉強会から開催する 「今できること」からはじめよう ▌開発の視点だけでない観点も盛りこむ 多くの人をまきこもう
  18. 18. もくじ 取り組む 理由 社内啓蒙 製品反映
  19. 19. 既存の問題を減らす 新規開発で アクセシビリティを 確保する
  20. 20. 「今できること」からはじめよう
  21. 21. アクセシビリティDay ▌WCAG2.0を読んで製品の問題点を洗い出す ▌さまざまな支援技術を使って製品を操作する 製品のアクセシビリティについての問題点を把握
  22. 22. 基準ごとに整理した場合の問題点 プロダクトにどんな価値を与えるかがわかりづらい
  23. 23. ユーザーストーリーの形式にして整理する <役割:ロービジョンのユーザー> として、 私は<目的:ヘッダーのアイコンを簡単に見分け> たい。 なぜなら<利益:ヘッダーの操作箇所を特定しやすくなる> からだ。 [ヘッダー] アイコンのコントラスト比を上げる
  24. 24. kintoneの優先順位づけ 新規開発 ユーザーストーリー アクセシビリティ ユーザーストーリー … … 統合
  25. 25. 既存の問題を減らす 新規開発で アクセシビリティを 確保する
  26. 26. 新規開発でアクセシビリティの問題を防ぐには? 要件定義 デザイン 実装 テスト
  27. 27. 新規開発でアクセシビリティの問題を防ぐには? 要件定義 デザイン 実装 テスト
  28. 28. ▌たくさんの要件に対応しきれない ▌レビューした要件の内容が変更されることがある ▌チームの知見が育たない 自分ひとりで完璧にこなそうとすると…
  29. 29. チームメンバーがレビューできるようにする デザイン チェックリスト 実装 チェックリスト 実装 チェックリスト 詳説
  30. 30. ▌見出し ▌キーボード操作 ▌画像と代替テキスト ▌感覚非依存 ▌リサイズ ▌動きのあるコンテンツ ▌コントラスト比 デザインチェックリストの項目
  31. 31. ▌実装するUIはキーボード操作できる用意がある ▌フォーカスしたときのスタイルが決まっている ▌フォーカスしたときにコンテキストが変化しない (別ウィンドウが開く, 別のコンポーネントの内容が大きく変化するなど) キーボード操作
  32. 32. ▌マークアップの原則 ▌画像 ▌ボタンとリンク ▌入力フォーム ▌見出し ▌ホバーとフォーカス 実装チェックリストの項目
  33. 33. ▌キーボードのみで操作可能にする ▌ページ遷移する場合: a要素を使う.必ずhref属性をつける. ▌ページ遷移しない処理を行う場合: button要素を使う (div要素やspan要素を使わない) ボタンとリンク
  34. 34. ▌多くの項目を一度に守ることは難しい ▌すべてのプロセスですべてのチェックが必要なわけではない ▌チームのスキルが高まったときにリストを更新すればよい 完全性よりチームが運用可能かどうかを重視する ベストよりベターを求めよう
  35. 35. 製品反映の事例
  36. 36. アプリストア再利用画面 キーボード操作可能
  37. 37. Webhook一覧・詳細画面 色のみに依存しないアイコン (モノクロにしても情報が伝わる)
  38. 38. アプリストア画面 見出し&代替テキスト
  39. 39. 本日お話ししたこと 取り組む 理由 社内啓蒙 製品反映
  40. 40. 取り組む 理由 社内啓蒙 製品反映 ①「今できること」を続けよう ② ベストよりベターを求めよう ③ 多くの人をまきこもう 大事な視点
  41. 41. おわり

×