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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WCAGでの推奨項⽬の紹介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Other Decks in Design

Featured

Transcript