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. アクセシビリティ
はじめませんか？