Chapters
Chapters

Chapters

Hide chapters

Real-World iOS by Tutorials

First Edition · iOS 15 · Swift 5.5 · Xcode 13

Before You Begin

Section 0: 4 chapters
Show chapters Hide chapters

Section I: Designing Real World Apps

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Building App Features

Section 2: 2 chapters
Show chapters Hide chapters

Section III: Modularizing Your App

Section 3: 2 chapters
Show chapters Hide chapters

Section IV: Enhancing the User Interface & Experience

Section 4: 3 chapters
Show chapters Hide chapters

Section V: App Privacy, Maintenance & Deployment

Section 5: 4 chapters
Show chapters Hide chapters

10. Implementing Accessibility
Written by Josh Steele

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the last chapter, you learned two techniques to keep users engaged with your app. Animations help provide timely feedback to the user, and custom controls help immerse your user in the overall theme of your app. Both are part of Apple’s HIG, or Human Interface Guidelines for iOS.

Accessibility is a broader technology that applies to all the Apple operating systems and has a dedicated section under the HIG website.

In this chapter, you’ll learn how the Accessibility technologies in iOS help make implementing those guidelines available to more users.

But what exactly is Accessibility, and why should you use it in your app?

Why design for accessibility?

Here are two statistics that may surprise you:

  1. According to the CDC, one in four adults in the United States has some type of disability.
  2. Current estimates state that one in 12, or 8%, men are color blind.

If that first number surprises you, you’re not alone. Many people have invisible disabilities, such as color blindness.

If you extrapolate that one in four statistic to the entire world, that means there may be many people who have some difficulty using your app.

When you use Accessibility technologies, your app:

  1. Becomes more accessible: This one may seem obvious since it’s right there in the name. A larger number of people can download and use your app.
  2. May become more appealing: When a user with a disability can use a more significant portion of your app, they may choose your app over another one. Conversely, if your app doesn’t have accessibility features, it may get overlooked by that same set of users.

Luckily, Apple has put a lot of foundational thought into design elements over the years. There were some hits and misses along the way. Users had a mixed reception to skeuomorphism, which made the UI look lifelike. As much anger got thrown at the flat look that came out in response to skeuomorphism.

However, Apple does get many things right, and they provide a great base UI for developers to use. They also describe those in, you guessed it, the Apple HIG.

On top of that foundation, you can use Accessibility technologies to make those elements usable by more people worldwide. Even better, Apple has integrated Accessibility technologies right into many user interface elements. As with other parts of the HIG, Apple suggests using a set of best practices for Accessibility.

Best practices in the Apple Human Interface Guidelines

Each iOS user interface component has its own best practices for design and accessibility. Before learning about those, you should be aware of three overarching principles, as highlighted in the HIG.

Designing for accessibility

Software engineering principles place design early on in the development process. There’s a good reason for this: Design is a direct result of performing requirements gathering. These requirements include analyses that identify models, schemas and even the needs of your user base, all of which you do before any coding takes place.

Supporting adaptability

One of the best things about using Apple’s built-in user interface elements is that you automatically get the accessibility support for those elements. You still have to include detailed information where needed, but the hooks into the overarching Accessibility framework are already there. Better yet, they respond to operating system-wide Accessibility calls, such as Bold Text, and adjust accordingly.

Test, test, test and did we mention test?

Whether you’re just starting out as a developer or on your tenth featured app in the App Store, you’re probably familiar with testing. Xcode has built-in Unit testing and User Interface targets if you ask for them, and Xcode can perform them with automated build systems.

Text

Whatever language you use, your app uses text to convey important information to your users. iOS has two technologies to help you and your user control the appearance of text on screen: Dynamic Type and font weights.

Dynamic Type

In iOS 7, Apple added Dynamic Type to the iOS SDK. Dynamic Type has a few interesting features:

The Dynamic Type size selection screen in iOS 15.
Lke Byduduq Jpmo zaqo cewudxuoh rkwoib uq uIF 81.

ContentView()
  .environment(\.sizeCategory, .extraLarge)
PetRankingView without Dynamic Type.
YuvWumleqmKiug pibseew Jfposet Gxgo.

struct PetRankingView_Previews: PreviewProvider {
  static var previews: some View {
    if let animal = CoreDataHelper.getTestAnimalEntity() {
      Group {
        PetRankingView(animal: animal)
          .padding()
          .previewLayout(.sizeThatFits)
          .environment(\.sizeCategory, .extraSmall)
          .previewDisplayName("Extra-Small")

        PetRankingView(animal: animal)
          .padding()
          .previewLayout(.sizeThatFits)
          .previewDisplayName("Regular")

        PetRankingView(animal: animal)
          .padding()
          .previewLayout(.sizeThatFits)
          .environment(\.sizeCategory, .extraLarge)
          .previewDisplayName("Extra-Large")
      }
    }
  }
}
Animals Near You with Dynamic Type.
Oyirujy Tiom Koa fegj Lrkolug Skga.

Font weights

Your font choice is important when you design your app’s user interface. Fonts that are hard to read make it difficult for everyone to read the text, making your app more difficult to use. Once you choose a font for your app, there are some best practices to keep in mind:

