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.7k
Accessibility in CATS
itome
4
2.4k
Introduce_Owl.pdf
itome
0
86
Introducing Android Accessibility Test with Accessibility Testing Framework
itome
1
680
Architecture_for_mobile_development.pdf
itome
0
250
Android_Accessibility_Suite.pdf
itome
0
140
Introducing Owl
itome
0
1.1k
Migrate to Koin
itome
2
320
Use MVI Architecture in Kotlin × Android
itome
1
1.5k
Other Decks in Technology
See All in Technology
クラウドネイティブ環境の脅威モデリング
kyohmizu
2
420
VitePress & MCPでアプリ仕様のオープン化に挑戦する
hal_spidernight
0
110
テストコードにはテストの意図を込めよう(2025年版) #retechtalk / Put the intent of the test 2025
nihonbuson
PRO
8
1.7k
自動化の第一歩 -インフラ環境構築の自動化について-
smt7174
1
130
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
780
Terraform にコントリビュートしていたら Azure のコストをやらかした話 / How I Messed Up Azure Costs While Contributing to Terraform
nnstt1
1
510
Developer 以外にこそ使って欲しい Amazon Q Developer
mita
0
150
ソフトウェアテスト 最初の一歩 〜テスト設計技法をワークで体験しながら学ぶ〜 #JaSSTTokyo / SoftwareTestingFirstStep
nihonbuson
PRO
2
160
AWSを利用する上で知っておきたい名前解決の話
nagisa53
6
820
技術選定を突き詰める 懇親会LT
okaru
1
580
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
170
AOAI で AI アプリを開発する時にまず考えたいこと
mappie_kochi
1
720
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Fireside Chat
paigeccino
37
3.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
420
Building Applications with DynamoDB
mza
94
6.4k
Typedesign – Prime Four
hannesfritz
41
2.6k
Designing for humans not robots
tammielis
253
25k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Thoughts on Productivity
jonyablonski
69
4.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Rails Girls Zürich Keynote
gr2m
94
13k
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 塚本 武志