New Components

sr-only (Screen Reader Only)

The sr-only utility class is used to visually hide content while keeping it accessible to screen readers. This technique is essential for providing additional context to assistive technologies without disrupting the visual layout of the user interface. It supports inclusive design by ensuring all users, regardless of how they interact with a digital product, have access to critical information.

When to Use

  • To provide accessible names or descriptions for interactive elements (e.g. buttons with icons only).
  • To include explanatory text for screen reader users (e.g. describing a chart or icon).
  • To label regions, landmarks, or form inputs in a non-visual manner.
  • To announce changes or status updates to assistive technologies (in combination with ARIA live regions).

When not to use

  • When the hidden content is also important for sighted users.
  • For concealing focusable elements (can create inaccessible experiences).
  • To hide large blocks of content or entire sections of a page.
  • As a substitute for semantic HTML or proper ARIA usage.

On this page

Keywords

  • sr-only – A utility class to hide content visually while making it available to assistive technologies.
  • clip, position, white-space, overflow – CSS properties used in sr-only to visually hide content.

Breakdown of Components

A typical sr-only CSS class includes the following properties:

CSS
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
  • position: absolute; and clip/overflow remove the element from the visible flow while keeping it in the accessibility tree.
  • width, height, margin, and border reduce the visual footprint to nothing.
  • white-space: nowrap; ensures the content does not wrap and create unexpected visual issues.

Comparison with Other Techniques for Hiding Content

sr-only

  • Visible to users: No
  • Visible to screen readers: Yes
  • Focusable: No

display:none

  • Visible to users: No
  • Visible to screen readers: No
  • Focusable: No

visibility:hidden

  • Visible to users: No
  • Visible to screen readers: No
  • Focusable: No

HTML hidden attribute

  • Visible to users: No
  • Visible to screen readers: No
  • Focusable: No

aria-hidden="true"

  • Visible to users: Depends on CSS (element can remain visually present)
  • Visible to screen readers: No
  • Focusable: Yes/No (depending on implementation — use with caution if hiding interactive elements)

Screen reader

  • The content inside an element styled with sr-only is announced by screen readers as if it were visible.
  • This is often used for labelling icons, buttons, or for providing screen reader-only instructions.
  • The element must still be part of the DOM.
  • Be cautious when using sr-only on focusable elements. If keyboard users cannot see the element, this may create confusion or accessibility issues.

On this page

Not applicable. The sr-only class is not intended for interactive elements and should not be applied to focusable components directly. However, if used on content referenced by focusable elements (e.g., via aria-describedby), ensure the referenced element is not focusable itself and does not interfere with keyboard flow.