iOS Accessibility Champion

Complete accessibility infrastructure for building inclusive iOS applications that work for everyone.

When to Use This Skill

Use this skill when:

• Adding accessibility support to iOS views and components
• Auditing apps for accessibility compliance
• Implementing VoiceOver support
• Adding Dynamic Type support
• Checking color contrast for WCAG compliance
• Building accessible forms and multi-step flows
• Ensuring keyboard navigation works properly
• Preparing for App Store accessibility requirements
• Making financial data accessible to screen readers

What This Skill Provides

1. Accessibility Audit Infrastructure

• AccessibilityAuditor - Comprehensive audit coordinator
• VoiceOverAuditor - VoiceOver compliance checks
• ColorContrastAuditor - WCAG color contrast validation
• DynamicTypeAuditor - Dynamic Type support verification
• KeyboardNavigationAuditor - Keyboard accessibility validation

2. Accessible Components

• AccessibleButton - Buttons with proper labels, hints, and traits
• AccessibleTextField - Form fields with VoiceOver support
• AccessibleLabel - Semantic labels for all content types
• AccessibleCard - Accessible container components
• AccessibleList - Lists with proper navigation

3. Helper Utilities

• VoiceOverLabelGenerator - Generate proper labels for common patterns
• ColorContrastChecker - Check and validate color contrast
• DynamicTypeHelper - Scale values for Dynamic Type
• FocusHelper - Manage keyboard focus

Quick Start

Generate Accessibility Audit Infrastructure

python scripts/generate_accessibility_audit.py

This generates:

• AccessibilityAuditor.swift (281 lines)
• VoiceOverAuditor.swift (153 lines)
• ColorContrastAuditor.swift (168 lines)
• DynamicTypeAuditor.swift (143 lines)
• KeyboardNavigationAuditor.swift (143 lines)

Total: 888 lines of audit infrastructure

Generate Accessible Components

python scripts/generate_accessible_components.py

This generates:

• AccessibleButton.swift (145 lines)
• AccessibleTextField.swift (183 lines)
• AccessibleLabel.swift (150 lines)
• AccessibleCard.swift (173 lines)
• AccessibleList.swift (148 lines)
• AccessibilityExtensions.swift (71 lines)

Total: 799 lines of accessible components

Combined Output

Running both scripts generates 1,687 lines of production-ready accessibility infrastructure.

Usage Patterns

Running an Accessibility Audit

import SwiftUI

struct ContentView: View {
    @StateObject private var auditor = AccessibilityAuditor()
    
    var body: some View {
        VStack {
            MyAppContent()
            
            Button("Run Accessibility Audit") {
                Task {
                    let result = await auditor.runAudit(on: MyAppContent())
                    // Handle results
                }
            }
        }
        .sheet(item: $auditor.lastAuditResult) { result in
            AccessibilityAuditResultView(result: result)
        }
    }
}

Using Accessible Components

import SwiftUI

struct LoginForm: View {
    @State private var email = ""
    @State private var password = ""
    
    var body: some View {
        VStack(spacing: 16) {
            // Accessible text field with proper labeling
            AccessibleTextField(
                label: "Email",
                text: $email,
                placeholder: "Enter your email",
                hint: "Your email address for login",
                isRequired: true,
                keyboardType: .emailAddress,
                textContentType: .emailAddress
            )
            
            // Secure field for password
            AccessibleTextField(
                label: "Password",
                text: $password,
                placeholder: "Enter password",
                hint: "Your account password",
                isRequired: true,
                isSecure: true,
                textContentType: .password
            )
            
            // Accessible button
            AccessibleButton(
                title: "Sign In",
                action: signIn,
                icon: "arrow.right.circle.fill",
                hint: "Sign in to your account"
            )
        }
        .padding()
    }
    
    func signIn() {
        // Sign in logic
    }
}

Checking Color Contrast

import SwiftUI

