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
0
250
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
76
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
0
100
出前館におけるFlutter活用事例
demaecan
0
49
出前館アプリにおける Flutterアプリ設計
demaecan
1
290
プロダクト本部紹介資料
demaecan
0
3.4k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
42
出前館におけるFlutterの現在とこれから
demaecan
0
830
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
1.1k
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
demaecan
0
52
Other Decks in Technology
See All in Technology
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
エンジニア向け会社紹介資料
caddi_eng
14
230k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
スレットハンティングについて知っておきたいこと
hacket
0
130
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
50k
Practical Orchestrator
shlominoach
185
10k
Navigating Team Friction
lara
181
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
A Philosophy of Restraint
colly
200
16k
How GitHub (no longer) Works
holman
305
140k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Teambox: Starting and Learning
jrom
130
8.6k
Embracing the Ebb and Flow
colly
81
4.3k
Adopting Sorbet at Scale
ufuk
71
8.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
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