PayPayモールのアクセシビリティ対応

⾃⼰紹介 2 ⾈橋紀絵 Funahashi Kie 2019年新卒 PayPayモールフロントエンド開発 Yahoo!ショッピング
フロントエンド開発ときどきUIデザイン

アジェンダ 3 2. PayPayモールのカラー設計 3. Lighthouseを使ったアクセシビリティチェック 4. Yahoo!ショッピング、PayPayモールにまたがる取り組み 1. Webアクセシビリティとは

Webアクセシビリティとは 4

Webアクセシビリティってなに？ 5 1. Webアクセシビリティとは年齢や障害の有無に関わらず、あらゆる⼈が Webで提供されている情報にアクセスし、利⽤できること The power of the
Web is in its universality. Access by everyone regardless of disability is an essential aspect. ― Tim Berners-Lee, W3C Director and inventor of the World Wide Web “

「あらゆる⼈」とは？ 6 1. Webアクセシビリティとは全盲・ロービジョン⾊覚多様性上肢障害聴覚障害認知機能の低下

あらゆる「状況」も 7 1. Webアクセシビリティとは運転中で⾒れないコンタクトなくした⾻折⺟国語ではない料理中で⼿が離せない具体的に何をすればいい？

Webアクセシビリティを達成するために 8 1. Webアクセシビリティとは WCAG (Web Contents Accessibility Guidline) W3Cによって標準化されているWebアクセシビリティに関するガイドライン
いくつかの達成基準達成基準の3つの適合レベル A, AA, AAA WCAG2.1：https://www.w3.org/TR/2018/REC-WCAG21-20180605/ WCAG2.1（⽇本語訳）：https://waic.jp/docs/WCAG21/ WCAG2.2：https://www.w3.org/TR/2021/WD-WCAG22-20210521/

PayPayモールのカラー設計 9

カラー設計 10 2. PayPayモールのカラー設計基本⾊はWACG2.1の達成基準「コントラスト」（レベルAA）を満たす使⽤ツール：Color Contrast Analyser https://www.tpgi.com/color-contrast-checker/

Lighthouseを使ったアクセシビリティチェック 11

HTML 12 3. Lighthouseを使ったアクセシビリティチェック Lighthoseのaccessibility項⽬を計測 → エラーに対応 Lighthouse オープンソースのWebアプリ監査ツール https://developers.google.com/web/tools/lighthouse?hl=en
chromeの開発者ツールから利⽤できる

対策前のLighthouseスコア 13 3. Lighthouseを使ったアクセシビリティチェックトップページ検索ページ商品詳細ページ

具体的な対策 14 3. Lighthouseを使ったアクセシビリティチェック画像にalt属性付与 aria-label属性付与 aria-labelledby属性付与 aria-hidden属性付与 iframeにtitle属性付与 WAI-ARIA
(Web Accessibility Interface)

aria-labelとは？ 15 3. Lighthouseを使ったアクセシビリティチェック現在の要素にラベル付けする⽂字列を定義するときに使⽤する属性 <button aria-label=“閉じる”> 対応例テキストを持たない要素にも、その意味を持たせることができるスクリーンリーダーがラベルを読み上げてくれる

aria-labelledbyとは？ 16 3. Lighthouseを使ったアクセシビリティチェック現在の要素のラベルになる要素を紐付けることができる属性 <input aria-labelledby=“FreeShipFilterTitle”> 対応例スイッチャーを選択するとスクリーンリーダーが紐付けられたラベルを⼀緒に読み上げてくれる
<h3 id=“FreeShipFilterTitle” >

aria-hiddenとは？ 17 3. Lighthouseを使ったアクセシビリティチェック現在の要素を隠すときに使⽤する属性対応例操作に不要な要素をスクリーンリーダーに読み上げられないように隠すユーザーが操作可能ではないUI要素などに aria-hidden属性を付与しているスナックバーのための隠しボタン
<button aria-hidden=“true”>

対策後のLighthouseスコア 18 3. Lighthouseを使ったアクセシビリティチェックトップページ検索ページ商品詳細ページ 15点 UP! 15点
UP! 13点 UP!

Yahoo!ショッピング、 PayPayモールにまたがる取り組み 19

誰でも安⼼してお買い物を 20 4. Yahoo!ショッピング、PayPayモールにまたがる取り組み誤って同じ商品を購⼊してしまうトラブル背景意図しない重複注⽂を防ぎたい！

誰でも安⼼してお買い物を 21 4. Yahoo!ショッピング、PayPayモールにまたがる取り組みお買い物の主導線である商品詳細に、購⼊済みかどうかを表⽰するモジュールを追加対策購⼊から24時間以内のときは注意を促す⽂⾔を表⽰

より使いやすくなった 22 4. Yahoo!ショッピング、PayPayモールにまたがる取り組みリピート購⼊にも利⽤される！モールなので、違うストアの同じ商品がたくさんある買ったことのある商品が特定しやすい！

まとめとこれから 23 やってきたことこれから WCAG2.1に対応 Lighthouseを利⽤した機械的な対策誰でも安⼼してお買い物できるように、⼯夫したUIの追加 ECを使う⼈が増えている世代・障害の有無に関わらず「あらゆる⼈」にとって便利なお買い物体験のために改善を続けていく

EOP 24

PayPayモールのアクセシビリティ対応

PayPayモールのアクセシビリティ対応

Kie Funahashi

Other Decks in Design

Featured

Transcript