Offscreen Text

A technique for adding additional, non-visible content for screen reader users.

Offscreen text (also known as "screen reader text" or "clipped text") allows us to add additional context or helpful information about an element. This offscreen text is not visible, and only findable by screen readers.

Offscreen text helps in the following situations:

All of the examples in this page make use of the .clipped class (displayed below) 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;
}

It is important to note that while offscreen text can safely be used to prefix or postfix a non-labelling element, it is not safe to prefix a labelling element. Prefixing a label would cause 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).

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 visual design does not incorporate onscreen headings, we must provide them 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), then offscreen text is required.

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