Introduction of accessibility for mobile development

Transcript

1. モバイルアプリ開発のため
   のアクセシビリティ⼊入⾨門
   

   View Slide

2. ⾃自⼰己紹介
   https://twitter.com/itometeam
   https://github.com/itome
   https://medium.com/@itometeam
   0.5min
   塚本武志
   CyberAgent CATS
   

   View Slide

3. アクセシビリティって何？
   2min
   

   View Slide

4. アクセシビリティって何？
   ⼀般にアクセシビリティとは、アクセスのしやすさを意味
   します。転じて、製品やサービスの利⽤しやすさという意
   味でも使われます。似た意味をもつ⾔葉にユーザビリティ
   がありますが、アクセシビリティはユーザビリティより幅
   広い利⽤状況、多様な利⽤者を前提とします。
   ウェブアクセシビリティ基盤委員会 (https://waic.jp/knowledge/accessibility/)
   2min
   

   View Slide

5. アクセシビリティって何？
   min
   ⼀般にアクセシビリティとは、アクセスのしやすさを意味
   します。転じて、製品やサービスの利⽤しやすさという意
   味でも使われます。似た意味をもつ⾔葉にユーザビリティ
   がありますが、アクセシビリティはユーザビリティより幅
   広い利⽤状況、多様な利⽤者を前提とします。
   ウェブアクセシビリティ基盤委員会 (https://waic.jp/knowledge/accessibility/)
   

   View Slide

6. アクセシビリティって何？
   min
   Android / iOSアプリのアクセスしやすさ？
   

   View Slide

7. アクセシビリティって何？
   min
   アプリユーザーにはさまざまな属性がある
   ・視覚に障害を抱えている⼈人
   ・聴覚に障害を抱えている⼈人
   ・ディスプレイの⾒見見⾟辛い屋外で使っている⼈人
   ・スマホの操作に慣れていない⼈人
   ・キーボードでアプリを操作している⼈人
   ・etc…
   ・⼿手が⼩小さい⼈人 / ⼤大きい⼈人
   

   View Slide

8. アクセシビリティって何？
   min
   様々なユーザーがアプリのすべての機能に
   (できるだけ簡単に)アクセスできること
   

   View Slide

9. アクセシビリティに配慮することの意義
   1min
   

   View Slide

10. アクセシビリティに配慮することの意義
    1min
    世界の⼈人⼝口の15%* が何らかの障害を抱えている
    → アクセシビリティに配慮することで、15%の潜在的
    ユーザーに使ってもらえる可能性を広げられる
    * https://developer.android.com/guide/topics/ui/accessibility/index.html より
    

    View Slide

11. アクセシビリティに配慮することの意義
    1min
    障害を持たないユーザーでも状況によって
    普段通りの操作が難しくなる
    → アクセシビリティに配慮することで、障害を持たない
    　ユーザーにとっての使いやすさも向上する
    https://developer.android.com/guide/topics/ui/accessibility/index.html より
    

    View Slide

12. iOS/Androidのアクセシビリティ機能
    2min
    

    View Slide

13. iOS/Androidのアクセシビリティ機能
    2min
    ・⽬目の⾒見見えない、⾒見見えづらいユーザーでもアプリを
    使えるようにアプリの読み上げ機能(TalkBack)を提
    供している
    ・その他、アクセシビリティに関する機能
    (⾊色の反転、外部デバイスとの連携など)を提供
    Android
    

    View Slide

14. iOS/Androidのアクセシビリティ機能
    2min
    ・VoiceOver(テキスト読み上げ機能)、スイッチコ
    ントロール(物理理デバイスでの端末操作)などが提供
    されている
    ・OSに組み込まれているため、インストールなしで利利⽤用可能
    iOS
    

    View Slide

15. アプリ開発者ができること
    2min
    

    View Slide

16. アプリ開発者ができること
    2min
    ⼩小さすぎる⽂文字を避ける
    ・iOSのhuman interface Guidelineでは11pt以上、AndroidのMaterial Designでは10sp以上が推奨されている。
    ・また、デバイスの設定によって⽂文字サイズの変更更をする場合はiOSではDynamicTypeの有効化、Androidではフォントサイズのsp指定が必要になる。
    ・フォントサイズの変更更でのレイアウト崩れに注意する
    

    View Slide

17. アプリ開発者ができること
    2min
    ⼩小さすぎる⽂文字を避ける
    ・iOSのhuman interface Guidelineでは11pt以上、
    AndroidのMaterial Designでは10sp以上が推奨されている。
    ・また、デバイスの設定によって⽂文字サイズの変更更をする場合
    はiOSではDynamicTypeの有効化、Androidではフォントサイ
    ズのsp指定が必要になる。
    ・フォントサイズの変更更でのレイアウト崩れに注意する
    

    View Slide

18. アプリ開発者ができること
    2min
    ⽂文字と背景⾊色のコントラストを⾼高くする
    ・⼤大きな⽂文字では 3.0:1 以上、⼩小さめの⽂文字では 4.5:1 以上に
    なっていることを考える
    ・ダークモードに対応する場合は、ダークモードにした時の⽂文
    字⾊色にも注意
    ・https://material.io/tools/colorで背景⾊色と⽂文字⾊色の組み合
    わせのテストができる
    

    View Slide

19. アプリ開発者ができること
    2min
    ⽂文字と背景⾊色のコントラストを⾼高くする
    ・⼤大きな⽂文字では 3.0:1 以上、⼩小さめの⽂文字では 4.5:1 以上に
    なっていることを考える
    ・ダークモードに対応する場合は、ダークモードにした時の⽂文
    字⾊色にも注意
    ・https://material.io/tools/colorで背景⾊色と⽂文字⾊色の組み合
    わせのテストができる
    

    View Slide

20. アプリ開発者ができること
    2min
    画像に適切な説明⽂文をつける
    ・ネットワークから取得する画像や、アイコンのみのボタンに
    はテキストによる情報がないため、画⾯面読み上げがきちんと動
    作しない
    ・iOSのUIImageViewにはaccessibilityLabel、Androidの
    ImageViewにはcontentDescriptionを追加することで、読み
    上げ情報を追加できる
    

    View Slide

21. まとめ
    2min
    

    View Slide

22. まとめ
    2min
    ・アクセシビリティに配慮することで、誰もが使いやすいアプ
    リにすることができる
    ・アクセシビリティに関する機能は普段使うことがないので、
    まずは⼀一度⾃自分で試してみる
    ・対応コストが⾼高い場合は、画像の説明だけ、重要な画⾯面だけ、
    など部分的なところから始める
    

    View Slide

23. ありがとうございました
    https://twitter.com/itometeam
    https://github.com/itome
    https://medium.com/@itometeam
    塚本 武志
    

    View Slide