#uiaccessibility

[sensorydiversity]

Letter to Apple from Shaylynn Hayes-Raymond: Urgent Accessibility Concerns Regarding Spinning Cursors and Motion-Based UI Elements in Apple Operating Systems

Letter to Apple from Shaylynn Hayes-Raymond: Urgent Accessibility Concerns Regarding Spinning Cursors and Motion-Based UI Elements in Apple Operating Systems

[qualitytesting]

Close Your Eyes and Use Your iPhone

I find the science of visual design very interesting. Using colour consistently to subliminaly imply how to interact with something, keeping your style consistent, deciding what sits above the fold... These are tasks that fascinate me, and coming across a product that is truly well-designed is so satisfying. But what if you're blind?

Not all users have the ability to actually see what's on their screens, but does that mean that they don't or can't appreciate this art? On iOS, at least, the answer to that question lies with the developer.

Try It Out

Does your app still pass all the tests when the user is blind? Could a blind person feasibly complete the primary workflow of your app? Is your app even usable for a blind person?

The best way to get a handle on what sort of experience a visually impaired person is getting from your app is to try using it as they would. I think this is a really fascinating experience, and I'd recommend that everyone give it a go!

Activate VoiceOver

Go to your iPhone or iPad's Settings app, and under General > Accessibility > VoiceOver, turn the VoiceOver switch on. Siri will start speaking, describing what's on the screen.

Just underneath the VoiceOver switch are some instructions on how to interact with your iPhone in this mode:

Tap once to select an item

Double-tap to activate the selected item

Swipe three fingers to scroll

Take in this new way of interacting by using the VoiceOver Practice button which appears when you turn VoiceOver on. Touch the button to select it, and then double-tap the screen (anywhere) to activate the button.

Adjust the Speaking Rate

Back on the VoiceOver Settings menu, you can adjust the rate at which Siri speaks if you find the default rate too fast or slow. To adjust the speaking rate, put your finger over the slider to select it. Siri will tell you the slider's current position and explain that you can adjust the slider's position up or down by swiping up or down with one finger.

Further down the menu, there are lots of other settings that you can fiddle with. To scroll down the screen, swipe up with three fingers.

Give Yourself A Failsafe

If you're not used to being blind, this mode can become very disorienting. To give yourself an easy way out, go back to the Accessibility Settings menu and go to the item at the bottom - Accessibility Shortcut. Make sure you have VoiceOver checked. Now, when you triple-tap the home button, VoiceOver will deactivate and you can go back to using your device as usual.

Turn On the Screen Curtain

It's time to take the plunge. Effectively blind yourself by doing a triple three-finger tap. Yep, three fingers and three taps. The screen will turn off, but you can continue to interact with the phone. This is great for battery life.

Now What?

Start exploring. How would you usually do that? First things first, leave the Settings app behind. The home button still works as it did before, so go back to the home screen and think about which app you want to try out.

Move your finger across the screen to see what's there. Three-finger swipe to move across home screens, and double-tap to open an app.

Sort It Out

A good app will delight the typical user. A great app will delight the typical user and beyond. The work required to extend your iOS app's carefully-cultivated design to your blind or partially sighted users is almost trivial.

On iOS, a lot of the UI elements you use to build your application will have standard accessibilty configurations without you having to do anything. Text labels will be automatically read to the user. Buttons will automatically announce themselves as buttons, implying that they can be pressed. But you can make a big difference by adding a little extra care and attention.

Standard UIKit views and controls implement the UIAccessibility protocol. On objects which conform to this protocol, you can set various properties to make sure your interfact is described well to your VoiceOver users.

Explain Things

The out-of-the-box description of some elements might not be sufficient for VoiceOver users to understand certain features of your UI, or how they can use them.

If you've got a button in your app which is just an image (no text), the description that VoiceOver users get might just be, "Button." If this button is a 'New Message' button, it would be more helpful to have the VoiceOver description say, "New Message. Button. Double-tap to compose a new message."

You can use the following three APIs on your button during its construction to achieve this description:

newMessageButton.accessibilityLabel = "New Message" newMessageButton.accessibilityTraits = UIAccessibilityTraitButton newMessageButton.accessibilityHint = "Double-tap to compose a new message"

Hard-coded, unlocalised strings for illustration purposes only, of course.

Reveal Things

There are some UI elements which aren't accessible by default. You might think that blind users won't have any appreciation for images, so you should turn accessibility off for them, but even if they're not going to see the image, it's nice for them to know that it's there.

Images often account for a large portion of screen real-estate, and it's good for VoiceOver users to know that that space is taken up by an image, rather than having to wonder whether it's blank space, or whether there's something there that they're not being made aware of.

let description = "A cat playing with a ball" catImage.isAccessibilityElement = true catImage.accessibilityTraits = UIAccessibilityTraitImage catImage.accessibilityLabel = description

Hide Things

Not everything is going to be relevant to a VoiceOver user. Avoid having everything on the screen show up as a discrete accessibility element if it's something that's better explained another way.

For example, collection or table view cells often contain a myriad of sub-views. In a messaging app, you might have a message cell with a small indicator image on it, showing that the message hasn't been read. In this situation, it's easier for the user to receive that information when they select the cell, rather than have to find it (or not find it, as the case may be) by searching around the screen for the hitbox of a tiny image. In this case, you'd want to turn accessibility off for the image and indicate that the message is unread on the cell's accessibility label.

UI Automation

If you have automated UI tests for your app, you're probably already familiar with some of the accessibility APIs. For best practice, especially if your app is localised, you should be setting accessibility identifiers for your automated tests to use - not accessibility labels. Accessibility labels should make sense to a user, and should change as part of your app's localisation. Accessibility identifiers aren't visible to the user, so you can set these to be something which doesn't change between different localisations, enabling your automated tests to run equally successfully in all localisations. The identifier doesn't have to be human-readable either, if that's what you want.

My personal preference for identifiers is the name of the UI element and its type, in camelCase:

newMessageButton.accessibilityIdentifier = "newMessageButton"

Further Information

First off, something I read before writing this post, and which was also just generally good to know: The Courtesy Rules of Blindness from blind.net.

Apple have a bunch of great resources for helping you get to grips with accessibility on iOS.

iOS Accessibility sessions from WWDC:

2014: Making a dating app accessible - a really inspiring session which shows how to welcome Accessibility users to an app with open arms, and give them more opportunities to meet others and build new relationships.

2015: Adding Accessibility support to an earthquake tracking app - a session showing how to use Accessibility APIs in iOS 9 to allow users to engage with specialist apps with custom behaviour.

VoiceOver User Introduction

Understanding Accessibility on iOS

UIAccessibility Protocol Reference