Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み

ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み

株式会社出前館

October 27, 2022
Tweet

More Decks by 株式会社出前館

Other Decks in Technology

Transcript

  1. ライフインフラとなるために進
    めている出前館の
    Web
    アクセ
    シビリティ改善への取り組み

    View full-size slide

  2. 自己紹介
    白石 泰己
    (Shiraishi Taiki)
    株式会社出前館

    コンシューマー向けWeb
    フロントエンド開発

    2021
    年10
    月入社

    2 / 16

    View full-size slide

  3. アジェンダ
    1. Web
    アクセシビリティとは
    2.
    出前館が Web
    アクセシビリティ向上へ取り組む背景
    3.
    改善前の状態
    4.
    注文手続き画面 Next.js
    化プロジェクト
    5.
    問題点への対応
    6.
    まとめ
    7.
    今後の目標
    3 / 16

    View full-size slide

  4. Web
    アクセシビリティとは
    accessibility
    =access
    (到達、入手)+~ibility
    (ability
    )(~できる性質)
    出典:総務省|東海総合通信局|ウェブアクセシビリティとは?
    web
    サイトの情報への到達しやすさを表します。
    高齢者や障害者など全ての人が Web
    サイトのコンテンツを利用可能なように設計・開発することです。
    W3C
    (World Wide Web Consortium
    )からウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG

    という指針が出されている。
    4 / 16

    View full-size slide

  5. 出前館が
    Web
    アクセシビリティ向上へ取り組む背景
    VISION
    地域の人々の幸せをつなぐライフインフラ
    5 / 16

    View full-size slide

  6. VISION
    地域の人々の幸せをつなぐライフインフラ
    出前館はユーザー数が増えて広く利用されるようになったので、より多くのユーザーに使いやすくしたい!
    生活ライフラインを目指すには多くの人たちに利用可能な Web
    コンテンツを提供する必要があると考えま
    す。
    そのため Web
    アクセシビリティの向上は欠かせない要素だと思います!
    6 / 16

    View full-size slide

  7. 注文画面の改善前の状態
    Web
    アクセシビリティチェックツールのスコアが低い!
    7 / 16

    View full-size slide

  8. 注文画面を改善した結果
    まだ完璧ではないものの、大幅なスコア改善ができました!!
    8 / 16

    View full-size slide

  9. 注文画面
    Next.js
    化プロジェクト
    決済方法やクーポン利用、配送時間の設定などを行う注文手続き画面を PHP
    から Next.js
    へリプレイスするプ
    ロジェクトにて注文手続き画面のアクセシビリティ向上へ着手いたしました。 リプレイスは 4
    月にリリースさ
    れました!
    リプレイス技術詳細は出前館エンジニアブログの弊社チームリーダー、奥村の記事をご覧ください!
    https://recruit.demae-can.com/engineer-recruitment/people/790/
    9 / 16

    View full-size slide

  10. 注文画面
    Next.js
    化プロジェクト
    フォームコントロール中心の画面
    デザインの変更ナシのリプレイス
    10 / 16

    View full-size slide

  11. 問題点への対応
    HTML
    がセマンティックではない(親子タグが適切ではない)
    ラベル要素の子要素に段落要素が入っている
    ボタン要素の子要素にコンテンツ区分要素が入っている
    11 / 16

    View full-size slide

  12. 画像に適切な代替テキストがない
    マークアップ改善で、スクリーンリーダーでも読み上げ可能なように改修しました!
    12 / 16

    View full-size slide

  13. フォームコントロール全般でフォーカスアウトライン
    が非表示
    フォーカスアウトラインが見えないことで操作している要素がわからず、キーボード操作が困難でした。
    既存 CSS
    は全て破棄し、tailwindcss
    で書き直しを行いました!
    13 / 16

    View full-size slide

  14. モーダルダイアログのフォーカス管理
    モーダルダイアログが表示されたことをブラウザに通知できていない
    モーダルダイアログ内にフォーカスが移動しないことで、キーボードでの移動が多くなる
    ダイアログを開いた時に自動でダイアログにフォー
    カスが当たること
    フォーカスを閉じ込めてモーダル内でループするこ

    エスケープキーで閉じること
    ダイアログを閉じたらリンク元へフォーカスが当た
    ること
    14 / 16

    View full-size slide

  15. まとめ
    マークアップの最適化
    画像の代替テキストの最適化
    フォーカスアウトラインの表示
    モーダルダイアログのフォーカス管理
    改善の余地があるものの最低限のWeb
    アクセシビリティを確保できたかと思います!
    15 / 16

    View full-size slide

  16. 今後
    地域の人々の幸せをつなぐライフインフラ
    今後も画面のリプレイスは段階的に行なっていくので、引き続き誰でも利用できる出前館を目指して開発をし
    ていきたいと思います!
    機械的検査だけでは不十分なことも取り組みとしてやっていけたらと思っております!
    16 / 16

    View full-size slide