Invisible Content text for Screen Readers

There are some instances we must use invisible text while we develop a webpage. Disable people or visually impaired user will not be able to see all in the screen. To overcome such issue developers are using screenReaderOnly class.

screenReaderOnly class will hide the messages from normal users and will only allow to screen readers to read it. For an example if a short cut needs to use for a screen reader software, developer must be able to use a screenReaderOnly class and display the short cut to screen reader user only.

Here is a sample class which can we use

.screenReaderOnly

{

position:absolute;

left:-10000px;

top:auto;

width:1px;

height:1px;

overflow:hidden;

}

<div class="screenReaderOnly">Text message to read only by screen readers.</div>

The above css making the positioning the content off screen.

Please do not use visibility: hidden; or display:none; because screen readers will avoid reading such

a css contents.