Skip to content

A collection of SwiftUI view modifiers to help make your apps more accessible.

License

Notifications You must be signed in to change notification settings

drewalth/accessible-ui

Repository files navigation

AccessibleUI

A Swift package providing a set of pre-configured ViewModifiers to make adding accessibility features to your SwiftUI views a bit easier.

hero image

Swift Platforms Swift Package Manager

🚀 Getting Started

Add the following to your Package.swift file:

dependencies: [
  .package(url: "https://github.com/drewalth/accessible-ui.git", from: "1.0.0"),
]

Or, add the package to your Xcode project by going to File > Add Packages and pasting the URL: https://github.com/drewalth/accessible-ui.git.

Usage

Here’s a quick look at how AccessibleUI simplifies common SwiftUI accessibility patterns:

import SwiftUI
import AccessibleUI

struct ContentView: View {
    @State private var sliderValue: Double = 50
    @State private var isSwitchOn: Bool = false
    @State private var stepperValue: Int = 2
    @State private var selectedSegment: Int = 0
    
    var body: some View {
        VStack(spacing: 20) {
            // Accessible button
            Button(action: {
                print("Button pressed")
            }) {
                Text("Press Me")
            }
            .accessibleButton(label: "Press Me", hint: "Activates a simple action")
            
            // Accessible image
            Image(systemName: "star.fill")
                .accessibleImage(label: "A filled star")
            
            // Accessible slider
            Slider(value: $sliderValue, in: 0...100)
                .accessibleSlider(label: "Brightness", value: $sliderValue, minValue: 0, maxValue: 100, hint: "Slide to adjust brightness level")
            
            // Accessible toggle
            Toggle("Switch", isOn: $isSwitchOn)
                .accessibleToggle(label: "Toggle Switch", isOn: $isSwitchOn)
            
            // Accessible stepper
            Stepper("Value: \(stepperValue)", value: $stepperValue, in: 0...10)
                .accessibleStepper(label: "Select value", value: $stepperValue, range: 0...10)
            
            // Accessible segmented control
            Picker("Options", selection: $selectedSegment) {
                Text("Option 1").tag(0)
                Text("Option 2").tag(1)
            }
            .pickerStyle(SegmentedPickerStyle())
            .accessibleSegmentedControl(label: "Choose option", selectedSegment: $selectedSegment, segments: ["Option 1", "Option 2"])
        }
        .padding()
    }
}