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

Introduction of accessibility for mobile development

itome
June 20, 2019

Introduction of accessibility for mobile development

itome

June 20, 2019
Tweet

More Decks by itome

Other Decks in Technology

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