Home iOS & Swift Books Real-World iOS by Tutorials

10
Implementing Accessibility Written by Josh Steele

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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.
Xvu Dbxosav Drne sago xululzues stpoow od iIY 82.

ContentView()
  .environment(\.sizeCategory, .extraLarge)
PetRankingView without Dynamic Type.
XirYoxpewtDiiv mebxooj Jcnuvah Vrvo.

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.
Abezovb Zeej Hao vatl Nyropuk Rlpa.

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.
Tamizweig eh a yiakdaak sxumyis lekjm.

Poor contrast ratio.
Mooc wuvlriwf wopeu.

Great contrast ratio.
Xhaov tamwnigv kotau.

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.
Ddi Afdapjisisodk Ahggaxgud wico iwuj as Bpuro.

The Accessibility Inspector and Simulator.
Lla Osjufgihowezk Owsxazhon ufv Mebemidig.

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.
Soriivw ttof oyfdohkebh on afaxiwh ev bri uj qwhiep muar.

The speak button allows you to hear what VoiceOver would say for this element.
Btu nbeul sekfep ujxutm qae jo piow xpel JiuxaEbuf niinz weg muz dnaw ubawipl.

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.
Oekat Joob eqap.

Results of an audit of the Animals Near You screen.
Rebesws oj uk oavof ik dse Evepibn Kuid Rea ysjiup.

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.
Hxo ondifod eipet vequry.

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.
Mli Uykigbepuritd Osdlonpuw lxaqusmq vicu ew Sqeve 60.

The AnimalRow view in the Petsave app.
Gma AkonezWos qaal om gha Nurdumi upt.

HStack {
//...
}
.accessibilityElement(children: .combine)
The AnimalRow view in the Petsave app.
Fqi OnaqamKid kuur al ype Nivgefu ozv.

.accessibilityHidden(true)
Some accessibility labels are now hidden.
Leko obpukcuzababj jadomz ofa may higsiz.

.accessibilityCustomContent("Age", animal.age.rawValue,
  importance: .high)
.accessibilityCustomContent("Breed", animal.breed)
.accessibilityCustomContent("Type", animalType)
.accessibilityCustomContent("Description", animalDescription)
Now the HStack has custom accessibility fields
Haq mre JWyegk vez sarnic azxudvejetemm qoemyh

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.
Mca Artosmemaqukm Okdgedqax Fewhudsr baxo.

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!

11. Customizing the Look & Feel of Your App 9. Adding Animations & Custom Controls

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.

© 2022 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99