Accessibility & VoiceOver

What is VoiceOver?

VoiceOver is Apple screen reader for blind and low-vision users. It reads aloud the content on screen and provides gesture-based navigation.

Accessibility Labels

Every interactive element needs an accessibility label:

// SwiftUI
Image(systemName: "heart.fill")
    .accessibilityLabel("Favorite")

Button(action: addToCart) {
    Image(systemName: "cart")
}
.accessibilityLabel("Add to cart")

// UIKit
addToCartButton.accessibilityLabel = "Add to cart"

Accessibility Hints

Provide context about what an action does:

Button(action: toggleFavorite) {
    Image(systemName: isFavorite ? "heart.fill" : "heart")
}
.accessibilityLabel(isFavorite ? "Remove from favorites" : "Add to favorites")
.accessibilityHint("Double tap to toggle favorite status")

Accessibility Traits

Identify the role of UI elements:

// SwiftUI
Text("Breaking News")
    .accessibilityAddTraits(.isHeader)

TextField("Email", text: $email)
    .accessibilityAddTraits(.isSearchField)

// UIKit
headlineLabel.accessibilityTraits = .header
searchField.accessibilityTraits = .searchField

VoiceOver Navigation

Test navigation flow:

1. Enable VoiceOver in Settings > Accessibility > VoiceOver
2. Swipe right to move to next element
3. Swipe left to move to previous element
4. Double-tap to activate
5. Use rotor (two-finger twist) to navigate by heading, link, etc.

What is Dynamic Type?

Dynamic Type lets users adjust text size across all apps. Your app should respect their preferred text size.

Supporting Dynamic Type in SwiftUI

// SwiftUI automatically supports Dynamic Type with system fonts
Text("Hello World")
    .font(.body)

// Custom fonts should use scaled metrics
Text("Title")
    .font(.custom("MyFont", size: 17).scaledMetric(relativeTo: .body))

Supporting Dynamic Type in UIKit

// Use preferred font
headlineLabel.font = UIFont.preferredFont(forTextStyle: .headline)
headlineLabel.adjustsFontForContentSizeCategory = true

// Custom fonts with scaling
let customFont = UIFont(name: "MyFont", size: 17)!
headlineLabel.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: customFont)

Layout Adaptation

Adjust layouts for larger text sizes:

struct AdaptiveLayout: View {
    @Environment(\.dynamicTypeSize) var typeSize
    
    var body: some View {
        if typeSize >= .accessibility2 {
            // Stack vertically for large text
            VStack {
                imageView
                textContent
            }
        } else {
            // Side by side for normal text
            HStack {
                imageView
                textContent
            }
        }
    }
}

Testing Dynamic Type

1. Enable in Settings > Accessibility > Display and Text Size > Larger Text
2. Use the Xcode Environment preview to test different sizes
3. Test with Accessibility sizes enabled
4. Ensure no text is clipped or overlapping

Xcode Accessibility Inspector

Use the Accessibility Inspector (Xcode > Open Developer Tool) to:

• View the accessibility hierarchy
• Check labels, hints, and traits
• Identify missing accessibility information
• Test VoiceOver focus order

Automated Audit

Run an accessibility audit from Xcode:

1. Select Product > Perform Action > Accessibility Audit
2. Choose All Issues or specific categories
3. Review warnings and errors
4. Fix missing labels, insufficient contrast, etc.

Common Accessibility Issues

• Missing accessibility labels on images and buttons
• Empty accessibility groups
• Insufficient color contrast
• Text that cannot scale with Dynamic Type
• Interactive elements that are too small (minimum 44x44 points)
• Custom controls without accessibility support

Color and Contrast

// Ensure sufficient contrast
Text("Important")
    .foregroundStyle(Color(.label)) // Adapts to light/dark mode

// Avoid using color alone to convey information
HStack {
    Circle().fill(isOnline ? Color.green : Color.red)
    Text(isOnline ? "Online" : "Offline")
}
.accessibilityElement(children: .combine)

Accessibility Testing Checklist

• All images have accessibility labels
• All buttons have descriptive labels
• Dynamic Type is supported
• Color contrast meets WCAG 2.1 AA standards
• No information is conveyed by color alone
• Focus order is logical
• Custom controls expose correct traits
• Tested with VoiceOver enabled
• Tested with large text sizes
• Tested with reduced motion enabled