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
610
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
フルカイテン株式会社 採用資料
fullkaiten
0
36k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
初心者に Vue.js を 教えるには
tsukuha
5
390
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
870
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Why Our Code Smells
bkeepers
PRO
334
57k
GraphQLの誤解/rethinking-graphql
sonatard
66
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Philosophy of Restraint
colly
203
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Designing Experiences People Love
moore
138
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
4 Signs Your Business is Dying
shpigford
180
21k
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 塚本 武志