Intro

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

Responsiveness

The invisible text control is not visible and therefore works on all devices.

Guidelines

Provide short and meaningful texts. Adhere to the text guidelines of labels.
Do not use an invisible text as a replacement for a label. (Property: text)
Just adding the invisible text control would not work. As with labels, developers need to assign the invisible text to the corresponding control. Unlike with labels, this does not happen automatically in forms.

hint

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

Properties

The properties “busy”, “busyIndicatorDelay”, and “visible” do not have an effect. Therefore, do not use them.

Usage

When to Use Invisible Text

If you need to provide contextual information also for users of assistive technologies like screen readers.
If you need to provide a title (such as for a form or table), which sighted users do not need.

If you need to provide a label (such as for a group of radio buttons), which is not needed by sighted users.

If you need a form row with more than one form element. Use the concatenated label for sighted users, and use single invisible texts for users of assistive technologies.

A form with two fields in one row

A form with two fields in one row

If you need to explain a visual element without any kind of label, such as a loading animation.

If you build your own controls and need to provide information about uncommon states or properties.

When Not to Use Invisible Text

If you want to provide additional information for users of assistive technologies which is not available for sighted users. While you should not discriminate users of assistive technologies, you should also not provide “privileges” to them.
If you want to hide information. It might still be available for users of assistive technologies.
If 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.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Label (guidelines)
Form (guidelines)

Implementation

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

Visual Design

No links.