VoiceOver

VoiceOver is a built-in screen reader in iOS. It uses accessibility information stored in on-screen user interface elements to read aloud descriptions of the screen. With it, you can:

Navigation

The user’s ability to navigate through an app’s different screens is essential for any app. Navigation becomes more important when considering accessibility.

Color and contrast

How you use color in your app can convey a great deal of information to your user. In everyday life, you assume certain associations with different colors. For example, red means stop and green means go.

Depiction of a railroad traffic light.
Habitmoed ez a geirxeol dbomgow notwj.

Poor contrast ratio.
Yuoc zurrgixx buwee.

Great contrast ratio.
Wcuok kumgdakx nibia.

Using the Accessibility Inspector

The best way to learn about accessibility features in iOS is to apply them to an app. This starter project contains some accessibility deficiencies that you’ll correct.

The Accessibility Inspector menu item in Xcode.
Ncu Otcofxayupidl Egrkizpok havu iquy en Fpuki.

The Accessibility Inspector and Simulator.
Dji Utcolweheyitt Elqjufsiw eqn Furacawiz.

Inspection tool

Inspection Tool is the default tool when the Accessibility Inspector launches. The crosshair button selects a particular element on screen while the hierarchy at the bottom of the inspector dives deeper into the elements on screen.

Details from inspecting an element in the on screen view.
Xugoewl fbip ejctoxtith al uqavegj ij wgi at fgraej yuip.

The speak button allows you to hear what VoiceOver would say for this element.
Vqi jheib sowliz egfupw jue da muem cvub JuoniIyiz gield dug wiv xqew uyefayy.

Audit tool

You can use the Audit Tool to generate a report of possible Accessibility violations from the user interface elements currently on screen.

Audit Tool icon.
Iudit Viem uhaf.

Results of an audit of the Animals Near You screen.
Foyajlx ex ab uexur ar lke Afusiky Siid Qia zqcuap.

extension Color {
  func darken(_ amount: Double) -> Color {
    let uiColor = UIColor(self)
    var red: CGFloat = 0
    var green: CGFloat = 0
    var blue: CGFloat = 0
    var alpha: CGFloat = 0
    uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
    let darkenedUIColor =
      UIColor(
        red: min(red - amount / 100, 1.0),
        green: min(green - amount / 100, 1.0),
        blue: min(blue - amount / 100, 1.0),
        alpha: 1.0)
    return Color(darkenedUIColor)
  }
}

.foregroundColor(color.darken(40.0))

struct AnimalAttributesCard: ViewModifier {
  let color: Color
  func body(content: Content) -> some View {
    content
      .padding(4)
      .background(color.opacity(0.2))
      .cornerRadius(8)
      .foregroundColor(color.darken(+40))
      .font(.subheadline)
  }
}

Text(title)
  .font(.callout)
  .accessibility(label: Text("The contact information for this pet: " + title))
The updated audit result.
Dya upjimev iesux tazoft.

The Xcode accessibility inspector

It’s time for a quick detour from the Accessibility Inspector app to the similarly named Accessibility Inspector property pane in Xcode:

The Accessibility Inspector property pane in Xcode 13.
Fdu Abjuvconexapb Udpcaylok gjagevnp qece uq Wmija 29.

The AnimalRow view in the Petsave app.
Gso AsuweqZin meis og swa Feyguza awj.

HStack {
//...
}
.accessibilityElement(children: .combine)
The AnimalRow view in the Petsave app.
Lfi UmufoxQap jouz em yxu Wiqfoti irm.

.accessibilityHidden(true)
Some accessibility labels are now hidden.
Zace ertagbehigamh covocg ifo wol geglac.

.accessibilityCustomContent("Age", animal.age.rawValue,
  importance: .high)
.accessibilityCustomContent("Breed", animal.breed)
.accessibilityCustomContent("Type", animalType)
.accessibilityCustomContent("Description", animalDescription)
Now the HStack has custom accessibility fields
Zov ptu ZZkafn lil wewkiq efcichutitufk juondh

Accessibility settings

Once you’ve made corrections from the audit, you still have work ahead. You can’t properly assess some items until you look at them with Accessibility features enabled. The Accessibility Inspector has one more tool to help you, the Settings pane.

The Accessibility Inspector Settings pane.
Kpu Esxaqkijubamg Oppcezbil Sohmuhgl yosa.

Key points

  • Using Accessibility technologies in your app makes your app more accessible to a larger audience.
  • Incorporate accessibility early in the design of your app.
  • Take advantage of the iOS user interface elements’ built-in accessibility features. You can modify text, colors and accessibility labels to convey information to the broadest set of users possible.
  • Testing is vital when working with accessibility technologies. You may not actively use these features in your day-to-day app use. Take advantage of technologies like VoiceOver and Accessibility Inspector to ensure accessibility information is correct.

Where to go from here?

Congratulations, you’ve taken a comprehensive look at accessibility by finishing this chapter. Hopefully, this means Accessibility in iOS is now more accessible to you!

9. Adding Animations & Custom Controls
11. Customizing the Look & Feel of Your App
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now