Enabling VoiceOver
The VoiceOver screen-reading tool included with iOS helps users interact with software without the need to see the screen. It’s specifically designed for those with vision problems.
VoiceOver is the link between the UI and the user’s touch input, and provides audible descriptions of different UI components and audible feedback on actions taken in the app.
To start using VoiceOver, first open the Settings app and navigate to General\Accessibility\Accessibility Shortcut. There, ensure the VoiceOver cell is selected.
This creates a shortcut so you can triple-click the home button on a physical device to toggle VoiceOver on and off. Imagine the time you’d waste toggling this setting without the shortcut!
There are many different accessibility features including VoiceOver, Invert Colors, Color Filters, Reduce White Point, Zoom, Switch Control and a lot more. You will only be focusing on VoiceOver in this iOS accessibility tutorial.
How to use
Below is a summary of some of the more common gestures:
- Single tap anywhere on the screen and VoiceOver will speak identifying information from the item’s accessibility attributes — more on this shortly.
- Single swipe left or right and VoiceOver will navigate through visible accessibility items while reading them out loud. Right swipes move forward and down, while left swipes do the opposite.
- Single swipe down to spell out the focused item letter-by-letter.
- Double tap to select the item with focus.
- Three finger swipe left or right to navigate forwards or backwards in a page view.
Accessibility Attributes
Accessibility attributes are the core component you must implement in order to support accessibility. VoiceOver uses the attributes to supply users with audible information about displayed elements in your app.
An accessibility attribute has four properties:
- Label: A concise way to identify the control or view. Some examples are “back button” and “recipe image.”
- Traits: Describe the element’s state, behavior or usage. A button trait might be “is selected.”
- Hint: Describes what action an element completes. For example, “Displays the recipe detail.”
- Frame: The frame of the element within the screen, in the format of a
CGRect. VoiceOver speaks the contents of theCGRect. - Value: The value of an element. Just imagine using a progress bar or a slider. The current value might read “5 out of 100.”
Most UIKit components have these attributes already set for you; you simply need to supply the information in the right manner for the user experience. You’ll have to supply most of the attributes for any custom controls you create.
Exemple
difficultyLabel.isAccessibilityElement = true
difficultyLabel.accessibilityTraits = UIAccessibilityTraitNone
difficultyLabel.accessibilityLabel = « Difficulty Level »
Human Interface Guidelines
Provide alternative text labels for images, icons, and interface elements. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what’s onscreen, making navigation easier for people with visual impairments.
Respond to accessibility preferences. If your app uses UIKit to implement its user interface, text and interface elements automatically adapt to certain accessibility preferences, such as bold and larger text. Your app should also check and respond to accessibility preferences when appropriate, such as when the option to reduce motion is enabled. Apps implementing custom fonts should attempt to match the accessibility behavior of the system fonts.
Test your app with accessibility features. In addition to text and motion changes, accessibility options can change contrast, invert colors, reduce transparency, and more. Enable these settings and observe how your app will look and behave for people who enable these features.
Include closed captions and audio descriptions. Closed captions allow the deaf and hard-of-hearing to perceive spoken dialogue and other audible content in videos. Audio descriptions provide spoken narration of important video content for the visually impaired.
Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards. For additional design guidance, see Color.