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

自己紹介白石泰己 (Shiraishi Taiki) 株式会社出前館コンシューマー向けWeb フロントエンド開発 2021 年10
月入社 2 / 16

アジェンダ 1. Web アクセシビリティとは 2. 出前館が Web アクセシビリティ向上へ取り組む背景 3. 改善前の状態
4. 注文手続き画面 Next.js 化プロジェクト 5. 問題点への対応 6. まとめ 7. 今後の目標 3 / 16

Web アクセシビリティとは accessibility ＝access （到達、入手）＋～ibility （ability ）（～できる性質）出典：総務省｜東海総合通信局｜ウェブアクセシビリティとは？ web サイトの情報への到達しやすさを表します。
高齢者や障害者など全ての人が Web サイトのコンテンツを利用可能なように設計・開発することです。 W3C （World Wide Web Consortium ）からウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG ）という指針が出されている。 4 / 16

出前館が Web アクセシビリティ向上へ取り組む背景 VISION 地域の人々の幸せをつなぐライフインフラ 5 / 16

VISION 地域の人々の幸せをつなぐライフインフラ出前館はユーザー数が増えて広く利用されるようになったので、より多くのユーザーに使いやすくしたい！生活ライフラインを目指すには多くの人たちに利用可能な Web コンテンツを提供する必要があると考えます。そのため Web アクセシビリティの向上は欠かせない要素だと思います！
6 / 16

注文画面の改善前の状態 Web アクセシビリティチェックツールのスコアが低い！ 7 / 16

注文画面を改善した結果まだ完璧ではないものの、大幅なスコア改善ができました！！ 8 / 16

注文画面 Next.js 化プロジェクト決済方法やクーポン利用、配送時間の設定などを行う注文手続き画面を PHP から Next.js へリプレイスするプロジェクトにて注文手続き画面のアクセシビリティ向上へ着手いたしました。リプレイスは
4 月にリリースされました！リプレイス技術詳細は出前館エンジニアブログの弊社チームリーダー、奥村の記事をご覧ください！ https://recruit.demae-can.com/engineer-recruitment/people/790/ 9 / 16

注文画面 Next.js 化プロジェクトフォームコントロール中心の画面デザインの変更ナシのリプレイス 10 / 16

問題点への対応 HTML がセマンティックではない（親子タグが適切ではない）ラベル要素の子要素に段落要素が入っているボタン要素の子要素にコンテンツ区分要素が入っている 11 / 16

画像に適切な代替テキストがないマークアップ改善で、スクリーンリーダーでも読み上げ可能なように改修しました！ 12 / 16

フォームコントロール全般でフォーカスアウトラインが非表示フォーカスアウトラインが見えないことで操作している要素がわからず、キーボード操作が困難でした。既存 CSS は全て破棄し、tailwindcss で書き直しを行いました！ 13 / 16

モーダルダイアログのフォーカス管理モーダルダイアログが表示されたことをブラウザに通知できていないモーダルダイアログ内にフォーカスが移動しないことで、キーボードでの移動が多くなるダイアログを開いた時に自動でダイアログにフォーカスが当たることフォーカスを閉じ込めてモーダル内でループすることエスケープキーで閉じることダイアログを閉じたらリンク元へフォーカスが当たること
14 / 16

まとめマークアップの最適化画像の代替テキストの最適化フォーカスアウトラインの表示モーダルダイアログのフォーカス管理改善の余地があるものの最低限のWeb アクセシビリティを確保できたかと思います！ 15 / 16

今後地域の人々の幸せをつなぐライフインフラ今後も画面のリプレイスは段階的に行なっていくので、引き続き誰でも利用できる出前館を目指して開発をしていきたいと思います！機械的検査だけでは不十分なことも取り組みとしてやっていけたらと思っております！ 16 / 16

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

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

株式会社出前館

More Decks by 株式会社出前館

Other Decks in Technology

Featured

Transcript