iOS 15 图表的可听表达-Audio Graphs API

629 阅读3分钟

「这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

概述

我们都知道,图表和图形可帮助用户快速识别数据中的重要特征和趋势。 但是图表和图形的可访问性方面的表达是比较难得,尤其是提供可听方面的服务。 幸运的是,iOS 15 有一个名为 Audio Graphs 的新功能帮我们解决了这个难题。

使用Audio Graphs API 可以将图表和图形中的数据转变成可听方面的信息,这样可以帮忙盲人或弱视人士更方面的获取数据。

Audio Graphs API通过将每个轴上的数据编码为音频,将图表中的数据转换为可听表示。通常,音频图将 X 轴表示为时间,将 Y 轴表示为音高。

我们可以见到它在一些场景场景中的应用: 比如说,一系列单独的音调随着时间的推移而下降可能是线性下降趋势的散点图的可听表示。

对于股票图表来说,它的可听表示可能是单个连续音调,其音高随着音频随时间(X 轴)播放而随着股票价格(Y 轴)上下调整。

图表的可听表达

要将图表表示为可访问的音频图,需要自定义UIView并采用 AXChart 协议。

class MyChartView: UIView, AXChart {   
var accessibilityChartDescriptor: AXChartDescriptor?
}

设置AXChartDescriptor类型的accessibilityChartDescriptor 属性 ,AXChartDescriptor类型包含图表所需的所有语义信息,例如图表的标题、轴、数据点以及图表关键要点的摘要等。

例如,按国家/地区和建议零售价格来绘制车辆重量与燃油效率的图表需要四个数据轴:

  • X 轴对应于以吨为单位的汽车重量。
  • Y 轴对应于汽车燃油效率(每加仑燃料所行英里数)。
  • 每个数据点的视觉大小对应于汽车的建议零售价。
  • 每个数据点的颜色对应于汽车的原产国。

要创建图表的音频图,首先根据数据模型中的信息设置每个数据点的表示

let cars = generateData() 
let dataPoints = cars.map({ 
return AXDataPoint(x: $0.weight,
                   y: $0.mpg, 
    additionalValues: [.number($0.msrp), .category($0.country)], 
               label: "\($0.make) \($0.model)")})

使用该数据点数组创建一个系列描述符。简单的数据集可能只有一系列数据;更复杂的数据集可能有多个系列。

let series = AXDataSeriesDescriptor(name: "Cars", 
                            isContinuous: false, 
                              dataPoints: dataPoints)

接着创建坐标轴描述符。

let weight = AXNumericDataAxisDescriptor(title: "Weight", 
                                         range:0...5,
                             gridlinePositions: [0, 1, 2, 3, 4, 5]) 
                             { value -> String in 
    let format = NSLocalizedString("%.2f tons", 
                             comment: "Format string for values in tons") 
     return String.localizedStringWithFormat(format, value)
     }
let mpg = AXNumericDataAxisDescriptor(title: "Fuel Efficiency", 
                                      range: 0...50, 
                          gridlinePositions: [0, 10, 20, 30, 40, 50]) 
                          { value -> String in 
   let format = NSLocalizedString("%ld miles per gallon", 
   comment: "Format string for values in miles per gallon") 
   return String.localizedStringWithFormat(format, value)
   } 
let msrp = AXNumericDataAxisDescriptor(title: "MSRP", 
                                       range: 0...150000, 
                           gridlinePositions: []) 
                           { value -> String in 
   let format = NSLocalizedString("%ld MSRP", 
   comment: "Format string for MSRP values")
   return String.localizedStringWithFormat(format, value)
   } 
let country = AXCategoricalDataAxisDescriptor(title: "Country",
                                      categoryOrder: 
                                      cars.compactMap{ $0.country })

准备标题与概要

let title = NSLocalizedString("Vehicle Weight vs Fuel Efficiency by Country and MSRP", 
comment: "Chart title for fuel efficiency vs mpg chart") 
let summary = NSLocalizedString("The chart shows that fuel efficiency decreases as vehicle weight increases.", 
comment: "Chart summary for fuel efficiency vs mpg chart")

然后,根据创建图表描述符,将上述数据作为参数传进来。

accessibilityChartDescriptor = AXChartDescriptor(title: title,
                                               summary: summary,
                                                 xAxis: weight,
                                                 yAxis: mpg, 
                                        additionalAxes: [msrp, country], 
                                                series: [series])

最后生成的图表描述符生成一个音频图,权重为时间,每加仑燃料所行英里数为音调,建议零售价格为音调长度,原产国为音色。

总结

苹果在iOS15中引进的Audio Graphic新特性,极大的方面了图表和图形的可听化表达。基于此,我们可以方便的构建图表和图形可听化方面的产品。