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
670
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
MySQL Indexes and Histograms – How they really speed up your queries
lefred
0
120
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
2
380
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
530
Azure Maps Visual in PowerBIで分析しよう
nakasho
0
160
AZ 名とAZ ID の違いを 何度でも言うよ
miu_crescent
PRO
0
110
ドキュメント管理の理想と現実
kazuhe
1
280
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
120
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
140
AI 코딩 에이전트 더 똑똑하게 쓰기
nacyot
0
390
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
210
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
220
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
180
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Scaling GitHub
holman
459
140k
Done Done
chrislema
184
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
Unsuck your backbone
ammeep
670
57k
Fireside Chat
paigeccino
37
3.4k
The Language of Interfaces
destraynor
157
25k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Building Applications with DynamoDB
mza
94
6.3k
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 塚本 武志