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
小売アプリのためのアクセシビリティ / Accessibility for Retail Apps
Search
CyberAgent
PRO
November 21, 2023
Technology
0
63
小売アプリのためのアクセシビリティ / Accessibility for Retail Apps
CyberAgent
PRO
November 21, 2023
Tweet
Share
More Decks by CyberAgent
See All by CyberAgent
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
クリエイティブ制作領域の データ活用を0から推進した話
cyberagentdevelopers
PRO
2
500
opt-in camera:カメラによる行動計測におけるオプトインの仕組みの実現
cyberagentdevelopers
PRO
2
420
競輪選手の体力を視覚化するための物体認識とデータサイエンスの融合
cyberagentdevelopers
PRO
3
380
学園アイドルマスターの アイドルをより輝かせる ライティング手法
cyberagentdevelopers
PRO
3
17k
スマートフォンGPUの特性を解析! 社内で実施予定のGPUパフォーマンスチューニング研修を紹介します!
cyberagentdevelopers
PRO
1
400
NAB Show 2024 動画技術関連レポート/ NAB Show 2024 Report
cyberagentdevelopers
PRO
3
500
CI/CDのススメ(サイバーエージェント新卒研修2024)
cyberagentdevelopers
PRO
1
140
Kubernetesのススメ(サイバーエージェント新卒研修2024)
cyberagentdevelopers
PRO
2
170
Other Decks in Technology
See All in Technology
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Teambox: Starting and Learning
jrom
130
8.6k
Designing for humans not robots
tammielis
247
25k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Writing Fast Ruby
sferik
623
60k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
GraphQLとの向き合い方2022年版
quramy
36
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Music & Morning Musume
bryan
43
5.9k
Transcript
小売アプリのための アクセシビリティ 1 増山 洸輝
2 増山 洸輝 2023年度 中途入社 AI 事業本部 アプリ運用カンパニー所属 @masssun モバイルアプリチームのリードエンジニアを
しています
アプリ運用カンパニーとは • 小売企業様と協業して、アプリを中心としたデジタルでの購買体験の実現を 行う事業部 3
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
4
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
5
アクセシビリティとは ・Accessibility is the practice of making your websites usable
by as many people as possible. (アクセシビリティとは、ウェブサイトをできるだけ多くの人が利用できるように することです。) https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility 6
アクセシビリティとは ❌ 障害を持つ人のための対応 ⭕ 障害を持つ人だけでなく、異なる情報端末やソフトウェアを利用する人でも 情報にアクセスできるようにすること 7
モバイルにおけるアクセシビリティ ・VoiceOver / TalkBack 画面が見えなくてもアプリのインターフェイスを体験できるよう、画面の表示内 容の説明を読み上げる機能 8
モバイルにおけるアクセシビリティ ・文字サイズのカスタマイズ 文字を太くする、文字を大きくする、コントラストを上げる、カラーの反転 9
モバイルにおけるアクセシビリティ ・Assistive Touch 音量を調節する、画面をロックするといったボタンを押す操作を画面のタップに 置き換える 10
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
11
何故アクセシビリティが必要なのか ・今回の案件は既存アプリのリニューアル ・すでに多くのユーザーを抱えていて、様々な世代な人々が使用している 12
何故アクセシビリティが必要なのか ・日本における身体障害者の割合 ・約 3 % https://www8.cao.go.jp/shougai/whitepaper/h29hakusho/zenbun/siryo_02.h tml 13
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
14
Flutter におけるアクセシビリティ対応 ・スクリーンリーダー (VoiceOver / TalkBack) ・OS の設定に基づいたフォントサイズ ・十分なコントラスト https://docs.flutter.dev/ui/accessibility-and-internationalization/access
ibility 15
スクリーンリーダー ・Semantics widget ・widget ツリーに、widget の説明を追加する ・e.g. このテキストが何であるか、ボタンをタップすると何が起こるのか https://api.flutter.dev/flutter/widgets/Semantics-class.html 16
Semantics widget 17
Semantics widget ・標準 widget の多くは Semantics で wrap されている ・e.g.
AppBar, Text, etc. 18
AppBar 19
OS の設定に基づいたフォントサイズ ・Text widget を使っていれば、フォントサイズは OS の設定に基づいて Flutter が自動的に計算する 20
Flutter におけるアクセシビリティ対応 ・特別な対応をせずとも、アクセシブルなアプリケーションを構築することがで きる 21
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
22
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
23
画像 24
画像 ・https://pub.dev/packages/cached_network_image を使用していたので、 Semantics widget で wrap した ・Image widget
を使用している場合は、semanticsLabel に文字列を渡せば良い 25
画像 26
複数スタイルのテキスト 27
複数スタイルのテキスト 28
複数スタイルのテキスト ・読み上げられるテキストは分かれてしまうので、まとめたい 29
複数スタイルのテキスト ・MergeSemantics widget https://api.flutter.dev/flutter/widgets/MergeSemantics-class.html ・RichText widget (※) 30
MergeSemantics widget 31
RichText widget ・textScaleFactor のデフォルト値が 1 のため、 MediaQuery.textScaleFactorOf(context) を指定する必要がある 32
アイコン付きのボタン 33
アイコン付きのボタン ・アイコン部分は読み上げたくない 34
アイコン付きのボタン ・ExcludeSemantics widget https://api.flutter.dev/flutter/widgets/ExcludeSemantics-class.html 35
テキスト 36
テキスト ・semanticsLabel を設定する 37
ListView 38
ListView 39
ListView ・children に渡した widget で ひとつの semantics tree が構築される 40
ListView ・SingleChildScrollView + Column に変更した ・パフォーマンスの劣化が懸念されるが、レンダリングコストが低い画面だった ため、許容 41
ListView を使わなければならない場合 ・addSemanticIndexes に false を指定し、子 widget を IndexedSemantics で
wrap する 42
スナックバー 43
スナックバー ・コンテンツが表示されたことに気づけないため、自動で読み上げる必要がある ・Semantics.liveRegion に true を設定する 44
タップ領域 ・小さすぎると、UI を発見することができない ・最低でも 44px * 44px を確保する https://developer.apple.com/jp/design/tips/ 45
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
46
Text widget ・Text Scale Factor ・ フォントサイズは OS の設定に基づいて Flutter
が自動的に計算する 47
Text Scale Factor で気をつけること ・Layout overflow を起こさないような UI の組み方をする 48
Layout overflow を防ぐ ・SizedBox で width, height を固定にしない ・ConstrainedBox で
minWidth, minHeight を設定し、child の大きさに応じて 拡大できるようにする 49
Layout overflow を防ぐ ・Column の子 widget は Wrap / Expanded
で wrap し、画面端で改行される ようにする 50
Layout overflow を防ぐ ・GridView 51
Layout overflow を防ぐ ・flutter_layout_grid を使って高さが可変になるようにしている https://pub.dev/packages/flutter_layout_grid 52
53 レイアウト崩れを起こしていない ≠ 違和感のないデザイン
54
1行におさめる ・TextOverflow.ellipsis を指定して、三点リーダーで切る ・FittedBox を使用する (fit には BoxFit.scaleDown を指定) ・textScaleFactor
の上限値を設定する 55
FittedBox を使用する ・同じような UI を並べる場合には不向き 56
textScaleFactor の上限値を設定する 57
アジェンダ 1.アクセシビリティとは 2.何故アクセシビリティが必要なのか 3.Flutter におけるアクセシビリティ対応 4.アクセシビリティ対応 Tips a.スクリーンリーダー b.大きいフォント 5.まとめ
58
まとめ ・アクセシビリティ対応は難しくない ・プロジェクトの初期から実装することで、自然とアクセシブルになり、アクセ シビリティのための追加の工数はほとんど必要ない 59