運用中のプロジェクトでアクセシビリティ改善を推進させる為にやったことを話しました。 野崎 達也（サイバーエージェント REQU / フロントエンドエンジニア） 戸塚 真由子（サイバーエージェント REQU / UIデザイナー）

1. アクセシビリティ導入法
チームの意識作りと実際の勉強方法

2. 自己紹介
Self‐Introduction

3. 野崎 達也 フロントエンドエンジニア
のっちさん
最近厄除けに行った、呪われ気味のお兄さん
戸塚 真由子 UIデザイナー
とっつー
とっつーさん→1023→10/23で覚えて下さい

5. アジェンダ
1. なぜA11Yを始めようと思ったか
2. REQUのA11Y目標
3. デザインとA11Y
4. これからやりたいこと

6. なぜA11Yを
始めようと思ったか
Why?

7. 危機感
やばいって思ってた
でもリリースするので精一杯だったんだよお

8. 社内にA11Y推進グループがあり
その方々にお話を聞いた

9. 実際今のREQUは
どうなってるんだろう？

10. スクリーンリーダーを利用して
購入できるかやってみた

11. スクリーンリーダーで
購入できなかった

12. ・画像のURLがそのまま読まれる…
・モーダルを開いてもフォーカスされない…
・隠しボタンを見つけてしまう

13. 画像のURLがそのまま読まれる…
下記サムネイルをクリックすると動画が再生されます

14. モーダルを開いてもフォーカスされない…
下記サムネイルをクリックすると動画が再生されます

15. 隠しボタンを見つけてしまう
下記サムネイルをクリックすると動画が再生されます

16. でも何から手をつければ…

17. ということで
まず知識をつけよう！

18. 毎週、輪読会を開催したよ

19. これを読みました
体系的に学べる！
デザイニングWebアクセシビリティ

20. Engineer Designer

21. A11Y改善するには
チーム全員の理解が必要

22. Director
PM
Engineer Designer

23. ・全員で進めることでA11Yに対して共通認識ができ、
企画の段階で議論できるようになった
良かったこと
・その場でプロダクトについて話すことができ、
改善点が見えてきた

24. REQUのA11Y目標
Our Objective

25. 私達は一人でも多くのお客様がいつでも、
迷わず「買える」と「売れる」が
できる状態を目指す

26. 優先度も決めたった

27. 買える
① 商品詳細ページ
② 取引メッセージ
④ 注文履歴ページ
売れる
③ 商品登録ページ
⑤ 注文管理系

28. Happy!

29. 目標 ：メンバー間の共通認識
優先度：改善箇所の明確化
まとめ

30. デザインとA11Y
Design&A11Y

31. Enjoy Innovation!

32. アクションシートを
利用した決済選択
左のサムネイルをクリックすると
動画が再生されます

33. スクリーンリーダで
購入できなかった

34. 回遊枠はasideになどデザイナーだけでは
出なかったアイデアが出た
改善アイデアを一緒に議論した

35. 新しい体験 x A11Y

36. 改善委員会
Improvement

37. 技術者発信でどんどん
ユーザービリティ
改善しちゃうチーム

38. 改善前のUI
消えるエラー
左のサムネイルをクリックすると
動画が再生されます

39. フォーム直下に
エラーを表示
改善しました

40. これから
やりたいこと
Future

41. WCAG2.1の項目を
Open Amebaを参考にどこまで
対応していくか決定
https://openameba.github.io/
a11y-guidelines/
URL

42. インクルーシブHTML
+CSS&JavaScript
これを読みます
技術的に学べる！

43. 最後に
Lastly

44. ありがとうございました