Unique page/screen titles

Must

All pages or screens must be uniquely and clearly identifiable.

Description

The page/screen title is often the first thing people will see or hear and acts as a confirmation of where they have arrived at, helping people orientate themselves within websites and apps. It is particularly helpful for vision impaired users who cannot perceive the whole page/screen at once.

Page titles are standard for HTML. Apps have the facility to add screen titles. However, when visible space is in short supply other means may be used to identify location, such as a logo on a homepage, the first item of content presented as a heading, or a selected tab on top navigation.

IOS

Provide a concise and descriptive title for each screen of the app. If a NavigationBar is used, for example, set the title of the {coce}UINavigationItem to unique descriptive text.

iOS example

 
UINavigationItem *item = [[UINavigationItem alloc] initWithTitle: NSLocalizedString (@"BBC Weather", @"Title for navigation item")];                        
UINavigationItem *item = [[UINavigationItem alloc] initWithTitle:@"BBC"];                        

ANDROID

Set the title of the activity using the setTitle method to a concise and descriptive name.

Android example

<activity android:name=".myApp" android:label="BBC Weather Application"></activity>
or
setTitle("BBC Weather");                        
<activity android:name=".myApp" android:label="BBC"></activity>
or
setTitle("BBC");                        

HTML

Provide unique page titles using the title element that concisely describe the page content. Page titles should generally be the same text as the 1st level heading on the page.

HTML example

For the home page of the BBC Weather site:

<title>BBC Weather</title>                        

For the home page of the BBC Weather site:

<title>BBC</title>                        

TESTING

 

Procedures
  1. Examine the title of each page/screen on the site/app.
  2. Verify that a title exists:
    • For HTML a unique descriptive {code}title{/code} element must be present be announced by a screen reader;
    • For Android and iOS a title must appear at the top of the screen and be announced by a screen reader.
Results

The following checks must be true:

  • Each page/screen must have a unique context sensitive title:
    • For HTML a unique descriptive {code}title{/code} element is present and announced by a screen reader;
    • For Android and iOS a title appears at the top of the screen and is announced by a screen reader.