Skip to main content
.accessibilityHidden(isHidden?: boolean): Component;

Parameters

isHidden
boolean
Whether to hide this view from accessibility technologies. Defaults to true if not provided.

Support

Usage

Hide decorative elements

VStack([
    Image("decorative-border.png")
        .accessibilityHidden(), // Hidden from screen readers
    Text("Important content"),
    Image("decorative-footer.png")
        .accessibilityHidden()
])

Hide redundant information

HStack([
    Image("user-avatar.jpg")
        .accessibilityHidden(), // Avatar is redundant with name
    VStack([
        Text("John Doe")
            .accessibilityLabel("User: John Doe"),
        Text("Online")
    ])
])

Conditionally hide elements

VStack([
    Text("Main content"),
    Image("loading-spinner.gif")
        .accessibilityHidden(isLoading) // Only hide when loading
])

Hide visual noise

VStack([
    HStack([
        Text("★★★★☆")
            .accessibilityHidden(), // Hide visual stars
        Text("4 out of 5 stars") // Keep semantic text
    ]),
    Text("Great product!")
])

Hide implementation details

ZStack([
    // Background elements hidden from accessibility
    Rectangle()
        .fill(Color("background"))
        .accessibilityHidden(),
    Circle()
        .stroke({ style: Color("accent"), lineWidth: 2 })
        .accessibilityHidden(),

    // Only the content is accessible
    Text("Focus content")
        .accessibilityLabel("Important announcement")
])

Progressive disclosure

VStack([
    Button(showDetails ? "Hide Details" : "Show Details", () => {
        showDetails.toggle()
    }),

    if (showDetails) {
        Text("Detailed information")
    } else {
        Text("Summary only")
            .accessibilityHidden(!showDetails)
    }
])