モバイルアプリ開発のためのアクセシビリティ⼊入⾨門
View Slide
⾃自⼰己紹介https://twitter.com/itometeamhttps://github.com/itomehttps://medium.com/@itometeam0.5min塚本武志CyberAgent CATS
アクセシビリティって何?2min
アクセシビリティって何?⼀般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利⽤しやすさという意味でも使われます。似た意味をもつ⾔葉にユーザビリティがありますが、アクセシビリティはユーザビリティより幅広い利⽤状況、多様な利⽤者を前提とします。ウェブアクセシビリティ基盤委員会 (https://waic.jp/knowledge/accessibility/)2min
アクセシビリティって何?min⼀般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利⽤しやすさという意味でも使われます。似た意味をもつ⾔葉にユーザビリティがありますが、アクセシビリティはユーザビリティより幅広い利⽤状況、多様な利⽤者を前提とします。ウェブアクセシビリティ基盤委員会 (https://waic.jp/knowledge/accessibility/)
アクセシビリティって何?minAndroid / 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⽂文字と背景⾊色のコントラストを⾼高くする・⼤大きな⽂文字では 3.0:1 以上、⼩小さめの⽂文字では 4.5:1 以上になっていることを考える・ダークモードに対応する場合は、ダークモードにした時の⽂文字⾊色にも注意・https://material.io/tools/colorで背景⾊色と⽂文字⾊色の組み合わせのテストができる
アプリ開発者ができること2min画像に適切な説明⽂文をつける・ネットワークから取得する画像や、アイコンのみのボタンにはテキストによる情報がないため、画⾯面読み上げがきちんと動作しない・iOSのUIImageViewにはaccessibilityLabel、AndroidのImageViewにはcontentDescriptionを追加することで、読み上げ情報を追加できる
まとめ2min
まとめ2min・アクセシビリティに配慮することで、誰もが使いやすいアプリにすることができる・アクセシビリティに関する機能は普段使うことがないので、まずは⼀一度⾃自分で試してみる・対応コストが⾼高い場合は、画像の説明だけ、重要な画⾯面だけ、など部分的なところから始める
ありがとうございましたhttps://twitter.com/itometeamhttps://github.com/itomehttps://medium.com/@itometeam塚本 武志