Battle Conference U30 での発表内容です。 アクセシビリティ対応は派手な機能追加と比べるとどうしても優先度が低くなりがちです。アクセシビリティ対応を開発チームで継続的に進めていくために、サイボウズで行った啓蒙活動・草の根活動を紹介します。

1. アクセシビリティ
はじめました
サイボウズ株式会社 杉山祐一

2. About me
そろそろ新卒３年目のプログラマ
大企業向けグループウェア Garoon
副業ミュージシャン（自称）

3. Agenda
Webアクセシビリティって？
進まないアクセシビリティ対応
アクセシビリティ対応が進んでから気がついたこと

4. Webアクセシビリティって?

5. 日本Webアクセシビリティ協会によると
アクセシビリティ(accessibility)とは高齢者・障害者を含む誰もが、
様々な製品や建物やサービスなどを支障なく利用できるかどうか、
あるいはその度合いを表す言葉です。
http://www.jawaa.or.jp/Accessibility/Accessibility.html

6. 日本Webアクセシビリティ協会によると
アクセシビリティ(accessibility)とは高齢者・障害者を含む誰もが、
様々な製品や建物やサービスなどを支障なく利用できるかどうか、
あるいはその度合いを表す言葉です。
http://www.jawaa.or.jp/Accessibility/Accessibility.html
誰でも最低限使えるようにすること

7. 画像にはalt タグをつける
全盲の人でも画像が何かわかる

8. 背景と文字のコントラスト比を
一定以上に
阿部 寛
名倉 潤
オダギリジョー
向井 理
バカリズム
羽生 結弦
星野 源

9. 背景と文字のコントラスト比を
一定以上に
阿部 寛
名倉 潤
オダギリジョー
向井 理
バカリズム
羽生 結弦
星野 源
弱視の人でもはっきり文字が読める

10. 背景と文字のコントラスト比を
一定以上に
阿部 寛
名倉 潤
オダギリジョー
向井 理
バカリズム
羽生 結弦
星野 源
WCAG AAA基準不適合
WCAG AA基準不適合！
7:1 のコントラスト比
4.5:1 のコントラスト比

11. ほかにもたくさん
キーボード操作を行えるようにする
200％まで拡大可能にする
スタイルシートが当たっていなくても正しく読むことができるようにする
正しいHTMLを書く
...

12. 詳しくはWCAG2.xを！

13. アクセシビリティ
はじめました

14. 3か月後

15. なんの成果も！！
得られませんでした！！

16. アクセシビリティ
はじまりません

18. 時間が取れなかった
手が空いたらやろう。思い続けて3ヶ月。
もしかして

19. Accessibility Day！
2週間ごとに半日アクセシビリティのことだけをやる日を決める
予定が決まっているので先に通常タスクを調整できる

20. ローコストで開催する
Small Start
デザイナー 1名 + プログラマ 1名
 事前準備は原則なし
 宿題も原則なし

21. 学び
待っていても時間はいつまでたってもできない
時間がないなら、さきに作ればいいじゃない
ローコストにして時間を区切ればメリハリが出る

22. メンバー間に温度差がある
プロダクトマネージャ「次期バージョンで前向きに検討しよう」
もしかして

23. 実際に見てもらう
百聞は一見に如かず
社内でアクセシビリティのワークショップ
障害者の方に製品を実際に触ってもらう

25. 学び
自分たちの製品を使えないユーザーを
目の当たりにするのは結構つらい
多様なユーザーを知ることは大事
メンバーに知ってもらうことはもっと大事

26. どこから対応するかが決められない
「全部対応するのにどれくらいかかる？」
「それ調べるのに3か月もらっていいですか？」
もしかして

28. アクセシビリティチェックツールをかける
ChromeLens
https://chrome.google.com/webstore/detail/chrome
lens/idikgljglpfilbhaboonnpnnincjhjkd

30. ごめんなさい

31. アクセスしにくい環境から触ってみる
スクリーンリーダー（音声読み上げソフト）から操作する
拡大鏡を使ってみる
キーボードだけで操作する
モノトーン環境での表示を確かめる
アクセスしにくい環境から触ることで、より重要な問題点が浮き彫りになる

32. ユーザーごとに困るポイントは異なる
altがない・テーブルレイアウト
クリック操作前提のパーツ
広い余白 ・ スクロールするパーツ
一行が長い ・ レスポンシブデザイン
フォーカスできない要素がある
隠れている要素にフォーカスが当たる
キーボードだけを使うユーザー
拡大鏡利用ユーザー
スクリーンリーダーユーザー

33. altがない・テーブルレイアウト
クリック操作前提のパーツ
広い余白 ・ スクロールするパーツ
一行が長い ・ レスポンシブデザイン
フォーカスできない要素がある
隠れている要素にフォーカスが当たる
ユーザーごとに困るポイントは異なる
キーボードだけを使うユーザー
拡大鏡ユーザー
スクリーンリーダーユーザー
何に対応すればどんなユーザーのアクセシビリティが改善するかがわかる

34. 学び
自動チェックツールも大事だが、実際に触ってみることも大事
自分の体験にすることで、アクセシビリティ対応のモチベーション
が上がる

35. アクセシビリティ対応が進んでから気づいたこと

36. 誰かが使いやすい製品は、
他の誰かにも使いやすい
代替テキストは、初めて製品を触るユーザーへのヒントになる
余白が広すぎる場合、晴眼者でも見にくくなる
キーボードだけで操作できる製品は、多くのユーザーにも便利
アクセシビリティ対応は障害者向けの対応ではない！

37. 完ペキは目指してもしょうがない
ユーザーも利用環境も多様
完ペキに対応するのはそもそも無理
基準をクリアすることがアクセシビリティ対応ではない！

38. アクセシビリティ対応はただのコストじゃない
開発的メリット
• 実装コストが下がるときもある
• HTMLがきれいになる
• E2Eテスト自動化が捗る
• SEO対策
ビジネス的メリット
• 導入検討時のプラス材料
• ブランドイメージアップ
コストは十分ペイできる！

39. アクセシビリティ
はじめませんか？