「なんでもやってるDMM」を支えるアクセシビリティガイドライン

by MiterashiShohei

Slide 1

Slide 1 text

「なんでもやってるDMM」を⽀えるアクセシビリティガイドライン合同会社DMM.com 御⼿洗翔平

Slide 2

Slide 2 text

御⼿洗翔平プラットフォーム事業本部総合トップ開発部 DMMポイントクラブチーム事業会社、クライアントワーク、スタートアップ企業にてデザイン‧ ディレクションの経験を経て2021年にDMMに⼊社。 DMMポイントの管理アプリ「DMMポイントクラブ」の開発チームにてプロダクトデザイナーとしてサービス作りに従事。私について

Slide 3

Slide 3 text

アプリについて「DMMポイント」を便利に管理できるサービス

Slide 4

Slide 4 text

アプリについて ‧2021年4⽉に本格リリース ‧ポイントがゲットできるくじ機能 ‧ポイントチャージに順次対応

Slide 5

Slide 5 text

「なんでもやっているDMM」の事業数は50以上 DMMについて

Slide 6

Slide 6 text

「なんでもやっているDMM」の事業数は50以上 DMMポイントが使えるサービスは13 DMMについて

Slide 7

Slide 7 text

多種多様なサービスを展開している DMMについて

Slide 8

Slide 8 text

多種多様なサービスを展開している多種多様なユーザー属性 DMMについて

Slide 9

Slide 9 text

(Web Content Accessibility Guidelines) WCAG 多種多様のユーザーに対応するために

Slide 10

Slide 10 text

Webコンテンツのアクセシビリティ向上のための広範囲に及ぶ推奨事項 WCAGとは多種多様のユーザーに対応するために

Slide 11

Slide 11 text

「アクセシビリティ」とは「障害者対応」のこと多種多様のユーザーに対応するために

Slide 12

Slide 12 text

「アクセシビリティ」とは「障害者対応」のことではなく、ユーザー属性に依存せず「誰にとっても使いやすい状態であること」多種多様のユーザーに対応するために

Slide 13

Slide 13 text

障害の有無に関わらず基準を満たしていることでユーザー全体の使いやすさの向上が⾒込める多種多様のユーザーに対応するために

Slide 14

Slide 14 text

障害の有無に関わらず基準を満たしていることでユーザー全体の使いやすさの向上が⾒込める多種多様なユーザー属性がいるDMMで⼤きな指針となる多種多様のユーザーに対応するために

Slide 15

Slide 15 text

‧WCAGでの推奨項⽬の紹介 ‧DMMポイントクラブでの活⽤事例これから話すこと多種多様のユーザーに対応するために

Slide 16

Slide 16 text

なぜ話そうと思ったのか多種多様のユーザーに対応するために (個⼈的に)⽂章が難しくて具体例がわかりづらい

Slide 17

Slide 17 text

(個⼈的に)⽂章が難しくて具体例がわかりづらい WCAGに興味を持ってもらいたい、情報交換したいなぜ話そうと思ったのか多種多様のユーザーに対応するために ▼

Slide 18

Slide 18 text

WCAGでの推奨項⽬の紹介

Slide 19

Slide 19 text

WCAGでの推奨項⽬の紹介推奨事項の⼤カテゴリ

Slide 20

Slide 20 text

WCAGでの推奨項⽬の紹介知覚可能操作可能理解可能堅ろう

Slide 21

Slide 21 text

情報及びユーザインタフェースコンポーネントは、利⽤者が知覚できる⽅法で利⽤者に提⽰可能でなければならない。知覚可能操作可能理解可能堅ろう WCAGでの推奨項⽬の紹介要約誰でも⾒つけられる/たどり着けるための⼼得

Slide 22

Slide 22 text

ユーザインタフェースコンポーネント及びナビゲーションは操作可能でなければならない。知覚可能操作可能理解可能堅ろう WCAGでの推奨項⽬の紹介要約誰でも触れる/操作できるための⼼得

Slide 23

Slide 23 text

情報及びユーザインタフェースの操作は理解可能でなければならない。知覚可能操作可能理解可能堅ろう WCAGでの推奨項⽬の紹介要約誰でも操作の結果が予測できるための⼼得

Slide 24

Slide 24 text

コンテンツは、⽀援技術を含む様々なユーザエージェントが確実に解釈できるように⼗分に堅ろうでなければならない。知覚可能操作可能理解可能堅ろう WCAGでの推奨項⽬の紹介要約互換性を保つための⼼得

Slide 25

Slide 25 text

意味のある順序⼀貫したナビゲーション⾮テキストコンテンツ知覚可能理解可能知覚可能 WCAGでの推奨項⽬の紹介 - 直近での活⽤例 -

Slide 26

Slide 26 text

意味のある順序 [達成基準 1.3.2] 意味のある順序コンテンツが提⽰されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である。達成基準知覚可能

Slide 27

Slide 27 text

意味のある順序意味の理解がしやすいコンテンツの順序を保つ。また、ボイスオーバーなどで理解しやすい順序で読み上げられる。意図の要約コンテンツが提⽰されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈が可能である。達成基準 ▼

