Introduction of accessibility for mobile development

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

まとめ 2min

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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