フロントエンドカンファレンス2016のセッション内容です。

1. あなたの言葉で伝えるWebアクセシビリティ
小林 大輔 @sukoyakarizumu
サイボウズ株式会社

2. 小林大輔
▌サイボウズ株式会社 開発本部 東京第2開発部 プログラマー
▌Webアクセシビリティの啓蒙、機能開発など
自己紹介

3. ▌お伝えする内容
Webアクセシビリティの重要性を、社内の人たちに理解してもらうため、
わたしが取り組んできたこと
▌対象とする方
Webアクセシビリティに関わるすべての方
誰に何を伝えたい？

4. Webアクセシビリティとはなにか

5. ターゲットは障がい者・高齢者？

6. 色だけに依存した表現
一般色覚 P型色覚 T型色覚

7. 印刷

8. Kindle

9. Voice Over

10. KindleのVoiceOverでながら聞き
引用元: http://umenon.com/2013/11/17/ios7-kindle-voiceover/

11. ▌日光があたりまぶしい
▌運転中で画面に注目できない
▌周りがうるさくて音声入力できない
▌料理中で手が汚れている
利用環境の多様化
http://www.ict4everyone.jp/read/171.html

12. 人×デバイス×コンテキスト

13. Webアクセシビリティは
障がい者・高齢者を含めて
「すべての人」がWebにアクセスできること

14. Webの理念
The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.
Webの力はその普遍性にある。
障害の有無にかかわらず、誰もがアクセスできることが
本質的な側面なのだ。

15. 顧客
開発者 営業

16. 顧客
開発者 営業
他に優先すべきタスクがある
今のプロダクトにとって重要？

17. Webの理念を伝えても、相手の行動が変わらないのはなぜ？

18. わたしが考え、行動したこと
チームの
理想へ
翻訳する
理想を
広める
チャンスを
たいせつに
❶ ❷ ❸

19. 1. チームの理想へ翻訳する

20. 「理想」と「チーム」
▌「理想」とは、望んでいる状態
▌「チーム」とは、共通の「理想」を実現するために集まった集団
▌「チーム」は理想の実現のために行動する
理想の実現に寄与しない行動はしない
理想
チーム

21. あなたが相手にしているものは「チーム」
チームの理想に即していなければ、チームは動かない

22. 理想への翻訳が必要
Webの
理念
チームの
理想

23. サイボウズにあてはめて考えたこと

24. サイボウズのイメージ？
▌スケジュール管理
▌会議室予約
▌ワークフロー
▌業務メッセージ
▌メール管理
▌ファイル管理

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

26. ▌世界にはさまざまなチームがある
会社、学校、地域、家庭、ボランティア、公共団体etc...
▌それぞれのチームワークが向上し、
よりよい社会が実現されることがサイボウズの理想
▌そのためには、チームの情報共有やコミュニケーションが必要不可欠
チームワークあふれる社会を創る

27. サイボウズにとって
アクセシビリティとはなんだろう？

28. Accessibility = Access + Ability

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

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

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

32. サイボウズは、「チームにアクセスしたい」という
ユーザの願いにどう向き合うか？

33. サイボウズは、ユーザの願いにどう向き合うか
▌サイボウズは、「チームに参加したい」という願いを叶える立場ではない
▌「チームに参加したい」という願いを叶えられるのは「チーム」
▌サイボウズは、誰かの役に立ちたい、という願いに価値があると信じ
製品をアクセシブルにして、願いをチームに伝える道をつくることはできる
▌つまり「チームに参加したい」という願いを尊重することができる

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

35. 2. 理想を広める

36. 技術バー(チーム横断LT大会)
http://blog.cybozu.io/entry/8305

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

38. 書いてみた記事の例
▌VoiceOverの使い方
▌スイッチコントロールの使い方
▌WAI-ARIAの実装方法
▌他社製品のアクセシビリティの対応状況
まずは興味を持ってもらうことから。
「こんな世界があるのだな」と知ってもらえればよい

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

40. 参加者の声(第4章担当者)

41. 参加者の声(第8章担当者)

42. グループウェアでの勉強会まとめ
▌ドキュメントチームからの参加者が、有志がまとめている
▌勉強会に参加していない人向けに内容を共有する目的

43. 前回、小林さんのお話をおききして、とても感銘を受けたこと。
何のためのアクセシビリティか。
ユーザーはサイボウズ製品にアクセスすることで、何にアクセスしようとしているのか。
チームにアクセスしたいから、サイボウズ製品にアクセスするのではないか。
一番うれしかったコメント

44. 理想を広める
▌すでにある情報共有の場を活かす
▌場がなければ、自分でつくる

45. 3. チャンスをたいせつに

46. デザインのリニューアルのタイミング

47. アクセシビリティ基準に基づいたコントラストの設定
3.33 : 1 10.98:1

48. 開発合宿
▌プログラマー自身が
自由に機能追加を行う合宿
▌プロトタイプとして作った機能が
実際に製品に導入されることもある

49. フォームのキーボード操作対応

50. チームの
理想へ
翻訳する
理想を
広める
チャンスを
たいせつに
❶ ❷ ❸
おさらい

51. チームの理想に翻訳できるのは誰？

52. それは「あなた」
あなたは、Webの理念とチームの理想、
両方を知っているから

53. 「あなたの言葉」で理想を考え、広め、行動しよう

54. ありがとうございました
あなたの言葉で伝えるWebアクセシビリティ