How it works
AccessibilityActionCategory groups a set of related accessibility actions under a single named heading, so assistive technologies such as VoiceOver can present them together rather than as a flat, undifferentiated list. When an element exposes several custom actions, a category gives the user a labeled context for choosing among them. Reach for AccessibilityActionCategory when you attach a block of custom actions to an element and want them announced as a coherent, titled set.
Create a category with AccessibilityActionCategory(_:)
The structure's initializer takes a label string that names the group of actions. Here
AccessibilityActionCategory("Photo")declares a category titled Photo, which becomes the heading VoiceOver speaks before listing the actions inside it.Pass the category to accessibilityActions(category:_:)
A category does nothing on its own; you supply it to the
accessibilityActionsmodifier through itscategory:parameter. In the example.accessibilityActions(category: AccessibilityActionCategory("Photo"))binds the Photo category to the closure that follows, so every action defined there is filed under that heading.Define the actions in the trailing closure
The closure attached to
accessibilityActionsholds the controls that make up the category. The threeButtonviews here,Share,Favorite, andDelete, become the selectable actions VoiceOver offers once the user opens the Photo group.Anchor the category to one accessibility element
Custom actions attach to a single accessibility element, so the views are first merged with
.accessibilityElement(children: .combine). That fuses theImageandTextinto one element, giving the Photo category a clear owner that the user lands on while navigating.
AccessibilityActionCategory("Photo") to AccessibilityActionCategory("Edit") and listen with VoiceOver: the same three buttons are now announced under the Edit heading instead, showing that the category only relabels how the action group is presented.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct AccessibilityActionCategoryDemo: View {
var body: some View {
VStack(spacing: 12) {
Image(systemName: "photo")
.font(.largeTitle)
Text("Beach Sunset")
.font(.headline)
}
.padding()
.accessibilityElement(children: .combine)
.accessibilityActions(category: AccessibilityActionCategory("Photo")) {
Button("Share") {}
Button("Favorite") {}
Button("Delete", role: .destructive) {}
}
}
}