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.

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

2,565 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. アクセシビリティ導入法 チームの意識作りと実際の勉強方法
  2. 2. 自己紹介 Self‐Introduction
  3. 3. 野崎 達也 フロントエンドエンジニア のっちさん 最近厄除けに行った、呪われ気味のお兄さん 戸塚 真由子 UIデザイナー とっつー とっつーさん→1023→10/23で覚えて下さい
  4. 4. アジェンダ 1. なぜA11Yを始めようと思ったか 2. REQUのA11Y目標 3. デザインとA11Y 4. これからやりたいこと
  5. 5. なぜA11Yを 始めようと思ったか Why?
  6. 6. 危機感  やばいって思ってた でもリリースするので精一杯だったんだよお
  7. 7. 社内にA11Y推進グループがあり その方々にお話を聞いた
  8. 8. 実際今のREQUは どうなってるんだろう?
  9. 9. スクリーンリーダーを利用して 購入できるかやってみた
  10. 10. スクリーンリーダーで 購入できなかった
  11. 11. ・画像のURLがそのまま読まれる… ・モーダルを開いてもフォーカスされない… ・隠しボタンを見つけてしまう
  12. 12. 画像のURLがそのまま読まれる… 下記サムネイルをクリックすると動画が再生されます
  13. 13. モーダルを開いてもフォーカスされない… 下記サムネイルをクリックすると動画が再生されます
  14. 14. 隠しボタンを見つけてしまう 下記サムネイルをクリックすると動画が再生されます
  15. 15. でも何から手をつければ…
  16. 16. ということで まず知識をつけよう!
  17. 17. 毎週、輪読会を開催したよ
  18. 18. これを読みました 体系的に学べる! デザイニングWebアクセシビリティ
  19. 19. Engineer Designer
  20. 20. A11Y改善するには チーム全員の理解が必要
  21. 21. Director PM Engineer Designer
  22. 22. ・全員で進めることでA11Yに対して共通認識ができ、  企画の段階で議論できるようになった 良かったこと  ・その場でプロダクトについて話すことができ、  改善点が見えてきた
  23. 23. REQUのA11Y目標 Our Objective
  24. 24. 私達は一人でも多くのお客様がいつでも、 迷わず「買える」と「売れる」が できる状態を目指す
  25. 25. 優先度も決めたった 
  26. 26. 買える ① 商品詳細ページ ② 取引メッセージ ④ 注文履歴ページ 売れる ③ 商品登録ページ ⑤ 注文管理系
  27. 27. Happy!
  28. 28. 目標 :メンバー間の共通認識 優先度:改善箇所の明確化 まとめ
  29. 29. デザインとA11Y Design&A11Y
  30. 30. Enjoy Innovation!
  31. 31. アクションシートを 利用した決済選択 左のサムネイルをクリックすると 動画が再生されます
  32. 32. スクリーンリーダで 購入できなかった
  33. 33. 回遊枠はasideになどデザイナーだけでは 出なかったアイデアが出た 改善アイデアを一緒に議論した
  34. 34. 新しい体験 x A11Y
  35. 35. 改善委員会 Improvement
  36. 36. 技術者発信でどんどん ユーザービリティ 改善しちゃうチーム 
  37. 37. 改善前のUI 消えるエラー  左のサムネイルをクリックすると 動画が再生されます
  38. 38. フォーム直下に エラーを表示 改善しました
  39. 39. これから やりたいこと Future
  40. 40. WCAG2.1の項目を Open Amebaを参考にどこまで 対応していくか決定 https://openameba.github.io/ a11y-guidelines/ URL
  41. 41. インクルーシブHTML +CSS&JavaScript これを読みます 技術的に学べる!
  42. 42. 最後に Lastly
  43. 43. ありがとうございました

×