Invisible text

Invisible text is very useful for users of screen reader. It could be used to assign form item labels or to insert a heading before of a section. If you want to do this without changing the appearance you can use invisible text.
To make a specific text invisible use “ display: none” . This will work if CSS is supported and will hide text from handhelds and printed web pages, but it won’t work for all screen readers. To make text invisible for screen readers you can use something like this: position: absolute; left: -9000px. This will take your text and will put it 9000px to the left of your left edge of your screen, making it invisible.

You need to be careful using this technique as google openly penalises websites that overuse this technique https://support.goog...wer/66353?hl=en. Most html tags have attributes to aide screen readers such as title="some title" for anchors, alt="some alternative text" for images. For form labels you can use the following code:

<label for="textinput">Enter your text:</label><input type="text" value="" name="textinput" id="textinput" />. This has the added bonus that when you click the label the text box is given focus.

The most important thing is to use valid and semantic html markup so that screen readers can interpret your code properly. The very best thing you can do is test using a screen reader! Sometimes you do something that you think will help but turns out to be irritating when using screen reader.