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
200
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
株式会社出前館
October 27, 2022
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
プロダクト本部紹介資料
demaecan
0
220
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
22
出前館におけるFlutterの現在とこれから
demaecan
0
520
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
850
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
demaecan
0
39
ITエンジニアの市場価値を高め続ける3つの方法
demaecan
0
560
出前館×ZHDのクイックコマースにおける協業事例〜リアルタイム在庫連携の裏側〜
demaecan
0
160
会社説明資料_最新版
demaecan
0
5.1k
20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話
demaecan
0
260
Other Decks in Technology
See All in Technology
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
任意コード実行の原理
ffri
0
180
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
250
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
220
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
810
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.2k
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
170
KTC_DBRE.pdf
_awache
1
290
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
Featured
See All Featured
Practical Orchestrator
shlominoach
180
9.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Being A Developer After 40
akosma
56
580k
Making Projects Easy
brettharned
106
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
A designer walks into a library…
pauljervisheath
199
23k
Facilitating Awesome Meetings
lara
39
5.5k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Embracing the Ebb and Flow
colly
78
4.1k
The Invisible Customer
myddelton
114
12k
Designing the Hi-DPI Web
ddemaree
275
33k
Building an army of robots
kneath
300
41k
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