Skip to main content

Screen Reader-Only Content

Several techniques exist to visually hide text while keeping it accessible to screen readers, each with distinct pros and cons.

Visually Hidden Text

A common and effective method for hiding content visually while keeping it accessible to screen readers is to use a dedicated CSS class.

To implement this, add the following CSS rule to your stylesheet or within a <style> tag in the document's <head>.

<style>
  .sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  } 
</style>

In your HTML, add this class to any element you wish to make available only to screen readers.

<p>This is visible<span class="sr-only">, but this is not<span>.<p>

More information about visually hidden text can be found on the WebAIM website.

ARIA Labels

The aria-label and aria-labelledby attributes provide an accessible name for an element, overriding its visible text content for screen readers.

These attributes should only be applied to elements with inherent semantic meaning (e.g., <button>, <a>, <input>), not to generic containers like <div> or <span>.

aria-label

This attribute uses a simple string to define the accessible name. While the button's visible text is "Add to Cart," the aria-label provides more context for screen reader users.

<button aria-label="Add To Cart Diet Soda">Add to Cart</button>

Screen reader announces: "Add to Cart Diet Soda"

aria-labelledby

This attribute references the id of one or more other elements to construct the accessible name. It concatenates the content from all referenced IDs in the order they are listed.

This produces the exact same output as the aria-label example above.

<h3 id="heading">Diet Soda</h3>
<button id="button" aria-labelledby="button heading">Add to Cart</button>

Screen reader announces: "Add to Cart Diet Soda"

Important Rule: Label in Name

For accessibility compliance (WCAG 2.5.3), the visible text of an element must be contained within its accessible name. This ensures a consistent experience for all users.

Incorrect Implementation: The following is invalid because the visible text "Add to Cart" is not part of the aria-label.

<button aria-label="Purchase Diet Soda">Add to Cart</button>
Last modified