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

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
   

   View Slide

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

   こよなく愛している
   2
   

   View Slide

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

   View Slide

4. アクセシビリティって？
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

14. 本題に⼊る前に
    

    View Slide

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
    

    View Slide

16. 折れ線グラフ
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

22. 棒グラフ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

30. まとめ
    

    View Slide

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

    View Slide