Accessibility - Metabind

These modifiers shape how a component is announced and navigated by VoiceOver, TalkBack, and other assistive technologies. accessibilityLabel provides the spoken name; accessibilityValue adds dynamic state like a percentage; accessibilityHidden removes purely decorative elements from the accessibility tree; accessibilityRemoveTraits strips default traits like “button” or “image”. For additional context use accessibilityHint, and to add traits use accessibilityAddTraits.

accessibilityLabel

Sets the VoiceOver label for a component.

.accessibilityLabel(label: string)

label

string

required

The text that VoiceOver reads when the user focuses on the component.

Label an icon button

Button("", () => share())
    .accessibilityLabel("Share")

Label an image

Image({ url: "profile.jpg" })
    .resizable()
    .frame({ width: 48, height: 48 })
    .clipShape(Circle())
    .accessibilityLabel("Profile photo")

accessibilityValue

Sets the current accessibility value for a component, such as a percentage or status.

.accessibilityValue(value: string)

value

string

required

The current value of the component, read by VoiceOver after the label. For example, “50 percent” for a progress indicator.

Set a value for a progress indicator

ProgressView({ value: 0.75 })
    .accessibilityLabel("Download progress")
    .accessibilityValue("75 percent")

Set a value for a custom rating display

HStack(stars)
    .accessibilityLabel("Rating")
    .accessibilityValue("4 out of 5 stars")

accessibilityHidden

Hides a component from assistive technologies like VoiceOver.

.accessibilityHidden(isHidden?: boolean)

isHidden

boolean

default:"true"

Whether to hide the component from assistive technologies. Defaults to true.

Hide a decorative element

Image({ url: "decorative-divider.png" })
    .resizable()
    .accessibilityHidden()

Conditionally hide from accessibility

Image({ url: "icon.png" })
    .resizable()
    .accessibilityHidden(isDecorative)

accessibilityRemoveTraits

Removes default accessibility traits from a component.

.accessibilityRemoveTraits(traits: AccessibilityTraits | AccessibilityTraits[])

traits

AccessibilityTraits | AccessibilityTraits[]

required

One or more accessibility traits to remove from the component. See AccessibilityTraits.

Remove the button trait from a Button used as a label

Button("Status: Active", () => {})
    .accessibilityRemoveTraits("isButton")

Remove multiple traits

Image({ url: "photo.jpg" })
    .resizable()
    .accessibilityRemoveTraits(["isImage", "isButton"])

​accessibilityLabel

​accessibilityValue

​accessibilityHidden

​accessibilityRemoveTraits

​See also

accessibilityLabel

accessibilityValue

accessibilityHidden

accessibilityRemoveTraits

See also