Introduction of accessibility for mobile development

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ 2min

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

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

Introduction of accessibility for mobile develo...