Offscreen Text

Create non-visual content exclusive to screen readers.

Offscreen text (also known as "screen reader text", "visually-hidden text" or "clipped text") allows us to add additional context or helpful information about an element. This content is not visible on the screen; it is only visible to screen readers.

Offscreen text helps in the following situations:

All of the examples in this page make use of the .clipped class to create offscreen text.

/* clip element visibility, making it accessible to screen reader only */
.clipped {
border: 0 !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 1px !important;
overflow: hidden;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}

IMPORTANT: prefixing a label with offscreen text causes problems for users of speech to text software, because the beginning of the visible label (that the user speaks) would not match the actual label (that the software sees). When adding offscreen text to any kind of label (e.g. the inner text of a button, or the label of a textbox), aways append it after the visible text.

Link opens in new window or tab

Launching a new browser window can be a source of frustration for users of assistive technology.

<a href=”http://www.ebay.com/help” target=”_blank”>
Help
<span class=”clipped> - opens in new window or tab</span>
</a>

Offscreen text (inside the clipped span tag) helps to set expectations in advance.

Link text without nearby context

A link whose context is difficult to find (e.g. no nearby text or heading), and can only be determined visually or with an unreasonable amount of manual effort.

<a href="http://www.ebay.com">Buy it Now<span class=”clipped”> - iPhone 4</span></a>

Offscreen text provides the context of the link in place.

Ambiguous link text

Link text that is used and repeated many times on the same page, each with a different context and URL.

<a href="http://www.ebay.com/camera">Shop Now<span class=”clipped”> - Cameras</span></a>

Again, offscreen text provides the unique context of the link in place.

Additionally, when a screen reader displays the list of controls on the page, it is now possible to determine one from the other.

NOTE: The scenario presented is technically a WCAG AAA ("triple A") requirement.

Offscreen headings

If the page design does not incorporate a visible heading for every section, the document heading structure can be compromised. In order to correct the structure, the headings can be provided offscreen.

<h2 class=”clipped”>Search refinements</h2>

When do we provide offscreen headings? A good rule of thumb is that every visually significant module or section of the page should have a heading.

Strikethrough price

The HTML <strike> tag is often used to visually represent a sale price, or "strikethrough" price. Unfortunately, the semantics of this tag are not announced by most screen readers. This means that a user may have difficulty in comprehending the current price & sale price.

The easiest solution is for the design and content to provide this additional context for all users. In the screenshot below, the word "was" is added before the original price.

Strikethrough price with visible prefix

If however, the design does not provide for this context (which is often the case for smaller, mobile screens), offscreen text is required.

<span>$149.99</span>
<span>
<span class="clipped">Was: </span>
<strike>$499.99</strike>
</span>
Strikethrough price without visible prefix