Consistent labelling

Should

Consistent labelling should be used across websites and native applications as well as within websites and applications.

Description

Consistency is important for all users to navigate confidently, whatever the device or product. It helps content and interactions quickly become familiar and recognisably BBC. Consistent labelling particularly helps screen reader users who do not have visual reinforcement to aid understanding.

Labelling could be link text, headings, text for buttons, form fields, icons, text alternatives, page titles and so on.

Text alternatives, labels and descriptions can influence the usability of items such as images, icons, buttons, links, and form elements.

Tip

Sharing an up-to-date inventory between teams will ensure consistency for images and alternative text, form labels, and headings. This can be reinforced through style guidelines and templates. 

IOS

Review editorial on existing web and mobile versions and replicate where appropriate.

ANDROID

Review editorial on existing web and mobile versions and replicate where appropriate.

HTML

Responsive websites are the best way of ensuring consistency across devices. If building separate mobile versions reuse, where possible, images, icons, alternative text, buttons, logos, and editorial for alternative text, heading, form labels and page titles.

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Navigate to an image, object, element or control denoted by an image.
  3. Ensure that any image that is used two or more times across the application performs the same function and has the same textual representation.
  4. Repeat for each image that represents different functionality.
Results

The following checks are true:

  • Images that are used two or more times across the application perform the same functions, have the same textual representation and have an accessible alternative that is announced consistently;
  • Images that are used for different purposes are different.