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 iOS-only modifiers refine how a component is exposed to assistive technologies like VoiceOver. accessibilityHint adds a description of what activating the component will do; accessibilityAddTraits marks a component with semantic traits like header or button; accessibilityRepresentation swaps in an alternative tree for assistive technologies to traverse. Pair these with the cross-platform accessibilityLabel and accessibilityValue modifiers.

​
accessibilityHint

Sets a VoiceOver hint that describes the result of interacting with a component. 
.accessibilityHint(hint: string)
​
hint
string
required
A description of what happens when the user activates the component. VoiceOver reads this after a short pause following the label.
Describe the result of a tap 
Button("Delete", () => removeItem())
    .accessibilityHint("Removes the item from your list")
Combined with a label 
Image({ systemName: "heart.fill" })
    .onTapGesture(() => toggleFavorite())
    .accessibilityLabel("Favorite")
    .accessibilityHint("Adds this item to your favorites")

​
accessibilityRepresentation

Provides an alternative accessibility representation of a component for assistive technologies. 
.accessibilityRepresentation(content: Component)
​
content
Component
required
A component that replaces this component’s accessibility tree. Assistive technologies interact with this representation instead of the original component.
Provide a simpler accessibility view for a complex visual 
ZStack([
    Circle().foregroundStyle(Color("blue")),
    Text("75%").font("caption")
])
    .accessibilityRepresentation(
        Text("Progress: 75 percent")
    )
Replace a custom layout with a descriptive label 
HStack([
    Image({ systemName: "star.fill" }),
    Image({ systemName: "star.fill" }),
    Image({ systemName: "star.fill" }),
    Image({ systemName: "star" }),
    Image({ systemName: "star" })
])
    .accessibilityRepresentation(
        Text("Rating: 3 out of 5 stars")
    )

​
accessibilityAddTraits

Adds accessibility traits to a component for assistive technologies like VoiceOver. 
.accessibilityAddTraits(traits: AccessibilityTraits | AccessibilityTraits[])
​
traits
AccessibilityTraits | AccessibilityTraits[]
required
One or more accessibility traits to add to the component. See AccessibilityTraits.
Mark a view as a button 
Text("Tap me")
    .onTapGesture(() => doSomething())
    .accessibilityAddTraits("isButton")
Mark a view as a header 
Text("Section Title")
    .font("headline")
    .accessibilityAddTraits("isHeader")
Add multiple traits 
Image({ url: "banner.jpg" })
    .resizable()
    .accessibilityAddTraits(["isImage", "isHeader"])

​
See also