Zugänglichkeit verbessern

Diese View bietet eine benutzerfreundliche Oberfläche mit Fokus auf Zugänglichkeit für sehbehinderte Personen. Nutzer können Schriftgröße, Farbschema (inklusive Hochkontrast) sowie VoiceOver-Einstellungen individuell anpassen. Ein eingebautes Einstellungs-Panel ermöglicht die direkte Personalisierung nach den eigenen Bedürfnissen.

🔍 Zweck

• Für barrierefreie Apps, die inklusiv gestaltet werden sollen
• In Bildungseinrichtungen für Benutzer mit Sehbeeinträchtigungen
• In öffentlichen Informationssystemen zur besseren Lesbarkeit
• Zum Testen verschiedener Accessibility-Einstellungen im App-Design
• Für ältere Nutzer mit speziellen Anforderungen an Lesbarkeit und Kontrast

📄 Codebeispiel

import SwiftUI

enum AccessibilityFontSize: String, CaseIterable, Identifiable {
    case small = "Small"
    case medium = "Medium"
    case large = "Large"
    case extraLarge = "Extra Large"
    
    var id: String { self.rawValue }
    
    var size: CGFloat {
        switch self {
        case .small:
            return 16
        case .medium:
            return 20
        case .large:
            return 26
        case .extraLarge:
            return 32
        }
    }
}

struct AccessibilitySettings {
    var fontSize: AccessibilityFontSize = .medium
    var highContrast: Bool = false
    var voiceOverEnabled: Bool = false // Simulated toggle; real VoiceOver state is managed by the system
}

struct AccessibleContentView: View {
    @State private var showSettings = false
    @State private var settings = AccessibilitySettings()
    
    private var foregroundColor: Color {
        settings.highContrast ? .black : .primary
    }
    
    private var backgroundColor: Color {
        settings.highContrast ? .yellow : Color(UIColor.systemBackground)
    }
    
    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea()
            
            VStack(spacing: 32) {
                Text("Barrierefreie Benutzeroberfläche")
                    .font(.system(size: settings.fontSize.size, weight: .bold))
                    .foregroundStyle(foregroundColor)
                    .accessibility(addTraits: settings.voiceOverEnabled ? .isHeader : [])
                
                Text("Passen Sie die Anzeige an Ihre Bedürfnisse an. Nutzen Sie große Schrift, hohe Kontraste oder aktivieren Sie eine VoiceOver-freundliche Navigation.")
                    .font(.system(size: settings.fontSize.size))
                    .foregroundStyle(foregroundColor)
                    .accessibilityLabel(settings.voiceOverEnabled ?
                        "Passen Sie die Anzeige an Ihre Bedürfnisse an. Nutzen Sie große Schrift, hohe Kontraste oder aktivieren Sie eine VoiceOver-freundliche Navigation." : "")
                    .accessibility(addTraits: settings.voiceOverEnabled ? [.isStaticText] : [])
                
                Button(action: {
                    showSettings.toggle()
                }) {
                    Label("Einstellungen", systemImage: "gearshape")
                        .font(.system(size: settings.fontSize.size))
                        .padding()
                        .background(settings.highContrast ? Color.black : Color.accentColor)
                        .foregroundStyle(settings.highContrast ? Color.yellow : Color.white)
                        .clipShape(Capsule())
                }
                .accessibilityLabel("Einstellungen öffnen")
                .accessibilityHint("Hier können Sie die Barrierefreiheits-Einstellungen anpassen.")
            }
            .padding()
        }
        // Settings panel sheet
        .sheet(isPresented: $showSettings) {
            AccessibilitySettingsPanel(settings: $settings)
        }
    }
}

struct AccessibilitySettingsPanel: View {
    @Binding var settings: AccessibilitySettings
    
    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Schriftgröße")) {
                    Picker("Schriftgröße", selection: $settings.fontSize) {
                        ForEach(AccessibilityFontSize.allCases) { size in
                            Text(size.rawValue).tag(size)
                        }
                    }
                    .pickerStyle(.inline)
                }
                
                Section(header: Text("Farbschema")) {
                    Toggle(isOn: $settings.highContrast) {
                        Label("Hoher Kontrast", systemImage: "circle.lefthalf.filled")
                    }
                }
                
                Section(header: Text("VoiceOver")) {
                    Toggle(isOn: $settings.voiceOverEnabled) {
                        Label("VoiceOver-Modus simulieren", systemImage: "ear")
                    }
                    Text("Aktiviert zusätzliche Sprachhinweise und verbessert die Bedienung mit Screenreadern.")
                        .font(.footnote)
                        .foregroundStyle(.secondary)
                }
            }
            .navigationTitle("Einstellungen")
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Fertig") { UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to:nil, from:nil, for:nil) }
                }
            }
        }
    }
}

#Preview {
    AccessibleContentView()
}