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 and Adaptiveness

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.
Developer 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.
A group with radio buttons without any visible label
A group with radio buttons without any visible label
  • 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.
Buttons use the invisible text control to announce their type
Buttons use the invisible text control to announce their type

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

Implementation