Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

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 ↗

Transcript all transcripts

Code shown on screen · 6 snippets

Chart Model swift · at 10:47 ↗
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 swift · at 10:48 ↗
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 swift · at 14:23 ↗
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 swift · at 15:08 ↗
import Accessibility

extension ChartView: AXChart {

public var accessibilityChartDescriptor: AXChartDescriptor? {
    get {
    }
    set {}
    }
}
Chart Descriptor- Basic swift · at 15:35 ↗
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 swift · at 16:55 ↗
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