Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

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"])

​
See also