struct ColoredText: View {
    var body: some View {
        Text("Important Message")
            .foregroundColor(.blue)
            .background(Color.white)
            .checkColorContrast(
                foreground: .blue,
                background: .white,
                level: .aa,
                isLargeText: false
            )
    }
}

Supporting Dynamic Type

import SwiftUI

struct ScalableView: View {
    @ScaledMetric var spacing: CGFloat = 16
    @ScaledMetric var iconSize: CGFloat = 24
    
    var body: some View {
        HStack(spacing: spacing) {
            Image(systemName: "star.fill")
                .font(.system(size: iconSize))
            Text("Content")
                .font(.body)  // Automatically scales
        }
    }
}

Managing Keyboard Focus

import SwiftUI

struct FocusableForm: View {
    @FocusState private var focusedField: Field?
    
    enum Field: Hashable {
        case firstName
        case lastName
        case email
    }
    
    @State private var firstName = ""
    @State private var lastName = ""
    @State private var email = ""
    
    var body: some View {
        VStack(spacing: 16) {
            TextField("First Name", text: $firstName)
                .focused($focusedField, equals: .firstName)
                .focusAccessibility(
                    identifier: .firstName,
                    focusedField: $focusedField,
                    fields: [.firstName, .lastName, .email]
                )
            
            TextField("Last Name", text: $lastName)
                .focused($focusedField, equals: .lastName)
                .focusAccessibility(
                    identifier: .lastName,
                    focusedField: $focusedField,
                    fields: [.firstName, .lastName, .email]
                )
            
            TextField("Email", text: $email)
                .focused($focusedField, equals: .email)
                .focusAccessibility(
                    identifier: .email,
                    focusedField: $focusedField,
                    fields: [.firstName, .lastName, .email]
                )
        }
        .onAppear {
            focusedField = .firstName
        }
    }
}

Integration with Other Skills

