Skip to content

Chart Accessibility (SwiftUI)

A SwiftUI guide for coding agents. Also covers voiceover charts ios, audio graph, accessible chart labels, plottable value labels, accessibilityvalue on mark, chart accessibility tree.

Swift Charts builds an accessibility tree for a chart automatically, so VoiceOver support comes for free. Your job is to feed it meaningful labels and, where needed, richer values per mark.

Label the Data, Not the Chart

The labels inside PlottableValue are what VoiceOver reads, so make them meaningful. The .value overloads accept a String, a LocalizedStringKey, or a Text.

enum Gender: String, CaseIterable {
    case male, female, notSet
}

extension Gender: Plottable {
    var primitivePlottable: String { rawValue }
}

Chart {
    ForEach(stats, id: \.city) { stat in
        BarMark(
            x: .value(Text(verbatim: "City"), stat.city),
            y: .value("Population", stat.population)
        )
        .foregroundStyle(by: .value("Gender", stat.gender))
    }
}

The framework groups accessibility elements for marks that share an x value, here the city, and speaks the total as the accessibility value.

Per-Mark Overrides

When the generated value is not enough, set accessibilityLabel and accessibilityValue on the mark itself.

BarMark(
    x: .value(Text(verbatim: "City"), stat.city),
    y: .value("Population", stat.population)
)
.accessibilityValue("Female population: \(stat.population)")

Audio Graphs

Audio graphs, available since iOS 15, play a chart as sound. Swift Charts builds them from your data with no extra code, including the summary and statistics screens.

A VoiceOver user reaches them through the rotor: rotate two fingers on the screen like a dial, pick the audio graphs option, then flick up or down to move through the chart details.

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-swiftui-guide({ topic: "swiftui-mastering-charts-accessibility" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems