記事


チャートデータをオーディオグラフとして表現


VoiceOver がデータの音声表現を構築できるように、あなたのグラフのコンポーネントのアクセス可能な表現を定義します。





概観


あなたのチャートをアクセシブルなオーディオグラフとして表現するには、あなたのチャートのビューモデルに AXChart プロトコルを採用します。accessibilityChartDescriptor プロパティを、グラフのタイトル、軸、データ点、グラフの重要なポイントの概要など、オーディオインターフェイスを通じてグラフを表現するために必要なすべての意味情報が含まれている AXChartDescriptor に設定します。


  1. class MyChartView: UIView, AXChart {
  2. var accessibilityChartDescriptor: AXChartDescriptor?
  3. }


たとえば、国およびメーカー希望小売価格 (MSRP) ごとの燃費に対する車両重量をプロットしたグラフには、以下の 4 つのデータ軸があります。


  • X 軸は車両の重量をトン単位で表します。

  • Y 軸は、MPG(Miles Per Gallon) での車の燃費に対応します。

  • 各データポイントの視覚的なサイズは、自動車のメーカー希望小売価格に対応します。

  • 各データポイントの色は、自動車の製造国に対応しています。

    • チャートのオーディオグラフを作成するには、まずあなたのデータモデル内の情報に基づいて各データポイントの表現を設定します。そのデータポイントの配列を使用して、 シリーズ記述子 (データポイントのコレクションを記述するコンテナ) を作成します。単純なデータセットには 1 つのデータシリーズしか含まれません。より複雑なデータセットには複数のシリーズが含まれます。


    1. let cars = generateData()
    3. // Generate the data points from the model data.
    4. let dataPoints = cars.map({
    5. return AXDataPoint(x: $0.weight,
    6. y: $0.mpg,
    7. additionalValues: [.number($0.msrp), .category($0.country)],
    8. label: "\($0.make) \($0.model)")
    9. })
    11. // Make the series descriptor.
    12. let series = AXDataSeriesDescriptor(name: "Cars",
    13. isContinuous: false,
    14. dataPoints: dataPoints)


    次に、チャートの軸の記述子を設定します。数値軸の場合は、valueDescriptionProvider (valueDescriptionProvider) クロージャを使用して、データ値を、単位を含む文字列表現にフォーマットします。NumberFormatter (NumberFormatter) や DateFormatter (DateFormatter) などのフォーマッタを使用して、より複雑な形式の文字列を生成することを検討してください。


    1. // Make the axis descriptors.
    2. let weight = AXNumericDataAxisDescriptor(title: "Weight",
    3. range: 0...5,
    4. gridlinePositions: [0, 1, 2, 3, 4, 5]) { value -> String in
    5. let format = NSLocalizedString("%.2f tons",
    6. comment: "Format string for values in tons")
    7. return String.localizedStringWithFormat(format, value)
    8. }
    10. let mpg = AXNumericDataAxisDescriptor(title: "Fuel Efficiency",
    11. range: 0...50,
    12. gridlinePositions: [0, 10, 20, 30, 40, 50]) { value -> String in
    13. let format = NSLocalizedString("%ld miles per gallon",
    14. comment: "Format string for values in miles per gallon")
    15. return String.localizedStringWithFormat(format, value)
    16. }
    18. let msrp = AXNumericDataAxisDescriptor(title: "MSRP",
    19. range: 0...150000,
    20. gridlinePositions: []) { value -> String in
    21. let format = NSLocalizedString("%ld MSRP",
    22. comment: "Format string for MSRP values")
    23. return String.localizedStringWithFormat(format, value)
    24. }
    26. let country = AXCategoricalDataAxisDescriptor(title: "Country",
    27. categoryOrder: cars.compactMap{ $0.country })


    チャートのデータに関するコンテキストを提供しやすくするために、ローカライズされたタイトルを含め、チャート内のデータの重要なポイントを要約する概要を作成することを検討してください。


    1. // Write a localized title for the chart.
    2. let title = NSLocalizedString("Vehicle Weight vs Fuel Efficiency by Country and MSRP",
    3. comment: "Chart title for fuel efficiency vs mpg chart")
    5. // Write a summary of the chart's data.
    6. let summary = NSLocalizedString("The chart shows that fuel efficiency decreases as vehicle weight increases.",
    7. comment: "Chart summary for fuel efficiency vs mpg chart")


    次に、チャートのコンポーネントの個々の記述子に基づいてチャート記述子を作成します。


    1. // Make and set the chart descriptor.
    2. accessibilityChartDescriptor = AXChartDescriptor(title: title,
    3. summary: summary,
    4. xAxis: weight,
    5. yAxis: mpg,
    6. additionalAxes: [msrp, country],
    7. series: [series])


    結果として得られるチャート記述子は、時間として重さ、ピッチとして MPG(燃費)、音の長さとしてのMSRP(メーカー希望小売価格)、および音色として原産国を含むオーディオグラフを生成します。














    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