With SwiftUI Component Library (Skill #7)

Enhance existing components with accessibility:

// Add accessibility to currency input
CurrencyInputField(value: $amount)
    .accessibilityLabel("Loan amount")
    .accessibilityHint("Enter the loan amount in dollars")
    .accessibilityValue(formatCurrency(amount))

// Add accessibility to percentage input
PercentageInputField(value: $rate)
    .accessibilityLabel("Interest rate")
    .accessibilityHint("Enter the annual interest rate")
    .accessibilityValue("\\(rate) percent")

With iOS Form Builder (Skill #11)

Make multi-step forms fully accessible:

// Add VoiceOver support to form steps
FormCoordinatorView(
    coordinator: formCoordinator,
    onComplete: handleCompletion
)
.accessibilityLabel("Loan application, step \\(coordinator.currentStepIndex + 1) of \\(coordinator.steps.count)")
.accessibilityHint("Complete this step to continue")

// Accessible form fields
TextFormField(label: "Property Address", text: $address)
    .accessibilityLabel("Property address, required")
    .accessibilityHint("Enter the full address of the property")

With Financial Calculator (Skill #9)

Make financial data accessible:

// Accessible currency display
AccessibleCurrencyLabel(
    amount: monthlyPayment,
    label: "Monthly Payment"
)

// Accessible percentage display
AccessiblePercentageLabel(
    value: interestRate,
    label: "Interest Rate"
)

// Accessible chart description
Chart(amortizationData) { entry in
    BarMark(x: .value("Year", entry.year), y: .value("Balance", entry.balance))
}
.accessibilityLabel("Loan balance over time")
.accessibilityValue("Shows how your loan balance decreases each year")

With PDF Generation (Skill #5)

Ensure exported PDFs are accessible:

// Generate accessible PDF with proper structure
let pdf = generatePDF()
pdf.accessibilityLabel = "Loan Application Report"
pdf.accessibilityStructure = .document

Reference Documentation

For detailed patterns and guidelines, refer to:

Accessibility Patterns (references/accessibility_patterns.md)

Comprehensive patterns including:

• VoiceOver label patterns
• Dynamic Type implementation
• Color contrast patterns
• Keyboard navigation
• List and navigation patterns
• Chart accessibility
• Best practices

When to read: When implementing accessibility for specific UI patterns or components.

WCAG Guidelines (references/wcag_guidelines.md)

iOS-specific WCAG 2.1 compliance guide including:

• WCAG Level A, AA, AAA requirements
• Success criteria for iOS
• Implementation examples
• Testing checklists
• Common failures and fixes

When to read: When ensuring WCAG compliance or preparing for App Store submission.

Best Practices

1. Start with Semantic Components

Use the accessible components provided by this skill rather than building from scratch.

2. Test Early and Often

• Enable VoiceOver: Settings > Accessibility > VoiceOver
• Test with largest Dynamic Type size
• Check color contrast in both light and dark modes
• Test with external keyboard

3. Provide Meaningful Labels

// ❌ Bad
Button("Submit") { }

// ✅ Good
Button("Submit Application") { }
    .accessibilityLabel("Submit loan application")
    .accessibilityHint("Submits your application for review")

4. Group Related Content

// ❌ Bad - Each element read separately
HStack {
    Image(systemName: "star.fill")
    Text("4.5")
    Text("Rating")
}

// ✅ Good - Combined into single element
HStack {
    Image(systemName: "star.fill")
    Text("4.5")
    Text("Rating")
}
.accessibilityElement(children: .combine)
.accessibilityLabel("Rating: 4.5 stars")

5. Support Dynamic Type

// ❌ Bad - Fixed size
Text("Content").font(.system(size: 16))

// ✅ Good - Scalable
Text("Content").font(.body)

6. Use Proper Traits

// Buttons
.accessibilityAddTraits(.isButton)

// Headers
.accessibilityAddTraits(.isHeader)

// Selected items
.accessibilityAddTraits(.isSelected)

7. Handle States

Toggle("Notifications", isOn: $enabled)
    .accessibilityLabel("Notifications")
    .accessibilityValue(enabled ? "Enabled" : "Disabled")

8. Provide Error Context

if let error = validationError {
    Label(error, systemImage: "exclamationmark.circle.fill")
        .foregroundColor(.red)
        .accessibilityLabel("Error: \\(error)")
}

9. Make Loading States Clear

if isLoading {
    ProgressView()
        .accessibilityLabel("Loading loan details")
}

10. Use Semantic Colors

// Automatically adapts to light/dark mode
Text("Content")
    .foregroundColor(.primary)
    .background(Color(.systemBackground))

Common Use Cases

Making a Form Accessible

struct AccessibleLoanForm: View {
    @State private var loanAmount = ""
    @State private var interestRate = ""
    @FocusState private var focusedField: Field?
    
    enum Field: Hashable {
        case amount, rate
    }
    
    var body: some View {
        Form {
            Section {
                AccessibleTextField(
                    label: "Loan Amount",
                    text: $loanAmount,
                    placeholder: "$0",
                    hint: "Enter the amount you want to borrow",
                    isRequired: true,
                    keyboardType: .decimalPad
                )
                
                AccessibleTextField(
                    label: "Interest Rate",
                    text: $interestRate,
                    placeholder: "0%",
                    hint: "Enter the annual interest rate",
                    isRequired: true,
                    keyboardType: .decimalPad
                )
            } header: {
                AccessibleSectionHeader(
                    title: "Loan Details",
                    subtitle: "Enter your loan information"
                )
            }
            
            Section {
                AccessibleButton(
                    title: "Calculate Payment",
                    action: calculatePayment,
                    icon: "dollarsign.circle.fill",
                    hint: "Calculates your monthly payment"
                )
            }
        }
        .navigationTitle("Loan Calculator")
    }
    
    func calculatePayment() {
        // Calculation logic
    }
}

Making a List Accessible

struct AccessibleCalculationHistoryList: View {
    let calculations: [Calculation]
    
    var body: some View {
        List {
            ForEach(calculations) { calc in
                AccessibleListRow(
                    label: "\\(calc.title), \\(calc.date)",
                    hint: "View calculation details",
                    action: { viewDetails(calc) }
                ) {
                    VStack(alignment: .leading, spacing: 8) {
                        Text(calc.title)
                            .font(.headline)
                        
                        AccessibleCurrencyLabel(
                            amount: calc.amount,
                            label: "Amount"
                        )
                        
                        AccessibleDateLabel(
                            date: calc.date,
                            label: "Date"
                        )
                    }
                }
            }
            .onDelete(perform: deleteCalculations)
        }
        .navigationTitle("History")
    }
    
    func viewDetails(_ calc: Calculation) { }
    func deleteCalculations(at offsets: IndexSet) { }
}

Making Charts Accessible

struct AccessibleLoanChart: View {
    let amortizationData: [AmortizationEntry]
    
    var body: some View {
        Chart(amortizationData) { entry in
            BarMark(
                x: .value("Year", entry.year),
                y: .value("Balance", entry.balance)
            )
        }
        .accessibilityLabel("Loan balance over time")
        .accessibilityValue(chartDescription)
    }
    
    private var chartDescription: String {
        let years = amortizationData.count
        let startBalance = amortizationData.first?.balance ?? 0
        let endBalance = amortizationData.last?.balance ?? 0
        
        return """
        Chart showing loan balance decreasing from \
        \\(formatCurrency(startBalance)) to \
        \\(formatCurrency(endBalance)) over \\(years) years
        """
    }
}

Testing Checklist

Before releasing your app, verify:

VoiceOver Testing

• All buttons have clear labels
• Form fields have labels and hints
• Images have descriptive labels
• Navigation is logical
• State changes are announced
• Error messages are accessible

Dynamic Type Testing

• Text scales at largest size
• Layouts adapt properly
• No text truncation
• Buttons remain tappable
• Navigation remains functional

Color Contrast Testing

• Text meets 4.5:1 ratio
• Large text meets 3.0:1 ratio
• Buttons have sufficient contrast
• Works in dark mode
• Icons are visible

Keyboard Navigation Testing

• Tab order is logical
• Focus indicators are visible
• All actions available via keyboard
• No keyboard traps

App Store Requirements

For App Store approval, ensure:

1. All interactive elements are accessible
2. Dynamic Type is supported
3. VoiceOver navigation works
4. Color is not the only indicator
5. Touch targets are at least 44x44 points
6. Forms are properly labeled
7. Errors are clearly communicated

Output

After running the generation scripts, you'll have:

Generated Swift Files (11 files, 1,687 lines)

1. AccessibilityAuditor.swift - Main audit coordinator
2. VoiceOverAuditor.swift - VoiceOver checks
3. ColorContrastAuditor.swift - Color contrast validation
4. DynamicTypeAuditor.swift - Dynamic Type checks
5. KeyboardNavigationAuditor.swift - Keyboard navigation validation
6. AccessibleButton.swift - Accessible button components
7. AccessibleTextField.swift - Accessible text fields
8. AccessibleLabel.swift - Accessible labels
9. AccessibleCard.swift - Accessible containers
10. AccessibleList.swift - Accessible lists
11. AccessibilityExtensions.swift - View extensions

Integration

Copy the generated files to your Xcode project and start using them immediately. All components are production-ready with full documentation.

Summary

This skill provides everything needed to build fully accessible iOS applications:

• ✅ Comprehensive audit infrastructure
• ✅ Pre-built accessible components
• ✅ WCAG compliance guidance
• ✅ VoiceOver optimization
• ✅ Dynamic Type support
• ✅ Color contrast checking
• ✅ Keyboard navigation support
• ✅ Integration with other iOS skills

Use this skill to make your iOS apps accessible to everyone, meet App Store requirements, and provide an excellent experience for all users.