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
270
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.4k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
280
出前館におけるFlutter活用事例
demaecan
0
120
出前館アプリにおける Flutterアプリ設計
demaecan
1
460
プロダクト本部紹介資料
demaecan
0
5.8k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
78
出前館におけるFlutterの現在とこれから
demaecan
0
980
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
1.3k
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
demaecan
0
70
Other Decks in Technology
See All in Technology
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
7
1.2k
ActiveRecord SQLインジェクションクイズ (Rails 7.1.3.4)
kozy4324
8
2k
カメラ単体で物体の3次元 座標を扱う方法
kenmatsu4
1
210
クラシルの現在とこれから
am1157154
1
320
Overview of file type identifiers
ange
0
200
Databricksで構築する初めての複合AIシステム - ML15min
taka_aki
2
1.3k
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
110
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
100
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
210
失敗しないOpenJDKの非互換調査
tabatad
0
200
Java x Spring Boot Warm up
kazu_kichi_67
2
390
強すぎるIAMをCloudTrailを使って適正化した話
yjszk
0
230
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Building Applications with DynamoDB
mza
90
6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
We Have a Design System, Now What?
morganepeng
50
7.2k
Embracing the Ebb and Flow
colly
84
4.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Ruby is Unlike a Banana
tanoku
96
11k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
GraphQLとの向き合い方2022年版
quramy
43
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
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