2024 SwiftUI & UI FrameworksAccessibility & Inclusion
WWDC24 · 21 min · SwiftUI & UI Frameworks / Accessibility & Inclusion
Catch up on accessibility in SwiftUI
SwiftUI makes it easy to build amazing experiences that are accessible to everyone. We’ll discover how assistive technologies understand and navigate your app through the rich accessibility elements provided by SwiftUI. We’ll also discuss how you can further customize these experiences by providing more information about your app’s content and interactions by using accessibility modifiers.
Watch at developer.apple.com ↗Chapters
Code shown on screen · 7 snippets
Accessibility Label Modifier & Opacity
struct UnreadIndicatorView: View {
var isUnread: Bool
var body: some View {
Circle()
.foregroundStyle(.blue)
.accessibilityLabel("Unread")
.opacity(isUnread ? 1 : 0)
}
}Accessibility Element Children Combine Modifier
var body: some View {
HStack {
UnreadIndicatorView(isUnread: message.isUnread)
MessageContentsView(message: message)
Spacer()
Button(action: favorite) { favoriteLabel }
Button(action: reply) { replyLabel }
}
.accessibilityElement(children: .combine)
}Accessibility Conditional Modifiers
var body: some View {
Button(action: favorite) {
Image(systemName: isSuperFavorite ? "sparkles" : "star.fill")
}
.accessibilityLabel("Super Favorite", isEnabled: isSuperFavorite)
}Accessibility Actions Modifier
var body: some View {
TripView(trip: trip)
.onHover { showAttachments = $0 }
.overlay {
MessageAttachments(attachments: trip.attachments)
.opacity(showAttachments ? 1 : 0)
}
.accessibilityActions {
MessageAttachments(attachments: trip.attachments)
}
}Accessibility Label Modifier
var body: some View {
TripView(trip: trip)
.accessibilityLabel { label in
if let rating = trip.rating {
Text(rating)
}
label
}
}Accessibility Drop Point Modifier
var body: some View {
CommentAlertView(contact: contact)
.onDrop(of: [.audio], delegate: delegate)
.accessibilityDropPoint(.leading, description: "Set Sound 1")
.accessibilityDropPoint(.center, description: "Set Sound 2")
.accessibilityDropPoint(.trailing, description: "Set Sound 3")
}Accessibility App Intent Action Modifier
var body: some View {
ForEach(beaches) { beach in
BeachView(beach)
.accessibilityAction(
named: "Favorite",
intent: ToggleRatingIntent(beach: beach, rating: .fullStar))
.accessibilityAction(
.magicTap,
intent: ComposeIntent(type: .photo))
}
}