Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction of accessibility for mobile develo...
Search
itome
June 20, 2019
Technology
0
230
Introduction of accessibility for mobile development
itome
June 20, 2019
Tweet
Share
More Decks by itome
See All by itome
Android accessibility and automated check tools
itome
1
4.6k
Accessibility in CATS
itome
4
2.3k
Introduce_Owl.pdf
itome
0
83
Introducing Android Accessibility Test with Accessibility Testing Framework
itome
1
620
Architecture_for_mobile_development.pdf
itome
0
240
Android_Accessibility_Suite.pdf
itome
0
140
Introducing Owl
itome
0
1k
Migrate to Koin
itome
2
300
Use MVI Architecture in Kotlin × Android
itome
1
1.4k
Other Decks in Technology
See All in Technology
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
The Rise of LLMOps
asei
7
1.7k
強いチームと開発生産性
onk
PRO
35
11k
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
180
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.1k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
0
28
Designing for humans not robots
tammielis
250
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Scaling GitHub
holman
458
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Code Review Best Practice
trishagee
64
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Transcript
モバイルアプリ開発のため のアクセシビリティ⼊入⾨門
⾃自⼰己紹介 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 ⽂文字と背景⾊色のコントラストを⾼高くする ・⼤大きな⽂文字では 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 塚本 武志