$30 off During Our Annual Pro Sale. View Details »

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

BOB
July 14, 2021

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

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

BOB

July 14, 2021
Tweet

More Decks by BOB

Other Decks in Programming

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