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

1.3K Views

June 11, 21

#mixleap #Webアクセシビリティ #WCAG #Lighthouse #PayPayモール #UIデザイン

スライド概要

ヤフーとスマートバリューが「アクセシビリティ」をキーワードに、各事業内で取り組んでいる課題とその解決施策について紹介をします。
ヤフーからは災害情報、PayPayモールのデザイナーが登壇しました。

イベントページ URL は こちらです。
https://yahoo-osaka.connpass.com/event/212584/

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 159.9K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 85.4K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 72.6K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 57.4K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 34.8K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 28.9K
各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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 1. Webアクセシビリティとは 5

6.

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

7.

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

8.

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/ 1. Webアクセシビリティとは 8

9.

PayPayモールのカラー設計 9

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

EOP 24