Offscreen Text
Create non-visual content exclusive to screen readers.
Last updated
Create non-visual content exclusive to screen readers.
Last updated
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.
NOTE: aria-label can also achieve the same result as offscreen text in certain situations (e.g. on links and buttons).
Offscreen text helps in the following situations:
All of the examples in this page make use of the .clipped class to create offscreen text.
All scenarios also include an additional aria-label example.
IMPORTANT: 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. The same rule applies when using aria-label - always ensure the beginning of the aria-label matches the visual label.
Launching a new browser window can be a source of frustration for users of assistive technology. Offscreen text helps to set expectations in advance.
Usage of aria-label is also supported:
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. Offscreen text provides the context of the link in place.
Usage of aria-label is also supported:
Link text that is used and repeated many times on the same page, each with a different context and URL. 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.
Again, we can use aria-label instead of clipped text, like so:
NOTE: The scenario presented is technically a WCAG AAA ("triple A") requirement.
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.
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.
The HTML <s> 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.
If however, the design does not provide for this context (which is often the case for smaller, mobile screens), offscreen text is required.
