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

Slide 1

Slide 1 text

アクセシブルなチャートを実現しよう 2 021 / 0 7 / 14 CA.swift # 1 5 WWDC 21 報告会 Arata Yokoyama / GitHub : ARATAYOKOYAMA Twitter : BOBG 10 18 Vi

Slide 2

Slide 2 text

About Me • Arata Yokoyama • 2020年サイバーエージェント新卒⼊社 • タップルのiOSエンジニア • 北海道出⾝ • アイドル‧特撮‧ガンダムを   こよなく愛している 2

Slide 3

Slide 3 text

1 .アクセシビリティって？ 2 .本題に⼊る前に 3 .折れ線グラフ 4 .棒グラフ 5 .まとめ

Slide 4

Slide 4 text

アクセシビリティって？

Slide 5

Slide 5 text

アクセシビリティにどのようなイメージをお持ちでしょうか？ 5

Slide 6

Slide 6 text

アクセシビリティを必要とするユーザー = 障がいを持つユーザー 6

Slide 7

Slide 7 text

アクセシビリティを必要とするユーザー = 障がいを持つユーザー対象が狭いよ 7

Slide 8

Slide 8 text

アクセシビリティを必要とするユーザー = 全てのユーザー 8

Slide 9

Slide 9 text

アクセシビリティ対応をするためには．．．？？ • accessibilityLabel • VoiceOver • コントラストを4.5:1にして．．． 9

Slide 10

Slide 10 text

アクセシビリティ対応をするためには．．．？？ • accessibilityLabel • VoiceOver • コントラストを4.5:1にして．．．⼿段より概念を調べることをおすすめします 1 0

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

WCAG (Web Content Accessibility Guidelines) Web Content Accessibility Guidelines (WCAG) 2.1ɿhttps://waic.jp/docs/WCAG21/#text-alternatives 1 2

Slide 13

Slide 13 text

WCAG (Web Content Accessibility Guidelines) Web Content Accessibility Guidelines (WCAG) 2.1ɿhttps://waic.jp/docs/WCAG21/#text-alternatives 知覚可能コンテンツが伝わるか操作可能操作しやすいか理解可能理解しやすいか堅牢端末‧OSに依存していないか 1 3

Slide 14

Slide 14 text

本題に⼊る前に

Slide 15

Slide 15 text

本題に⼊る前に • お話するセッション 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

Slide 16

Slide 16 text

折れ線グラフ

Slide 17

Slide 17 text

課題を考えてみてください！ 1 7

Slide 18

Slide 18 text

コントラスト • 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

Slide 19

Slide 19 text

⾊の選択 • ⾊覚異常がある⽅には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

Slide 20

Slide 20 text

⾊に頼らない表現⽅法 • データ以外にシンボルを追加して，⾊に頼らない表現を実現するのも良い Before After 知覚可能コンテンツが伝わるか 2 0

Slide 21

Slide 21 text

各種ハンドリング⽅法 UIAccessibilityɿhttps://developer.apple.com/documentation/uikit/uiaccessibility 2 1

Slide 22

Slide 22 text

棒グラフ

Slide 23

Slide 23 text

初期状態アプリ画⾯‧UIKit 使⽤モデル 2 3

Slide 24

Slide 24 text

Voice Overで取り扱えるようにしよう 2 4

Slide 25

Slide 25 text

STEP 1 . accessibilityContainerType • グループ化することでナビゲーションの助けになる View全体をグループ化 accessibilityContainerTypeɿhttps://developer.apple.com/documentation/objectivec/nsobject/2865802-accessibilitycontainertype 2 5

Slide 26

Slide 26 text

STEP 2 . accessibilityLabel • VoiceOverがグループ化したViewにフォーカスされたときに読み上げられるテキスト • 必要ならValueやHintも設定可能今回はグラフのタイトルを返す UIAccessibilityLabelɿhttps://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel 2 6

Slide 27

Slide 27 text

STEP 3 . accessibilityElements • ValueやLabel，Hint，認識させるFrameを個別に設定する • 棒の数が多い場合：全ての要素に設定<画⾯に表⽰しているViewに対して設定を推奨 • Frameを容易に取得できるようにしておくと楽に設定できる印象を持ちました VoiceOverに認識させるframeを個別に設定ローカライズもするとなおよし！ UIAccessibilityElementɿhttps://developer.apple.com/documentation/uikit/uiaccessibilityelement 2 7

Slide 28

Slide 28 text

SwiftUI • コンポーネント単位での設定が容易な印象を持ちました • VStackなどにlabelを設定し，⼦コンポーネントをignoreにするもの⼿です labelやvalueの設定 Ignoreにして棒+ラベルのセットで認識させるのも⼿です Ignoreにして棒+ラベルのセットで認識させるのも⼿です labelやvalueの設定 2 8

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

まとめ

Slide 31

Slide 31 text

まとめ • アクセシビリティは全てのユーザが対象 • コントラスト⽐を意識しつつ，⾊に頼らない画⾯にしましょう • VoiceOverで取り扱えるようにしましょう 3 1