Skip to main content
.accessibilityRepresentation(content: Component): Component;

​
Parameters

​
content
Component
A component that represents how this view should appear to accessibility technologies.

​
Support

​
Usage

​
Custom control represented as standard element

// Custom button design
ZStack([
    Circle().fill(Color("blue")),
    Image("play-icon")
]).accessibilityRepresentation(
    Button("Play video", () => {})
)

​
Decorative elements with meaningful representation

// Visual decoration
HStack([
    Image("sparkle1"),
    Text("Premium Feature"),
    Image("sparkle2")
]).accessibilityRepresentation(
    Text("Premium Feature - subscription required")
)

​
Data visualization simplified

// Complex progress ring
ZStack([
    Circle()
        .stroke({ style: Color("gray"), lineWidth: 10 }),
    Circle()
        .stroke({ style: Color("blue"), lineWidth: 10 })
        .rotationEffect(-90)
])
.frame({ width: 100, height: 100 })
.accessibilityRepresentation(
    ProgressView({ value: progress })
        .accessibilityLabel("Download progress")
        .accessibilityValue(`${Math.round(progress * 100)}%`)
)

​
Interactive custom view

// Custom toggle design
Rectangle()
    .fill(isOn ? Color("green") : Color("gray"))
    .overlay(
        Circle()
            .fill(Color("white"))
            .offset(x: isOn ? 20 : -20)
    )
    .accessibilityRepresentation(
        Toggle("Custom setting", isOn: $isOn)
    )