Intro

The invisible text control provides a simple hidden text that can be used by assistive technologies such as screen readers to provide contextual information.

When to Use

Use invisible text if:

You need to make contextual information that is visible for sighted users available to users of assistive technologies, such as screen readers.
You need to provide contextual information specifically for users of assistive technologies (not required by sighted users).

Do not use invisible text if:

You want to provide additional information for users of assistive technologies that is not available for sighted users. While you should not discriminate users of assistive technologies, you should also not give them “privileges” .
You want to hide information. It might still be available for users of assistive technologies.
You want to hide long texts. The information is probably important enough to be shown! Furthermore, short texts are far more convenient, even for users of assistive technologies.

Examples

Here are some examples of use cases that require invisible texts:

A title that sighted users don’t need (for example, a title for a form or table).

A form row with more than one form element: Use the concatenated label for sighted users and single invisible texts for users of assistive technologies.

A label that sighted users don’t need (for example, for a group of radio buttons).

A group of radio buttons without a visible label

A group of radio buttons without a visible label

A visual element without any kind of label, such as a busy indicator animation.

Animation for loading

Animation for loading

Information about uncommon states or properties, such as semantic states.

Buttons use the invisible text control to announce their type

Properties

The properties busy, busyIndicatorDelay, and visible have no effect. Do not use them.

Top Tips

Provide short and meaningful texts. Adhere to the text guidelines for labels.
Do not use an invisible text as a replacement for a label (property: text).

hint

It is not sufficient to just add the invisible text control. You must also assign it to the corresponding control. Unlike labels, invisible texts are not assigned automatically in forms.

To assign the invisible text to a control, add the ID of the invisible text to the ariaLabelledBy association of the corresponding control.

Elements and Controls

Label (guidelines)
Form (guidelines)

Implementation

Invisible Text (SAPUI5 samples)
Invisible Text (SAPUI5 API reference)

Visual Design

No links.