Slide 28

Slide 28 text

意味のある順序の対応例元UI ポイントが無料で獲得できるくじ機能広告視聴によるポイント獲得機能追加の例ポイント管理に関する情報

Slide 29

Slide 29 text

意味のある順序の対応例元UI 新UI案(ボツ) 動画広告に関する情報を総保有ポイントの下に追加 ▶ 広告視聴によるポイント獲得機能追加の例なるべく⽬⽴つ位置がいいね！😊

Slide 30

Slide 30 text

NGな点 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない新UI案(ボツ) ポイント管理に関する情報ポイント獲得に関する情報意味のある順序の対応例広告視聴によるポイント獲得機能追加の例

Slide 31

Slide 31 text

NGな点 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない順序がぐちゃぐちゃで情報が⾒づらい&探しづらい…😔 新UI案(ボツ) ポイント管理に関する情報ポイント獲得に関する情報意味のある順序の対応例広告視聴によるポイント獲得機能追加の例

Slide 32

Slide 32 text

改善点⽬的別に共通の⾒出しでグループを作り、関係性を整理。⽬的の情報の発⾒を素早く⾏えるように！新UI案(採⽤) ポイント管理に関する情報ポイント獲得に関する情報 NGな点 ▼ 意味のある順序の対応例 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない広告視聴によるポイント獲得機能追加の例 ▼

Slide 33

Slide 33 text

⼀貫したナビゲーション [達成基準 3.2.3] ⼀貫したナビゲーションウェブページ⼀式の中にある複数のウェブページ上で繰り返されているナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で出現する。ただし、利⽤者が変更した場合は除く。理解可能達成基準

Slide 34

Slide 34 text

⼀貫したナビゲーション繰り返されるナビゲーションは⼀貫したレイアウトと挙動になるようにする。意図の要約ウェブページ⼀式の中にある複数のウェブページ上で繰り返されているナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で出現する。ただし、利⽤者が変更した場合は除く。達成基準 ▼

Slide 35

Slide 35 text

⼀貫したナビゲーションの対応例画像タップ時の挙動くじを引く広告再⽣遷移案(ボツ)

Slide 36

Slide 36 text

⼀貫したナビゲーションの対応例画像タップ時の挙動 NGな点同じ画像の形式であるが、別々の遷移になっているくじを引く広告再⽣遷移案(ボツ)

Slide 37

Slide 37 text

⼀貫したナビゲーションの対応例画像タップ時の挙動 NGな点同じ画像の形式であるが、別々の遷移になっているくじを引く広告再⽣遷移案(ボツ) タップ後の挙動が統⼀されていないのでユーザーは予測しづらい…😥

Slide 38

Slide 38 text

⼀貫したナビゲーションの対応例画像タップ時の挙動くじを引く広告再⽣改善点それぞれ共通で機能の詳細画⾯へ遷移し、詳細画⾯からアクションを⾏う ▼ NGな点同じ画像の形式であるが、別々の遷移になっている遷移案

Slide 39

Slide 39 text

⾮テキストコンテンツ [達成基準 1.1.1] ⾮テキストコンテンツについて利⽤者に提⽰されるすべての⾮テキストコンテンツには、同等の⽬的を果たすテキストによる代替が提供されている。知覚可能達成基準

Slide 40

Slide 40 text

⾮テキストコンテンツについて画像などには代替となるテキストを⽤意し、⽬で⾒る情報と読み上げで聞く情報をイコールにする意図の要約利⽤者に提⽰されるすべての⾮テキストコンテンツには、同等の⽬的を果たすテキストによる代替が提供されている。達成基準 ▼

Slide 41

Slide 41 text

⾮テキストコンテンツの対応例⾮テキストコンテンツ同等の⽬的を果たすテキスト ▼  : accessibilityLabel : ContentDescription

Slide 42

Slide 42 text

⾮テキストコンテンツの対応例 👀 👂 📱 ⾮テキストコンテンツ代替テキスト(読み上げ)

Slide 43

Slide 43 text

⾮テキストコンテンツの対応例 👀 1⽇1回くじ引き 👂 ⾮テキストコンテンツ代替テキスト(読み上げ) 📱 情報が⾜りない

Slide 44

Slide 44 text

⾮テキストコンテンツの対応例 👀 毎⽇無料でチャレンジ！ 1⽇1回くじ引き 1等は100ポイント 2等は50ポイント！ 👂 ⾮テキストコンテンツ代替テキスト(読み上げ) 📱 情報が多い

Slide 45

Slide 45 text

⾮テキストコンテンツの対応例 👀 毎⽇無料でチャレンジ！ 1⽇1回くじ引き 1等は100ポイント 👂 📱 💡 ⾮テキストコンテンツ代替テキスト(読み上げ)

Slide 46

Slide 46 text

おわりに Webだけではなく、モバイルアプリや XR‧⾳声⼊⼒などのテクノロジーもカバーした WCAG . が2022年以降勧告予定今後のWCAG 要チェック👀

Slide 47

Slide 47 text

ご清聴ありがとうございました！ぜひDLしてみてください😄