2021 Accessibility & Inclusion
WWDC21 · 20 min · Accessibility & Inclusion
Bring accessibility to charts in your app
Charts are an essential tool for understanding data, and critical to understanding ourselves, our health, our finances, and our world. Find out how you can make charts accessible in your apps to people with vision impairments through audio graphs and sonified data. And we’ll show you how to improve your charts for accessibility through universal design principles and system accessibility settings.
Watch at developer.apple.com ↗Code shown on screen · 6 snippets
Chart Model
class ChartView: UIView {
let model: ChartModel
func drawChart() {
// ...
}
}
struct ChartModel {
let title: String
let dataPoints: [DataPoint]
struct DataPoint {
let name: String
let x: Double
let y: Double
}
} ChartView
extension ChartView {
public override var accessibilityContainerType: UIAccessibilityContainerType { … }
public override var accessibilityLabel: String? { … }
public override var accessibilityElements: [Any]? {
get {
return model.dataPoints.map { point in
let axElement = UIAccessibilityElement(accessibilityContainer: self)
axElement.accessibilityValue = "\(point.x) cups, \(point.y) lines of code"
axElement.accessibilityFrameInContainerSpace = frameRect(for: point)
return axElement
}
}
set {}
}
private func frameRect(for dataPoint: DataPoint) -> CGRect { Basic chart definition example
struct ChartModel {
let title: String
let summary: String
let xAxis: Axis
let yAxis: Axis
let data: [DataPoint]
struct Axis {
let title: String
let range: ClosedRange<Double>
}
struct DataPoint {
let name: String
let x: Double
let y: Double
}
} Enabling Audio Graphs
import Accessibility
extension ChartView: AXChart {
public var accessibilityChartDescriptor: AXChartDescriptor? {
get {
}
set {}
}
} Chart Descriptor- Basic
public var accessibilityChartDescriptor: AXChartDescriptor? {
get {
let xAxis = AXNumericDataAxisDescriptor( … )
let yAxis = AXNumericDataAxisDescriptor(title: model.yAxis.title,
range: model.yAxis.range,
gridlinePositions:[],
valueDescriptionProvider: { value in
return "\(value) lines of code"
})
}
set {}
} Chart Descriptor- Continued
public var accessibilityChartDescriptor: AXChartDescriptor? {
get {
let xAxis = AXNumericDataAxisDescriptor( … )
let yAxis = AXNumericDataAxisDescriptor( … )
let series = AXDataSeriesDescriptor( … )
return AXChartDescriptor(title: model.title,
summary: model.summary,
xAxis: xAxis,
yAxis: yAxis,
additionalAxes: [],
series: [series])
}
set {}
} Resources
Related sessions
-
28 min