アクセシブルなチャートを実現しよう

CA.swift #15 WWDC21報告会
https://cyberagent.connpass.com/event/215215/

Transcript

1. アクセシブルなチャートを 実現しよう 2 021 / 0 7 / 14 CA.swift # 1 5 WWDC 21 報告会 Arata Yokoyama / GitHub : ARATAYOKOYAMA Twitter : BOBG 10 18 Vi
2. About Me • Arata Yokoyama • 2020年サイバーエージェント新卒⼊社 • タップルのiOSエンジニア • 北海道出⾝ • アイドル‧特撮‧ガンダムを 
 こよなく愛している 2
3. 1 .アクセシビリティって？ 2 .本題に⼊る前に 3 .折れ線グラフ 4 .棒グラフ 5 .まとめ
4. アクセシビリティって？
5. アクセシビリティにどのようなイメージをお持ちでしょうか？ 5
6. アクセシビリティを必要とするユーザー = 障がいを持つユーザー 6
7. アクセシビリティを必要とするユーザー = 障がいを持つユーザー 対象が狭いよ 7
8. アクセシビリティを必要とするユーザー = 全てのユーザー 8
9. アクセシビリティ対応をするためには．．．？？ • accessibilityLabel • VoiceOver • コントラストを4.5:1にして．．． 9
10. アクセシビリティ対応をするためには．．．？？ • accessibilityLabel • VoiceOver • コントラストを4.5:1にして．．． ⼿段より概念を調べる ことをおすすめします 1 0
11. WCAG (Web Content Accessibility Guidelines) • ウェブアクセシビリティに関する代表的なガイドライン • 国際標準化機構であるWorld Wide Web Consortium(W 3 C)の Web Accessibility Initiative(WAI)によって公開されている Web Content Accessibility GuidelinesɿWeb Content Accessibility Guidelines - Wikipedia 1 1
12. WCAG (Web Content Accessibility Guidelines) Web Content Accessibility Guidelines (WCAG) 2.1ɿhttps://waic.jp/docs/WCAG21/#text-alternatives 1 2
13. WCAG (Web Content Accessibility Guidelines) Web Content Accessibility Guidelines (WCAG) 2.1ɿhttps://waic.jp/docs/WCAG21/#text-alternatives 知覚可能 コンテンツが伝わるか 操作可能 操作しやすいか 理解可能 理解しやすいか 堅牢 端末‧OSに依存していないか 1 3
14. 本題に⼊る前に
15. 本題に⼊る前に • お話するセッション Bring accessibility to charts in your app • ⽤意したアプリ https://github.com/ARATAYOKOYAMA/A 1 1 yChartApp • アプリ環境 Xcode 13 Beta iOS 15 https://github.com/danielgindi/Charts Bring accessibility to charts in your appɿhttps://developer.apple.com/videos/play/wwdc2021/10122/ 1 5
16. 折れ線グラフ
17. 課題を考えてみてください！ 1 7
18. コントラスト • Beforeは意図的に 
 .withAlphaComponent( 0 . 3 ) • コントラスト⽐は最低でも 
 4.5:1が望ましい • Xcode付属の 
 Accessibility Inspectorも活⽤! Before After Color and Contrastɿ https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/color-and-contrast/ 1 8
19. ⾊の選択 • ⾊覚異常がある⽅にはBeforeの ように⾒えるかも • ⾚と緑は避けたほうがよい 
 組み合わせ 橙と⻩緑，⻘と紫なども避けるべき Before After ৭֮ҟৗͱ͸ɿhttps://www.santen.co.jp/ja/healthcare/eye/library/color_deficiency/ 13.৭֮ͷҟৗɿhttps://www.skk-net.com/health/me/c01_13.html 1 9
20. ⾊に頼らない表現⽅法 • データ以外にシンボルを追加し て，⾊に頼らない表現を実現する のも良い Before After 知覚可能 コンテンツが伝わるか 2 0
21. 各種ハンドリング⽅法 UIAccessibilityɿhttps://developer.apple.com/documentation/uikit/uiaccessibility 2 1
22. 棒グラフ
23. 初期状態 アプリ画⾯‧UIKit 使⽤モデル 2 3
24. Voice Overで 取り扱えるようにしよう 2 4
25. STEP 1 . accessibilityContainerType • グループ化することでナビゲーションの助けになる View全体をグループ化 accessibilityContainerTypeɿhttps://developer.apple.com/documentation/objectivec/nsobject/2865802-accessibilitycontainertype 2 5
26. STEP 2 . accessibilityLabel • VoiceOverがグループ化したViewにフォーカスされたときに読み上げられるテキスト • 必要ならValueやHintも設定可能 今回はグラフのタイトルを返す UIAccessibilityLabelɿhttps://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel 2 6
27. STEP 3 . accessibilityElements • ValueやLabel，Hint，認識させるFrameを個別に設定する • 棒の数が多い場合：全ての要素に設定<画⾯に表⽰しているViewに対して設定を推奨 • Frameを容易に取得できるようにしておくと楽に設定できる印象を持ちました VoiceOverに認識させるframeを個別に設定 ローカライズもするとなおよし！ UIAccessibilityElementɿhttps://developer.apple.com/documentation/uikit/uiaccessibilityelement 2 7
28. SwiftUI • コンポーネント単位での設定が容易な印象を持ちました • VStackなどにlabelを設定し，⼦コンポーネントをignoreにするもの⼿です labelやvalueの設定 Ignoreにして棒+ラベルのセットで 認識させるのも⼿です Ignoreにして棒+ラベルのセットで 認識させるのも⼿です labelやvalueの設定 2 8
29. Charts製棒グラフ • UIAccessibility.Noti fi cationの設定も最 初からされている印象 • 要素別のlabelやvalueも設定されている ⾃作 or 導⼊の検討してもよさそう Chartsɿhttps://github.com/danielgindi/Charts UIAccessibility.Notificationɿhttps://developer.apple.com/documentation/uikit/uiaccessibility/notification 2 9
30. まとめ
31. まとめ • アクセシビリティは全てのユーザが対象 • コントラスト⽐を意識しつつ，⾊に頼らない画⾯にしましょう • VoiceOverで取り扱えるようにしましょう 3 1