Design predictable, logical navigation that’s consistent with platform standards. When people can leverage their experience navigating the system and other apps, it’s much easier for them to learn how to navigate your app. To learn more about the standard styles of app navigation, see Navigation (iOS), Navigation (watchOS), and Navigation (tvOS).
Navigating with VoiceOver
Make sure VoiceOver users can navigate to every element. VoiceOver uses accessibility information from onscreen elements to help people understand the location of each element and what it can do. System-provided UI elements include this accessibility information by default, but VoiceOver can’t help people discover and use custom elements unless you provide the information.
Improve the VoiceOver experience by specifying how elements should be grouped, ordered, or linked. Proximity, alignment, and other contextual cues can help sighted users perceive the relationships among onscreen elements, but these cues don’t work well for VoiceOver users. Examine your app for places where relationships among elements can be perceived only by sighted users, and describe these relationships to VoiceOver.
For example, the layout below relies on proximity and centering to imply that each phrase is a caption for the image above it. However, if you don’t tell VoiceOver that each image should be grouped with its phrase, VoiceOver reads, “A large container holding a variety of mangoes. A large container holding many green artichokes. Mangoes come from trees that belong to the genus Mangifera. Artichokes come from a variety of a species of thistle.” This happens because VoiceOver reads elements from left to right by default.
Mangoes come from trees that belong to the genus Mangifera.
Artichokes come from a variety of a species of thistle.
The use of static text to introduce a control is another visual cue that works only for sighted users. In the example shown below, System Preferences tells VoiceOver that the text “Default web browser:” serves as the pop-up button’s label so that VoiceOver users can make sense of this control.
For developer guidance, see shouldGroupAccessibilityChildren and accessibilityTitleUIElement.
Notify VoiceOver when onscreen content or layout changes. An unexpected change in content or layout can be very confusing to VoiceOver users, because it means that their mental map of the screen is no longer accurate. It’s crucial to report onscreen changes so that VoiceOver and other assistive technologies can help people update their understanding of the screen.
Warn people before they activate a control that opens a different webpage or app. Changing the context without warning can cause confusion and forces people suddenly to rebuild their mental model of the onscreen environment.
Provide alternative text labels for all important interface elements. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe onscreen elements, making navigation easier for people with visual impairments. System-provided controls have useful labels by default, but you need to create labels for custom elements. For example, if you create an accessibility element that represents a custom rating button, you might supply the label “Rate.”
Support the VoiceOver rotor. VoiceOver users can use an onscreen control called the rotor to navigate a document or webpage by headings, links, or other section types. The rotor can also bring up the braille keyboard. You can help VoiceOver users navigate among related items in your app by identifying these items to the rotor. For developer guidance, see UIAccessibilityCustomRotor and NSAccessibilityCustomRotor.
Let people use the keyboard to navigate and interact with all onscreen elements in a macOS app. Ideally, people can turn on Full Keyboard Access and perform every task in your macOS app using only the keyboard. In addition to accessibility keyboard shortcuts, macOS defines a large number of other keyboard shortcuts that many people use all the time. To support all users, it’s important to avoid overriding any system-defined keyboard shortcuts in your app.