「アクセシビリティやるぞ！LT祭り ＃6

https://note.com/a11y_tester/n/ne4b729eb698c

Transcript

1. ジャンプTOON Web における
 アクセシビリティの取り組み 
 株式会社サイバーエージェント 
 浅原昌大

2. 株式会社サイバーエージェント
 浅原昌大
 @assa1605
 @assa1605
 2023年 Web フロントエンジニアとして新卒入社 今年2年目
 ジャンプTOON Web チームに配属
 
 # 好きな漫画はワンピース
 Asahara Masahiro
3. ジャンプTOONとは?
 
 2024 年 5 月にサービスを開始 オリジナル 縦読みマンガ 作品や人気作品のタテカラー版を連載中 ↓Web版↓ 
 
 Webブラウザ版 
 iOS/Android アプリ版 

4. 本日お話しすること 
 アクセシビリティを開発チームに浸透させるためにやった こと
 
 
 
 アクセシビリティを担保しつつ、 
 ジャンプTOONをリリースするまでにやったこと
5. 01
 アクセシビリティを開発チームに 
 浸透させるためにやったこと 
 
 

6. ジャンプTOONがなぜアクセシビリティ 
 に取り組むべきかを明確にする 
 
 

7. アクセシビリティを開発チームに浸透させるためにやったこと 
 01
 引用: アクセシブルな電⽇書籍等の普及に向けた調査研究 【報告書概要版】，令和４年３ ⽇31⽇，https://www.soumu.go.jp/main_content/000814866.pdf， アクセシブルな電子書籍等の普及に向けた調査研究【報告書概要版】
 1. 漫画サービスとアクセシビリティについて 

8. アクセシビリティを開発チームに浸透させるためにやったこと 
 ２. 2024年には複数の障がい者関連の法改正 
 2021年改正までは、事業者による障害者の方々への合理的配慮の提供は、努力 義務
 2024年4月から障害者差別解消法により民間企業にも合理的配慮
 の提供が義務化
 01
 設計段階からアクセシビリティを意識する 

9. アクセシビリティを開発チームに浸透させるためにやったこと 
 ３. CA 全体でもアクセシビリティへの 意識が高い
 ・Ameba Accessibility Guidelines
 　https://a11y-guidelines.ameba.design/
 
 ・「WINTICKET」がWebアクセシビリティ試験でシングル Aへ一部準拠 　 https://www.winticket.jp/accessibility/
 
 ・ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 
 https://developers.cyberagent.co.jp/blog/archives/38640/
 
 01
 A11y の質を担保することは、企業ブランディングとしても重要 

10. ジャンプTOON Web チームの全体の 
 目標に対してすり合わせをする 
 
 

11. アクセシビリティを開発チームに浸透させるためにやったこと 
 01
 ジャンプTOON Web チームの目標 
 　　WCAG2.1 の AA を達成する 
 「JIS X 8341-3:2016」規格への準拠 
 AA達成とはどういう状態？
12. アクセシビリティを開発チームに浸透させるためにやったこと 
 01
 レベルA(一部)
 • 視覚に頼らずとも情報が得られるテキストを用意する
 (達成基準 1.1.1 非テキストコンテンツ) 
 　alt, aria-label をつける、漫画の文字起こしが必要のため達成が難しい
 全てのインタラクティブ要素をキーボードで操作可能にする 
 (達成基準 2.1.1 キーボードを理解する)
 　 上から順番にキーボード操作可能できるようにしよう
 W3C を元にチームですり合わせ 

13. アクセシビリティを開発チームに浸透させるためにやったこと 
 01
 レベルAA(一部)
 • コンテンツを見つける手段を複数提供
 (達成基準 2.4.5 複数の手段を理解する)
 　 パンくずを用意する、グローバルナビゲーションを用意する
 • 入力エラーの修正方法を伝える
 (達成基準 3.3.3 エラー修正の提案)
 　　　 サービスごとに統一した文言、より詳細なエラー文言
 W3C を元にチームですり合わせ 

14. 02
 アクセシビリティを担保しつつ、 
 ジャンプTOONをリリースするまでに 
 やったこと 
 

15. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 課題点 ： 開発速度の低下 / スケジュールへの影響 チームが負担にならないように 
 アクセシビリティ開発ガイド を作成📙
 アクセシビリティを意識した開発すると ...

16. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 コーディングにおいてのルール決め (一部紹介)

17. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 コーディングにおいてのルール決め (一部紹介)

18. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 Pull request 作成前にやってほしいこと 
 
 
 必ずやってほしいこと 
 • 拡張機能のWAVE Evaluation Toolを用いて、チェックする
 
 
 さらに余力あれば！
 • 検証ツール > network の Lighthouse で計測して、問題ないか確認する 
 • Voice Over などを使って、正しく読み上げができているか確認する 
 

19. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 コンポーネントを実装する上でのアクセシビリティ向上例 
 HTMLDialogElement: showModal メソッドを使用する → ダイアログを開いた時に、ダイアログの中の一番最初のインタラクティブ 要素にフォーカスを移す
20. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 全ページの lighthouse の計測
 →アクセシビリティ懸念がある箇所の洗い出し
21. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 axe DevToolsを使用してチェック 
 
 
 現在のトップページを計測(2024/8/19時点)
 →コントラスト比の問題のみ
22. アクセシビリティを担保しつつ、ジャンプ TOONをリリースするまでにやったこと 
 02
 デザイナーとコントラスト比について相談 
 通常のテキストやテキスト画像は 4.5 : 1 その他の大きいテキスト、ユーザインタフェースコンポーネント においては、3 : 1を保つように (ただし、非アクティブなコンポーネントは除く)
23. まとめ
 • アクセシビリティの目標設定と認識の擦り合わせをすることで、チームメン バーにアクセシビリティを意識した開発を浸透させることができた
 • アクセシビリティ開発ガイドの導入によって開発速度の低下を抑えつつ、ア クセシビリティの向上を達成することができた
 
 

24. ご清聴ありがとうございました Thank you!