SwiftUI - Accessibility

---

---

Accessibility is used to create an app using SwiftUI that is accessible to all users, including users with disabilities, for example, if someone is blind, then he/she can use your app with the help of voice-over. SwiftUI provides built-in accessibility support; it allows the developer to add labels, hints, and actions so that it creates an interface that is easily accessed by all users.

It also provides various tools such as VoiceOver, Switch Control, etc., and modifiers, which makes it easier for developers to create apps that are accessed by even disabled people.

This feature is very easy to use and enhances the user experience for all people. Developers can quickly integrate them into the interface of the app with the help of built-in modifiers. All of Apple's platforms support accessibility, which helps in compliance with accessibility standards and regulations.

Accessibility Labels in SwiftUI

Accessibility labels are used to provide a special descriptive text for the UI components so the user can easily communicate with the elements using VoiceOver. It makes your app much more accessible.

We can create an accessibility label using the .accessibilityLabel(_:) modifier. It provides the accessibility label to the view that does not display text such as icons, images, etc.

Syntax

Following is the syntax −

accessibilityLabel(_ label: Text)

Example

The following SwiftUI program creates an accessibility label.

import SwiftUI

struct ContentView: View {
   var body: some View {
      Image(systemName: "doc.fill").font(.largeTitle)
         .accessibilityLabel("Document")
   }
}   

Accessibility Hints in SwiftUI

Accessibility hints are used to provide extra information about the specified UI component or view. It provides a hint to the user when they read the screen using VoiceOver.

It is useful when the label is not able to provide all the information about the component or view to the user. We can create hints using the accessibilityHint(_:) modifier. This modifier adds more information about the element in the form of hints.

Syntax

Following is the syntax−

accessibilityHint(_ hint: Text)

Example

The following SwiftUI program creates accessibility hints.

import SwiftUI

struct ContentView: View {
   var body: some View {
      Image(systemName: "doc.fill")
         .font(.largeTitle)
         .accessibilityLabel("Document")
         .accessibilityHint("This file contains all the documents")
   }
}   

Accessibility Traits in SwiftUI

Accessibility traits are used to provide additional information about the purpose of the UI component to the user. It indicates whether the given element is interactive or not, or whether it represents some specified content like a button, header, etc. and how it will be handled.

We can create traits using the .accessibilityAddTraits(_:) modifier and can remove traits using .accessibilityRemoveTraits(_:) modifiers. SwiftUI supports various types of traits such as .isButton, .isSelected, .isHeader, .isLink, .isSearchField, .isImage, isModal, isKeyboardKey, isSelected, isSearchField, isToggle, playSound, etc.

Syntax

Following is the syntax −

accessibilityAddTraits(_ traits: AccessibilityTraits)

Example

The following SwiftUI program creates accessibility traits.

import SwiftUI

struct ContentView: View {
   var body: some View {
      Text("SwiftUI")
         .font(.largeTitle)
         .accessibilityAddTraits([.isButton, .isSelected])
         .accessibilityRemoveTraits(.isSelected)
   }
}  

Accessibility Value in SwiftUI

Accessibility value provides additional information about the given element's current state or value. It is useful with UI components like slider, toggle, or steppers. It can work easily with technologies like VoiceOver.

We can create value using the .accessibilityValue(_:) modifier. It allows us to create a value that can easily be read by the VoiceOver.

Syntax

Following is the syntax −

accessibilityValue(_ valueDescription: Text)

Example

The following SwiftUI program creates accessibility value.

import SwiftUI

struct ContentView: View {
   @State private var value: Double = 50 // Initial volume level

   var body: some View {
      VStack {
         Slider(value: $value, in: 0...100)
            .accessibilityLabel("Value")
            .accessibilityValue("\(Int(value)) percent")
            .padding()

         Text("Current Value: \(Int(value))%")
            .padding()
      }
   }
}
#Preview {
   ContentView()
}

Accessibility Actions in SwiftUI

Accessibility actions are used to define actions that are determined by the voiceOver and other assistive technologies so that the person with a disability can ably perform the specified action.

We can create actions using .accessibilityAction(_:) modifier. This modifier creates that are easily read and performed using VoiceOver. These actions are announced by the VoiceOver, and user perform the action by selecting them.

Syntax

Following is the syntax −

accessibilityAction(
   _ actionKind: AccessibilityActionKind,
   _ handler: @escaping () -> Void
) 

Example

The following SwiftUI program creates accessibility action.

import SwiftUI

struct ContentView: View {
   @State private var count = 0

   var body: some View {
      VStack {
         Rectangle()
            .frame(width: 100, height: 100)
            .foregroundStyle(.red)
            .accessibilityLabel("Increment Button")
            .accessibilityAddTraits(.isButton)
            .accessibilityAction(named: "Increment") {
               count += 1
            }
      }
   }
}
#Preview {
   ContentView()
}