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

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

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

DMM meetup #32 〜なんでもやる会社のサービスデザイン〜での登壇資料です。

A6164c2cb62281a24febe6f722775b98?s=128

MiterashiShohei

August 06, 2021
Tweet

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  18. WCAGでの推奨項⽬の紹介

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

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

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

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

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

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

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

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

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

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

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

  30. NGな点 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない 新UI案(ボツ) ポイント管理に 関する情報 ポイント獲得に 関する情報

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

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

    ▼ 意味のある順序の対応例 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない 広告視聴によるポイント獲得機能追加の例 ▼
  33. ⼀貫したナビゲーション [達成基準 3.2.3] ⼀貫したナビゲーション ウェブページ⼀式の中にある複数のウェブページ上で繰り返されている ナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序 で出現する。ただし、利⽤者が変更した場合は除く。 理解可能 達成基準

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

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

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

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

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

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

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

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

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

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

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

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

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

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