Accessibility refinements

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

​accessibilityHint

​accessibilityRepresentation

​accessibilityAddTraits

​See also

accessibilityHint

accessibilityRepresentation

accessibilityAddTraits

See also