Amebaブログにアクセシビリティを定着させる土台作り

Transcript

1. Muddy Web #2 2021.11.12
2. Amebaブログにアクセシビリティを 定着させる土台作り
3. 安田 慎 2016年度 中途入社 Ameba事業部 / フロントエンドエンジニア
4. 今日お話しすること
5. • 定着させるための取り組み • 改善事例と気をつけているポイント
6. Amebaについて
9. 誰もがいつでも、迷わず 「書く」「読む」「応える」 ができる状態を目指す
11. 定着させるための取り組み
12. オンボーディング
13. オンボーディング
14. オンボーディング なぜAmebaでアクセシビリティに取り組むのか？
15. オンボーディング 資料は適宜アップデート
16. 問題点や疑問点の集約
17. 問題点や疑問点の集約 コミュニケーションツールの活用
18. 問題点や疑問点の集約 フィードバックや疑問点の吸い上げを自動化
19. 問題点や疑問点の集約 気軽に　　リアクションを
20. コードレビュー
21. コードレビュー GitHub Team Mensions
22. コードレビュー レビューで困った時は @ameba-accessibility-team
23. コードレビュー 困ったら聞いてみる
24. コードレビュー アクセシビリティ観点でレビュー 実際に手を動かしてレビューしてみる
25. コードレビュー • そもそもタイトル（titleタグ）が設定されていない • htmlタグにページの言語が指定されていない • outline: none;が指定されているためフォーカスが可視化さ れていない • アニメーションがすごくチカチカする • 見出しレベル3の次が見出しレベル6だ
26. コードレビュー 画像に代替テキストが全然設定されていない 1.1.1 画像に代替テキストを提供する [A] https://a11y-guidelines.ameba.design/1/1/1/
27. コードレビュー キーボードの操作を受け付けてくれないリンク 2.1.1 キーボード、タッチデバイスで操作できる [A] https://a11y-guidelines.ameba.design/2/1/1/ <a href="https://ameblo.jp/accessibility" rel="noopener noreferrer" target="_blank" tabIndex="-1" >もっと見る</a>
28. コードレビュー 色々と問題のあるフォーム 通常時 エラー時
29. 改善への取り組み
30. 改善への取り組み まずはissue化
31. 改善への取り組み issue化する時に気をつけていること • 粒度は細かく • どの適合レベルに該当しているのか分かるように • アクセシビリティラベルをつけて絞り込みができるように
32. 改善への取り組み アイコンだけで説明していたものに代替テキストを追加 見えなかったフォーカスを見えるように
33. 改善への取り組み コントラスト比の改善
34. 改善への取り組み コントラスト比の改善
35. 改善への取り組み コントラスト比の改善 変更前 変更前 変更前 変更後 変更後 変更後
36. まとめ • 改善は無理せずこつこつと • なぜアクセシビリティをやるかを定期的に発信 • 継続して積み重ねていくためにチームで取り組む
37. おわり