Consistent labelling Should

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

Consistency is important for all users to navigate confidently, whatever the device or product. It helps content and interactions quickly become familiar and recognisably COMPANY NAME. 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. 

Examples

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.

Testing 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.

Indicating language Must

The language of a page or app must be specified, and changes in language must be indicated.

When listening, correct pronunciation helps understanding. For users of assistive technologies such as screen readers it is particularly important, as some have different speech synthesizers for different languages. For example, "chat" means something different when using English pronunciation rather than French.

The default language for the content of a page or app must be defined in the code for the correct speech synthesizer to be used. It will over-ride any language and dialect setting specified on the users device.

For multi-lingual content, the language for anything that varies from the default language must also be defined in the local code for the correct speech synthesizer to be used. This includes image alternatives, form labels, quotes, objects, media alternatives, and other elements. It will over-ride the specified default language and any language and dialect setting specified on the users device.

Jump to:

Examples

Testing

Advanced

Examples

iOS

iOS applications will default to the language in use on the device and will search down the available language resources based upon the device language order. See Introduction to Internationalization and Localization for details.

Android

Android applications will attempt to load resources for the language set by the device. If no language specific resources are found the default resource is used. See Android Localization for details.

Assistive technologies are not aware of language specific content and will read all content using the default language settings set for the speech engine or applicable output device.

HTML

Use the lang attribute on the html element to specify the page language.

Use the lang attribute to set language of smaller parts of the document.

Testing procedures

  1. Set the platform language.
  2. Activate the app with platform standard assistive technologies enabled.
  3. Verify the following appears or are announced in the correct language:
    • Text,
    • Text in a different language from that of app/site,
    • Images of text,
    • Images of text in a different language from that of app/site,
    • Labels,
    • Tooltips,
    • Sounds,
    • Video sub-titles,
    • Page and screen titles,
    • Alternatives for image, objects and elements in a different language from that of app/site.

Testing results

The following checks are true:

  • All content, text, images of text, audio, video subtitles, and alternatives are announced or displayed in the language expected, as set in iOS;
  • The language should switch appropriately.

Instructions Should

When needed, additional instructions should be provided to supplement visual and audio cues.

Visual cues are not always obvious or visible to all users. In particular, screen reader users, users who magnify or zoom in on content, and cognitively impaired users.

Similarly, audio cues are not always perceivable. In particular, to users who are deaf or hearing impaired, have volume diminished or muted, or are in noisy environments.

Instructions, menus, dialogue and in-content messages should be delivered visually and audibly, at a user controlled speed, to help users understand how to interact with content. However, be aware that verbosity, whether visual or audible, can also be disorienting and try to be succinct.

Tip

Accessible instructions might be:

  • Visible labels - such as on-screen labels for form controls;
  • Hidden text, text alternatives or labels - for screen reader users only;
  • Help instructions - such as a link to a text/audio file, or another section/page;
  • Temporarily hidden text - such as a pop-over hint or progressively expanded text;
  • Standard notifications - such as error messages.

Examples

iOS

Use on-screen text, icons and/or accessible labels and accessible hints.

Does not provide additional instruction indication that the add button adds a show to your queue:

Android

Provide additional information via on-screen labels, or as off-screen via the contentDescription attribute.

HTML

Use visible text (labels), alternative text, title attributes for form fields, or off-screen text depending on the need.

Testing procedures

  1. Activate a screen reader.
  2. Locate all forms or actionable items.
  3. Verify the page or object/element/control contains instructions explaining how to complete the form or what the object/element/controls will do.
  4. Verify that the instructions are sufficiently clear to avoid and prevent errors.

Testing results

The following checks are true:

  • Forms provide instructions;
  • Forms provide clear instructions which assist users in avoiding and preventing errors during form completion;
  • Actionable object/controls/elements provide labels or instruction that indicate what action will be performed when the item is activated.