The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).

When to Use

Use the invisible message if:

• You need to offer accessibility support to communicate dynamic changes on the interface that are visually perceptible.
• You need to provide a message for screen reader users independently of the focus position.

Do not use the invisible message if:

• You want to provide static and visible, but non-focusable information for users of assistive technologies. Use the invisible text instead.
• 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

The examples below show typical use cases for invisible messages.

Search

• Indicate when a results list is rendered following a search.
• Indicate the number of hits found.
• Provide a short hint on how to get to the result list.

Navigation within Dialogs

Indicate when the entire content of a dialog changes. Provide accessibility support for navigation in a dialog.

Saving

Indicate when the page or a form has been saved in apps with or without draft handling.

Auto-Update

Use an invisible message to indicate:

• When a page has been refreshed
• When data on the page has been updated automatically
• When an entry in an input field has been corrected automatically

Deletion

Provide a success message when an item has been deleted. Refer to the UI text guidelines for message toasts.

Dynamic Messaging

Indicate when a message strip has appeared automatically and provide its content.

Dynamic Change in a Control

Indicate when a user action has changed the appearance of a control (for example, if pressing a button changes the button text or icon tooltip).

Top Tips

• Provide short and meaningful texts.
• Avoid mentioning system or configuration details.

Related Links

The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).

When to Use

Use the invisible message if:

• You need to offer accessibility support to communicate dynamic changes on the interface that are visually perceptible.
• You need to provide a message for screen reader users independently of the focus position.

Do not use the invisible message if:

• You want to provide static and visible, but non-focusable information for users of assistive technologies. Use the invisible text instead.
• 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

The examples below show typical use cases for invisible messages.

Search

• Indicate when a results list is rendered following a search.
• Indicate the number of hits found.
• Provide a short hint on how to get to the result list.

Navigation within Dialogs

Indicate when the entire content of a dialog changes. Provide accessibility support for navigation in a dialog.

Saving

Indicate when the page or a form has been saved in apps with or without draft handling.

Auto-Update

Use an invisible message to indicate:

• When a page has been refreshed
• When data on the page has been updated automatically
• When an entry in an input field has been corrected automatically

Deletion

Provide a success message when an item has been deleted. Refer to the UI text guidelines for message toasts.

Dynamic Messaging

Indicate when a message strip has appeared automatically and provide its content.

Dynamic Change in a Control

Indicate when a user action has changed the appearance of a control (for example, if pressing a button changes the button text or icon tooltip).

Top Tips

• Provide short and meaningful texts.
• Avoid mentioning system or configuration details.

Related Links

The invisible message control provides a hidden message that can be used by assistive technologies, such as screen readers. Invisible messages provide information to users when the visible screen content changes dynamically (for example, when a page is refreshed).

When to Use

Use the invisible message if:

• You need to offer accessibility support to communicate dynamic changes on the interface that are visually perceptible.
• You need to provide a message for screen reader users independently of the focus position.

Do not use the invisible message if:

• You want to provide static and visible, but non-focusable information for users of assistive technologies. Use the invisible text instead.
• 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

The examples below show typical use cases for invisible messages.

Search

• Indicate when a results list is rendered following a search.
• Indicate the number of hits found.
• Provide a short hint on how to get to the result list.

Navigation within Dialogs

Indicate when the entire content of a dialog changes. Provide accessibility support for navigation in a dialog.

Saving

Indicate when the page or a form has been saved in apps with or without draft handling.

Auto-Update

Use an invisible message to indicate:

• When a has been refreshed
• When data on the page has been updated automatically
• When an entry in an input field has been corrected automatically

Deletion

Provide a success message when an item has been deleted. Refer to the UI text guidelines for message toasts.

Dynamic Messaging

Indicate when a message strip has appeared automatically and provide its content.

Dynamic Change in a Control

Indicate when a user action has changed the appearance of a control (for example, if pressing a button changes the button text or icon tooltip).

Top Tips

• Provide short and meaningful texts.
• Avoid mentioning system or configuration details.

Related Links

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:

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 visual element without any kind of label, such as a busy indicator animation.

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

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

Related Links

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.

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.

• 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

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.

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.

• 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

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.

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.

• 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