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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide