Techniques: Offscreen Text

Offscreen text allows additional context or information about a control or element for assistive technology. Offscreen text helps in the following situations:

  • Link opens in new window or tab
  • Ambiguous label
  • Repeated Ambiguous label
  • Offscreen headings

TIP: offscreen text is also commonly known as screen reader text or clipped text.

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;

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

<a href=”http://www.ebay.com/helptarget=”_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.

Ambiguous label

A label whose context can only be determined visually, programmatically or with manual effort.

<button>Buy it Now<span class=”clipped”> - iPhone 4</span></button>

Offscreen text simplifies the context of the control for assistive technology.

Repeated Ambiguous label

An ambiguous label that is used many times on the same page. When a screen reader displays the list of controls on the page, it will be impossible to determine one from the other.

<button>Buy it Now<span class=”clipped”> - iPhone 4</span></button>
<button>Buy it Now<span class=”clipped”> - Nokia Lumia 635</span></button>
<button>Buy it Now<span class=”clipped”> - iPhone 6</span></button>

Offscreen text improves the uniqueness of each label.

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.

results matching ""

    No results matching ""