Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
Search
株式会社出前館
October 27, 2022
Technology
1
330
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
390
出前館のマルチプロダクト戦略を支えるアーキテクチャ 〜技術的負債を解消しながら事業を多角化する〜
demaecan
1
83
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.6k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
400
出前館におけるFlutter活用事例
demaecan
0
380
出前館アプリにおける Flutterアプリ設計
demaecan
2
770
プロダクト本部紹介資料
demaecan
0
8.2k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
100
出前館におけるFlutterの現在とこれから
demaecan
0
1.1k
Other Decks in Technology
See All in Technology
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
720
技術に触れたり、顔を出そう
maruto
1
160
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
560
サーバレスの未来〜The Key to Simplifying Everything〜
kawaji_scratch
0
140
AIアプリケーション開発でAzure AI Searchを使いこなすためには
isidaitc
1
140
【Oracle Cloud ウェビナー】2025年のセキュリティ脅威を読み解く:リスクに備えるためのレジリエンスとデータ保護
oracle4engineer
PRO
1
110
「人物ごとのアルバム」の精度改善の軌跡/Improving accuracy of albums by person
mixi_engineers
PRO
2
140
コロプラのオンボーディングを採用から語りたい
colopl
5
1.4k
実践!生成AIのビジネス活用 / How to utilize Generative AI in your own business
gakumura
1
100
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
150
TSのコードをRustで書き直した話
askua
3
400
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
2
250
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
580
Docker and Python
trallard
43
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Bash Introduction
62gerente
610
210k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
ライフインフラとなるために進 めている出前館の 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