Chapter 13: Offscreen text

Good accessibility practices strongly recommend the same content to any user. What a sighted user sees is the same content read out to the screen reader users. In certain situations some content that is visible cannot be read by screen readers. Also some situations may so happen that some content need to be visually hidden but need to be read by screen readers.
There are many techniques that only allows the screen readers to access the content but never be visually displayed. Below are few such techniques. Use them with atmost cotion, unless extremely necessary never use this technique.
One important instance where it is not advised to use the offscreen text method is for interactive elements. IF the offscreen content is used on interactive elements such as links or buttons, while the user navigates with the tab key, a blank tab stop is observed with a focus indicator. This will confuse the sighted and low vision users. So avoid using the offscreen text method for interactive elements.
This is a famous technique before the ARIA is recommended by W3C. Developers tend to use to remediate for form with hidden labels.
Offscreen positioning
The .hidden CSS class should then be referenced from within the tag of the element being hidden, as shown:
<div class=”hidden”>This text is hidden.</div>
Sighted users will not see the hidden content at all. It will be out of their viewing range – hidden well to the left of the visible browser window. Screen reader users will have access to the content as if it were not hidden at all. Screen readers read the content normally, completely ignoring the styles used in this technique.

CSS clipping method

position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
Essentially the content is clipped to a 1 pixel space. The content occupies just one pixel screen space and hence not visible on the screen. The content is still be read by screen reader as it is available in the DOM.