Screen Title

Link to Screen Title copied to clipboard

Every screen within an application should provide a title to be announced by assistive technology.

Impact

Screen titles allow users with visual, cognitive and motor disabilities and limited short-term memory to determine where they are in the application, identify content on a screen by its title and navigate between screens in cases where a user's mode of operation depends on audio.

Confirmation

Go to a new screen in the app
One of the following will happen:
- Inaccessible: VoiceOver will not announce a screen title
- Accessible: VoiceOver will announce the screen title

How to Fix

This issue occurs when a screen is not given a title.

UIKit

In code:

Find the ViewController that is failing the rule, and set the Navigation Controller's title property.

navigationController?.title = "Screen Title Here"

Alternatively, you can set the title property on the ViewController directly.

title = "Screen Title Here"

SwiftUI

Add a .navigationTitle view modifier to the end of the last element within the view's body property.

 var body: some View {
        VStack {
            Text("Below is a stepper in SwiftUI")
            StepperView()
        }.navigationTitle("Screen Title")
    }

React Native

Ensure each Stack.Screen component has a descriptive name. If needed, add options={{title: 'New Screen Title'}} to define a better screen title.

<Stack.Screen
    name="ScreenTitleExample"
    component={ScreenTitleExample}
    options={{title: 'Screen Title'}}
/>