Screen Title

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

1. Turn on TalkBack
2. Open the application
3. One of the following will happen:
   • Inaccessible: TalkBack announces only the application name.
   • Accessible: TalkBack announces the screen's title instead of the application name.

How to Fix

Native Android

Set the screen's title within the Activity.

Activity.this.setTitle(...);

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'}}
/>

Custom Navigation Bars

What we found in applications built with React Native is that for a truly accessible experience, the navigation header must be set with <Stack.Navigator> with options of title. A custom navigation bar has no way of being programmatically coded to indicate it is a proper navigation element and not just a regular view. This alters how assistive technology announces and interacts with the element. Note that setting a header attribute, as often recommended, does not satisfy the criteria for Screen Title.