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
380
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
出前館を支えるJavaとKotlin
demaecan
0
290
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
270
Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由
demaecan
0
42
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
820
出前館のマルチプロダクト戦略を支えるアーキテクチャ 〜技術的負債を解消しながら事業を多角化する〜
demaecan
1
210
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.8k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
570
出前館におけるFlutter活用事例
demaecan
0
580
出前館アプリにおける Flutterアプリ設計
demaecan
2
980
Other Decks in Technology
See All in Technology
Houtou.pm #1
papix
0
650
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
510
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
720
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
220
2025advance01
minamizaki
0
130
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
100
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
430
Scale Security Programs with Scorecarding
ramimac
0
420
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
690
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
120
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
The Cost Of JavaScript in 2023
addyosmani
49
8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
77
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
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