Overview

Invisible Messaging

The invisible message provides a hidden message that can be used by screen readers, when the UI content changes dynamically (for example, when a page is refreshed).

In the init method, we need to get the instance of the Invisible Messaging service:

onInit: function () {
	// ... some other code

	this.oInvisibleMessage = InvisibleMessage.getInstance();

	// ... some other code
}
			

Then in another handler function, we can use it:

fnHandler: function () {
	// ... handle something

	this.oInvisibleMessage.announce(sMessage, InvisibleMessageMode.Assertive);
}
			

See Example

Invisible Text

The invisible text provides a hidden text that can be used by screen readers to give contextual information. The hidden text can for example be referenced in the ariaLabelledBy or ariaDescribedBy associations of other controls.

<form:SimpleForm
	maxContainerCols="2"
	editable="true">
	<Label
		text= "Postal code / City" />
	<Input
		ariaLabelledBy="postal"
		value="12345"
		fieldWidth="35%" />
	<Input
		value="Sofia"
		ariaLabelledBy="city"
		fieldWidth="35%" />
</form:SimpleForm>
<core:InvisibleText id="postal" text="Postal code" />
<core:InvisibleText id="city" text="City" />
			

See Example