Save 37% off PRO during our Black Friday Sale! »

Introduction of accessibility for mobile development

93dece28ac18d9c0886335e4730ab27b?s=47 itome
June 20, 2019

Introduction of accessibility for mobile development

93dece28ac18d9c0886335e4730ab27b?s=128

itome

June 20, 2019
Tweet

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ズのsp指定が必要になる。 ・フォントサイズの変更更でのレイアウト崩れに注意する
  18. アプリ開発者ができること 2min ⽂文字と背景⾊色のコントラストを⾼高くする ・⼤大きな⽂文字では 3.0:1 以上、⼩小さめの⽂文字では 4.5:1 以上に なっていることを考える ・ダークモードに対応する場合は、ダークモードにした時の⽂文

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

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

  21. まとめ 2min

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

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