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

小売アプリのためのアクセシビリティ / Accessibility for Retail Apps

CyberAgent
November 21, 2023

小売アプリのためのアクセシビリティ / Accessibility for Retail Apps

CyberAgent

November 21, 2023
Tweet

More Decks by CyberAgent

Other Decks in Technology

Transcript

  1. 小売アプリのための
    アクセシビリティ
    1
    増山 洸輝

    View full-size slide

  2. 2
    増山 洸輝
    2023年度 中途入社
    AI 事業本部 アプリ運用カンパニー所属
    @masssun
    モバイルアプリチームのリードエンジニアを
    しています

    View full-size slide

  3. アプリ運用カンパニーとは
    ● 小売企業様と協業して、アプリを中心としたデジタルでの購買体験の実現を
    行う事業部
    3

    View full-size slide

  4. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    4

    View full-size slide

  5. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    5

    View full-size slide

  6. アクセシビリティとは
    ・Accessibility is the practice of making your websites usable by as many
    people as possible.
    (アクセシビリティとは、ウェブサイトをできるだけ多くの人が利用できるように
    することです。)
    https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

    6

    View full-size slide

  7. アクセシビリティとは
    ❌ 障害を持つ人のための対応
    ⭕ 障害を持つ人だけでなく、異なる情報端末やソフトウェアを利用する人でも
    情報にアクセスできるようにすること
    7

    View full-size slide

  8. モバイルにおけるアクセシビリティ
    ・VoiceOver / TalkBack
    画面が見えなくてもアプリのインターフェイスを体験できるよう、画面の表示内
    容の説明を読み上げる機能
    8

    View full-size slide

  9. モバイルにおけるアクセシビリティ
    ・文字サイズのカスタマイズ
    文字を太くする、文字を大きくする、コントラストを上げる、カラーの反転
    9

    View full-size slide

  10. モバイルにおけるアクセシビリティ
    ・Assistive Touch
    音量を調節する、画面をロックするといったボタンを押す操作を画面のタップに
    置き換える
    10

    View full-size slide

  11. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    11

    View full-size slide

  12. 何故アクセシビリティが必要なのか
    ・今回の案件は既存アプリのリニューアル
    ・すでに多くのユーザーを抱えていて、様々な世代な人々が使用している
    12

    View full-size slide

  13. 何故アクセシビリティが必要なのか
    ・日本における身体障害者の割合
    ・約 3 %
    https://www8.cao.go.jp/shougai/whitepaper/h29hakusho/zenbun/siryo_02.h
    tml
    13

    View full-size slide

  14. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    14

    View full-size slide

  15. Flutter におけるアクセシビリティ対応
    ・スクリーンリーダー (VoiceOver / TalkBack)
    ・OS の設定に基づいたフォントサイズ
    ・十分なコントラスト
    https://docs.flutter.dev/ui/accessibility-and-internationalization/access
    ibility
    15

    View full-size slide

  16. スクリーンリーダー
    ・Semantics widget
    ・widget ツリーに、widget の説明を追加する
    ・e.g. このテキストが何であるか、ボタンをタップすると何が起こるのか
    https://api.flutter.dev/flutter/widgets/Semantics-class.html
    16

    View full-size slide

  17. Semantics widget

    17

    View full-size slide

  18. Semantics widget
    ・標準 widget の多くは Semantics で wrap されている
    ・e.g. AppBar, Text, etc.
    18

    View full-size slide

  19. OS の設定に基づいたフォントサイズ
    ・Text widget を使っていれば、フォントサイズは OS の設定に基づいて
    Flutter が自動的に計算する
    20

    View full-size slide

  20. Flutter におけるアクセシビリティ対応
    ・特別な対応をせずとも、アクセシブルなアプリケーションを構築することがで
    きる
    21

    View full-size slide

  21. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    22

    View full-size slide

  22. アジェンダ

    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ

    23

    View full-size slide

  23. 画像
    ・https://pub.dev/packages/cached_network_image を使用していたので、
    Semantics widget で wrap した
    ・Image widget を使用している場合は、semanticsLabel に文字列を渡せば良い
    25

    View full-size slide

  24. 複数スタイルのテキスト

    27

    View full-size slide

  25. 複数スタイルのテキスト

    28

    View full-size slide

  26. 複数スタイルのテキスト
    ・読み上げられるテキストは分かれてしまうので、まとめたい
    29

    View full-size slide

  27. 複数スタイルのテキスト
    ・MergeSemantics widget
    https://api.flutter.dev/flutter/widgets/MergeSemantics-class.html
    ・RichText widget (※)
    30

    View full-size slide

  28. MergeSemantics widget

    31

    View full-size slide

  29. RichText widget
    ・textScaleFactor のデフォルト値が 1 のため、
    MediaQuery.textScaleFactorOf(context) を指定する必要がある
    32

    View full-size slide

  30. アイコン付きのボタン

    33

    View full-size slide

  31. アイコン付きのボタン
    ・アイコン部分は読み上げたくない
    34

    View full-size slide

  32. アイコン付きのボタン
    ・ExcludeSemantics widget
    https://api.flutter.dev/flutter/widgets/ExcludeSemantics-class.html
    35

    View full-size slide

  33. テキスト

    36

    View full-size slide

  34. テキスト
    ・semanticsLabel を設定する
    37

    View full-size slide

  35. ListView

    38

    View full-size slide

  36. ListView

    39

    View full-size slide

  37. ListView
    ・children に渡した widget で ひとつの semantics tree が構築される
    40

    View full-size slide

  38. ListView
    ・SingleChildScrollView + Column に変更した
    ・パフォーマンスの劣化が懸念されるが、レンダリングコストが低い画面だった
    ため、許容
    41

    View full-size slide

  39. ListView を使わなければならない場合
    ・addSemanticIndexes に false を指定し、子 widget を IndexedSemantics で
    wrap する
    42

    View full-size slide

  40. スナックバー

    43

    View full-size slide

  41. スナックバー
    ・コンテンツが表示されたことに気づけないため、自動で読み上げる必要がある
    ・Semantics.liveRegion に true を設定する
    44

    View full-size slide

  42. タップ領域
    ・小さすぎると、UI を発見することができない
    ・最低でも 44px * 44px を確保する
    https://developer.apple.com/jp/design/tips/
    45

    View full-size slide

  43. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    46

    View full-size slide

  44. Text widget
    ・Text Scale Factor
    ・ フォントサイズは OS の設定に基づいて Flutter が自動的に計算する
    47

    View full-size slide

  45. Text Scale Factor で気をつけること
    ・Layout overflow を起こさないような UI の組み方をする
    48

    View full-size slide

  46. Layout overflow を防ぐ
    ・SizedBox で width, height を固定にしない
    ・ConstrainedBox で minWidth, minHeight を設定し、child の大きさに応じて
    拡大できるようにする
    49

    View full-size slide

  47. Layout overflow を防ぐ
    ・Column の子 widget は Wrap / Expanded で wrap し、画面端で改行される
    ようにする
    50

    View full-size slide

  48. Layout overflow を防ぐ
    ・GridView
    51

    View full-size slide

  49. Layout overflow を防ぐ
    ・flutter_layout_grid を使って高さが可変になるようにしている
    https://pub.dev/packages/flutter_layout_grid
    52

    View full-size slide

  50. 53
    レイアウト崩れを起こしていない ≠ 違和感のないデザイン

    View full-size slide

  51. 1行におさめる
    ・TextOverflow.ellipsis を指定して、三点リーダーで切る
    ・FittedBox を使用する (fit には BoxFit.scaleDown を指定)
    ・textScaleFactor の上限値を設定する
    55

    View full-size slide

  52. FittedBox を使用する
    ・同じような UI を並べる場合には不向き
    56

    View full-size slide

  53. textScaleFactor の上限値を設定する

    57

    View full-size slide

  54. アジェンダ
    1.アクセシビリティとは
    2.何故アクセシビリティが必要なのか
    3.Flutter におけるアクセシビリティ対応
    4.アクセシビリティ対応 Tips
    a.スクリーンリーダー
    b.大きいフォント
    5.まとめ
    58

    View full-size slide

  55. まとめ
    ・アクセシビリティ対応は難しくない
    ・プロジェクトの初期から実装することで、自然とアクセシブルになり、アクセ
    シビリティのための追加の工数はほとんど必要ない
    59

    View full-size slide