Invisible Content

# 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 some other 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 provide 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