Representing Chart Data as an Audio Graph

https://developer.apple.com/documentation/accessibility/audio_graphs/representing_chart_data_as_an_audio_graph

"Define accessible representations of your chart's components for VoiceOver to construct an audible representation of the data."

데이터의 오디오 표현을 구성하기 위해서, 보이스오버를 위한 차트 컴포넌트의 접근 가능한 표현을 정의합니다.

Overview

차트를 접근 가능한 오디오 그래프로 나타내기 위해, 차트의 뷰 모델에 AXChart 프로토콜을 채택하시기 바랍니다. 오디오 인터페이스를 통해 나타내고자 하는 정보를 갖고 있는 AXChartDescriptor에 accessibilityChartDescriptor 속성을 설정하시기 바랍니다. 차트의 제목, 축, 데이터 포인트, 차트의 핵심 내용 요약과 같은 것이 대상입니다.

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

예를 들어 국가 및 MSRP별 연비에 대응하는 차량 무게를 나타내는 차트는 네 가지 축이 있습니다.

• X 축은 차량의 무게를 톤으로 나타냅니다.
• Y 축은 차량의 연료 효율을 MPG로 나타냅니다.
• 차량의 MSRP에 상응하는 각 데이터 포인트의 시각적 크기입니다.
• 차량의 원산지를 나타내는 각 데이터 포인트의 색상입니다.

차트의 오디오 그래프를 생성하려면, 우선 데이터 모델의 정보에 기반해 데이터 포인트 각각의 표현을 설정해야 합니다. 연속적 표현자를 생성하기 위한 데이터 포인트의 배열을 사용해야 합니다(데이터 포인트의 컬렉션을 나타내는 컨테이너). 간단한 데이터 집합은 하나의 데이터 시리즈일 것입니다. 더 복잡한 데이터 집합은 여러 개의 시리즈를 갖고 있을 것입니다.

let cars = generateData()

// Generate the data points from the model data.
let dataPoints = cars.map({
    return AXDataPoint(x: $0.weight,
                       y: $0.mpg,
        additionalValues: [.number($0.msrp), .category($0.country)],
                   label: "\($0.make) \($0.model)")
})
        
// Make the series descriptor.
let series = AXDataSeriesDescriptor(name: "Cars",
                            isContinuous: false,
                              dataPoints: dataPoints)

다음으로 차트 축에 대한 표현자를 설정합니다. 숫자 축의 경우 단위를 포함하는 스트링 표현으로 데이터 값을 포맷하기 위해 valueDescriptionProvider 클로저를 사용해야 합니다. 더 복잡한 포맷을 갖는 스트링을 생성하려면 NumberFormatter 혹은 DateFormatter 사용을 고려하시기 바랍니다.

// Make the axis descriptors.
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 })

차트 데이터 주변의 컨텍스트를 제공하려면, 로컬 제목을 포함해야 하고, 차트에서 데이터의 핵심을 요약하는 요약 생성을 생각해봐야 합니다.

// Write a localized title for the chart.
let title = NSLocalizedString("Vehicle Weight vs Fuel Efficiency by Country and MSRP",
                              comment: "Chart title for fuel efficiency vs mpg chart")

// Write a summary of the chart's data.
let summary = NSLocalizedString("The chart shows that fuel efficiency decreases as vehicle weight increases.",
                                comment: "Chart summary for fuel efficiency vs mpg chart")

이후 차트 컴포넌트의 개별 표현자에 기반해 차트 표현자를 생성하시기 바랍니다.

// Make and set the chart descriptor.
accessibilityChartDescriptor = AXChartDescriptor(title: title,
                                                 summary: summary,
                                                 xAxis: weight,
                                                 yAxis: mpg,
                                                 additionalAxes: [msrp, country],
                                                 series: [series])

차트 표현자는 무게를 시간으로, MPG를 피치로, MSRP를 톤 길이로, 원산지를 음색으로 갖는 오디오 그래프를 제공할 것입니다.