iOS Accessibility
Lessons We’ve Learned on Building Apps for a Wider Community
Apple has improved user experience, particularly for those with disabilities, by building accessibility features into all of its apps. However, many third-party iOS apps fall short.
The benefits of supporting accessibility in your app far outweigh the extra time spent on it during development.
Making an assistive app broadens your potential user community while making it easier to use.
Continuing our series on accessibility, our developers have some helpful tips for building more inclusive iOS apps.
Make Accessibility Part of the Process
If you’re just getting started with designing and building your app, it’s a good idea to make accessibility an inherent part of the process. This will create consistency and save you time in the long run.
“Adding accessibility properties to standard views is a bit like adding localized strings to your app: If you do it up front and systematically it’s painless. Otherwise, it’s a killer,” says Staff Developer Michael Gachet.
Apple’s Accessibility Programming Guide has clear guidelines for what to include in your accessibility labels. Each label should begin with a capitalized word, briefly describe the element, and be localized. Make sure the label does not include the type of control or view, since that information is already in the traits attribute of the element.
Give Hints When Necessary
Since accessibility labels are succinct, there may still be more information you’d like to give the user to help them understand how to interact with elements. This is where hint attributes are helpful.
“accessbilityHints provide the user with an idea of what types of actions an element can take,” says Senior Developer Kellen Styler. “A user will hear this notification, if set, after an element’s accessibility label has been voiced.”
For example, when VoiceOver reads a Play button in a music app, it should be obvious that the button will play a song. But, if the user has to tap a song title to play the song, you should provide that information in a hint.
Like with accessibility labels, Apple provides guidelines for how to set up your hints to be the most helpful to the user.
Be Mindful of Element Order
The order of elements should be set in a way that makes sense when VoiceOver reads them aloud. VoiceOver will automatically read elements from left to right and top to bottom, but this order may not always make sense to the user.
Sometimes you need to manually set the order of accessibility elements for a particular screen, says Styler. For instance, if you want a description read before an action item like a button, you can use accessiblityElements to direct VoiceOver to read the description first.
Commas Create Coherency
Anyone who’s used VoiceOver has probably encountered accessibility labels that sound incoherent. When VoiceOver reads a long string of text containing multiple phrases, it may sound like one long word. This is where placing commas in accessibility labels can make a big difference.
“Make sure that when you’re creating accessibility labels you use commas to break up long strings of text. That way VoiceOver will read more like a human and add pauses between strings of text where needed,” says Styler.
Aggregate Items for Better UX
If your UI has a table view with cells containing multiple items or has several bits of information in each row, you can make the user’s experience better by grouping your accessibility items.
“For example, if you’re using VoiceOver while swiping through a table or collection view, set the whole cell element as an accessibilityElement and give it an accessibilityLabel for the content,” says Styler. “This will decrease the amount of swiping through elements on the screen and make that process a bit less cumbersome.”
For a closer look at how to do this, read our tutorial on grouping accessibility items in complex views and making VoiceOver sound more human.
Add Helpful Alternative Text to Images
If you have images or other graphics on the screen, don’t forget to add accessibility labels with alternative text. Otherwise, VoiceOver will read them only as “image,” which isn’t helpful to the user.
The alternative text should tell the user what’s happening in the image. If they’re graphical elements, add descriptions that convey the meaning of those elements. For example, if you have a telephone icon next to a phone number and fax machine icon next to a fax number, describing these icons will help the user understand the difference between the two numbers.
“It’s also very important to set the accessibility type with the accessiblityTraits property, so that the user can learn if it’s a button, media item, or an image,” says Styler.
Large Containers Help
“The typical way to navigate between fields is to swipe left or right and that’s what developers normally think about,” says Senior Software Developer Sam Corder. “Blind users often ‘browse’ a screen by running their fingers around the screen to discover everything that’s on it without swiping through every control.”
Accessibility information becomes easy to miss when it’s contained in a small view. To help blind or vision-impaired users find the information easily, consider moving it from a small view to its larger container.
Test Your App’s Accessibility
Whether you’re checking accessibility functionality during the development process or you’d like to assess your existing iOS app’s accessibility, we recommend testing with VoiceOver on the device. Navigating your app with VoiceOver turned on will help you understand the experience of the person using the app and uncover any issues.
Since the iOS Simulator doesn’t fully support VoiceOver, Corder and Styler warn against using the iOS Simulator for testing. “When testing with VoiceOver, the Simulator can only show what text tags are available. The actual navigation between text tags cannot be tested,” says Corder.
However, if you find any UIAccessibility issues in your app while testing on the device, the Accessibility Inspector located in the iOS Simulator will be helpful for debugging.
Building immersive apps for users should always include those with disabilities. The tips included here are just a handful of ways that you can make your app more accessible. Use them to start integrating accessibility practices into your own development.
Follow along on Twitter as we continue sharing insights and resources for creating accessible digital products.
For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.
Black Pixel is a creative digital products agency. Learn more at blackpixel.com.
