Unique page/screen titles - Accessibility for Products

The page/screen title is often the first thing people will see or hear. It 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, a selected tab on top navigation or a search input on a search page.

iOS

Make sure each screen/view contains a visible title at the top. Provide the title with traits of UIAccessibilityTraitSummaryElement and UIAccessibilityTraitHeader. Use UIAccessibilityPostNotification to move focus to the text when the screen/view is initially opened.

iOS Example (Objective-C)

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

Android

If using a navigation bar, use setTitle to provide a page title. See example 1.

If visual text representing a title is presented on the page, apply the android:label attribute to the text. This approach benefits both sighted and non-sighted (TalkBack) users, as they will all be able to perceive the title. See example 2.

Android Pass Example

Example 1

setTitle("BBC Weather")

Example 2

<activity
  android:name = ".myApp"
  android:label="BBC Weather";
</activity>

HTML

Use the title element to provide an individual page title for each HTML page. Page titles should generally use the same text as the main level one (h1) heading on the page, but this will depend on the context of the application and the page itself, so is not mandatory.

HTML Pass Example

<html lang="en">
    …
    <title>BBC Weather</title>
    …
  </html>

Testing

Procedures

Examine the title of each page/screen on the site/app.
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.

Outcome

The following checks must be true:

Each page/screen must have a unique context sensitive title:

For HTML a unique descriptive title 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.

Unique page/screen titles must

iOS