ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み

Transcript

1. ライフインフラとなるために進 めている出前館の Web アクセ シビリティ改善への取り組み
2. 自己紹介 白石 泰己 (Shiraishi Taiki) 株式会社出前館 コンシューマー向けWeb フロントエンド開発 2021 年10 月入社 2 / 16
3. アジェンダ 1. Web アクセシビリティとは 2. 出前館が Web アクセシビリティ向上へ取り組む背景 3. 改善前の状態 4. 注文手続き画面 Next.js 化プロジェクト 5. 問題点への対応 6. まとめ 7. 今後の目標 3 / 16
4. Web アクセシビリティとは accessibility ＝access （到達、入手）＋～ibility （ability ）（～できる性質） 出典：総務省｜東海総合通信局｜ウェブアクセシビリティとは？ web サイトの情報への到達しやすさを表します。 高齢者や障害者など全ての人が Web サイトのコンテンツを利用可能なように設計・開発することです。 W3C （World Wide Web Consortium ）からウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG ） という指針が出されている。 4 / 16
5. 出前館が Web アクセシビリティ向上へ取り組む背景 VISION 地域の人々の幸せをつなぐライフインフラ 5 / 16
6. VISION 地域の人々の幸せをつなぐライフインフラ 出前館はユーザー数が増えて広く利用されるようになったので、より多くのユーザーに使いやすくしたい！ 生活ライフラインを目指すには多くの人たちに利用可能な Web コンテンツを提供する必要があると考えま す。 そのため Web アクセシビリティの向上は欠かせない要素だと思います！ 6 / 16
7. 注文画面の改善前の状態 Web アクセシビリティチェックツールのスコアが低い！ 7 / 16
8. 注文画面を改善した結果 まだ完璧ではないものの、大幅なスコア改善ができました！！ 8 / 16
9. 注文画面 Next.js 化プロジェクト 決済方法やクーポン利用、配送時間の設定などを行う注文手続き画面を PHP から Next.js へリプレイスするプ ロジェクトにて注文手続き画面のアクセシビリティ向上へ着手いたしました。 リプレイスは 4 月にリリースさ れました！ リプレイス技術詳細は出前館エンジニアブログの弊社チームリーダー、奥村の記事をご覧ください！ https://recruit.demae-can.com/engineer-recruitment/people/790/ 9 / 16
10. 注文画面 Next.js 化プロジェクト フォームコントロール中心の画面 デザインの変更ナシのリプレイス 10 / 16
11. 問題点への対応 HTML がセマンティックではない（親子タグが適切ではない） ラベル要素の子要素に段落要素が入っている ボタン要素の子要素にコンテンツ区分要素が入っている 11 / 16
12. 画像に適切な代替テキストがない マークアップ改善で、スクリーンリーダーでも読み上げ可能なように改修しました！ 12 / 16
13. フォームコントロール全般でフォーカスアウトライン が非表示 フォーカスアウトラインが見えないことで操作している要素がわからず、キーボード操作が困難でした。 既存 CSS は全て破棄し、tailwindcss で書き直しを行いました！ 13 / 16
14. モーダルダイアログのフォーカス管理 モーダルダイアログが表示されたことをブラウザに通知できていない モーダルダイアログ内にフォーカスが移動しないことで、キーボードでの移動が多くなる ダイアログを開いた時に自動でダイアログにフォー カスが当たること フォーカスを閉じ込めてモーダル内でループするこ と エスケープキーで閉じること ダイアログを閉じたらリンク元へフォーカスが当た ること 14 / 16
15. まとめ マークアップの最適化 画像の代替テキストの最適化 フォーカスアウトラインの表示 モーダルダイアログのフォーカス管理 改善の余地があるものの最低限のWeb アクセシビリティを確保できたかと思います！ 15 / 16
16. 今後 地域の人々の幸せをつなぐライフインフラ 今後も画面のリプレイスは段階的に行なっていくので、引き続き誰でも利用できる出前館を目指して開発をし ていきたいと思います！ 機械的検査だけでは不十分なことも取り組みとしてやっていけたらと思っております！ 16 / 16