Bootstrap 3 sr-only Class: Screen Reader Accessibility

You will learn that Bootstrap 3's sr-only class visually hides text while keeping it available to screen readers. This lets icon-only controls, such as a dropdown arrow, have a meaningful accessible name without adding visible text to the layout.

sr-only means screen-reader only. In Bootstrap 3, it is a utility class that hides an element visually but keeps its text available to assistive technologies such as screen readers.

In the example, the second button is displayed mainly as a caret (a small downward arrow). A sighted user may understand that the arrow opens a menu, but a screen reader user needs an equivalent text label. This element provides it:

<span class="sr-only">Toggle Dropdown</span>

Without that text, the button may have no useful accessible name. A screen reader could announce it only as "button," which does not explain what activating it will do.

The class does not change dropdown behavior. Bootstrap's JavaScript can still open and close the menu after it is removed. Its purpose is accessibility, not functionality. Therefore, removing it may appear harmless during visual testing while making the interface less understandable for people using assistive technology.

Bootstrap 3 implements sr-only with CSS that moves content out of normal visual presentation and clips it to a tiny area. The content remains in the document rather than being removed with display: none, so screen readers can still access it.

Think of sr-only text as an audio label attached to a visual symbol.

• The caret is a sign on a door that sighted users can see.
• The sr-only text is a spoken note for someone navigating without seeing that sign.

Both describe the same action. One is visual; the other is available to assistive technology. Removing the spoken note does not break the door, but it makes the door harder to identify.

Use sr-only on short text that should be announced but not displayed:

<span class="sr-only">Meaningful description</span>

Icon-only button

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  <span class="sr-only">Search</span>
</button>

The search icon is decorative once the button has the text label, so aria-hidden="true" prevents a screen reader from announcing the icon as well. The sr-only span gives the button an accessible name: "Search."

Bootstrap 3 dropdown toggle

<div class="btn-group">
  <button type="button" class="btn btn-info">Departments</button>

  <button
    type="button"
    class="btn btn-info dropdown-toggle"
    data-toggle="dropdown"
    aria-label="Open departments menu"
  >
    <span class="caret" aria-hidden="true"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a href="#sales">Sales</a></li>
    <li><a href="#technical">Technical</a></li>
  </ul>
</div>

Here, aria-label is an alternative to an sr-only span. Use one clear labeling method rather than duplicating labels unnecessarily.

Consider this button:

<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
  <span class="caret" aria-hidden="true"></span>
  <span class="sr-only">Toggle Departments menu</span>
</button>

1. The browser renders the button.
2. The caret is visible, so sighted users see a dropdown arrow.
3. Bootstrap 3's sr-only CSS visually hides the text Toggle Departments menu.
4. The text remains in the accessibility tree because it is not hidden with display: none or the hidden attribute.
5. When a screen reader focuses the button, it can use that text as the button's label.
6. When the button is activated, Bootstrap's dropdown JavaScript handles opening or closing the menu through data-toggle="dropdown".

The label explains the control; it does not perform the toggle itself.

sr-only is useful whenever a visible control relies on an icon, shape, color, or compact visual layout instead of visible words.

• Search buttons: Label a magnifying-glass-only button as "Search."
• Close buttons: Label an × icon as "Close dialog" or "Close notification."
• Menu controls: Label a hamburger icon as "Open navigation menu."
• Pagination: Add context such as "Next page" or "Go to page 3."
• Status changes: Add text that explains an icon, such as "Saved" beside a checkmark when a visual-only indicator would be unclear.
• Responsive layouts: Keep labels available when visible text is removed on small screens.

Use short, action-oriented labels. A screen reader user should understand what will happen when the control is activated.

In production code, developers usually treat accessible names as a requirement for every interactive control.

Prefer visible text when space permits

<button type="submit" class="btn btn-primary">Save changes</button>

Visible text helps everyone, including people who do not use screen readers.

Add an accessible label to icon-only controls

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  <span class="sr-only">Remove item</span>
</button>

Make labels specific in repeated content

A list with several delete buttons should not give every button the vague label "Delete."

<button type="button" class="btn btn-link">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  <span class="sr-only">Delete Sales report</span>
</button>

Keep state text accurate

If a control changes between open and closed states, update its ARIA state when your component behavior supports it:

<button
  type="button"
  class="btn btn-info dropdown-toggle"
  aria-expanded="false"
>
  Departments
  <span class="caret" aria-hidden="true"></span>
</button>

aria-expanded communicates the current state, while an accessible label identifies the control. They solve different accessibility needs.

Removing hidden text because it is not visible

<!-- The dropdown may still open, but the button has little or no useful name. -->
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
</button>

Avoid it: Keep an accessible text label, either with sr-only text or an appropriate aria-label.

Hiding the label with display: none

<span style="display: none;">Open menu</span>

Content hidden with display: none is generally unavailable to screen readers. It is not a replacement for sr-only.

Avoid it: Use Bootstrap 3's sr-only class when you want text hidden visually but still announced.

Writing vague labels

<span class="sr-only">Button</span>

A user already knows the element is a button. The label should describe its action.

Better:

<span class="sr-only">Open departments menu</span>

Announcing decorative icons twice

<button type="button">
  <span class="glyphicon glyphicon-search"></span>
  <span class="sr-only">Search</span>
</button>

Depending on the icon implementation, assistive technology may announce unnecessary icon information.

Avoid it: Mark purely decorative icon markup with aria-hidden="true" when it is paired with a text label.

Using duplicate labels

<button type="button" aria-label="Search">
  <span class="sr-only">Search</span>
</button>

This can create confusing or redundant announcements in some situations.

Avoid it: Choose one primary approach: visible text, sr-only text, or aria-label.

sr-only and aria-label can both provide an accessible name. An sr-only span has the advantage of being ordinary text in the HTML, which can be easier to inspect, translate, and reuse. aria-label is compact, but it should be kept accurate because it is not visible on screen.

<!-- Bootstrap 3: visually hidden, screen-reader-accessible text -->
<span class="sr-only">Open navigation menu</span>

• sr-only means screen-reader only.
• It hides text visually but keeps it available to assistive technology.
• Use it to label controls that only show an icon, caret, or symbol.
• It does not make a control work; it explains the control.
• Do not replace it with display: none, visibility: hidden, or the hidden attribute.
• Use specific labels: "Delete invoice 1042" is better than "Delete" in a repeated list.
• Use aria-hidden="true" for decorative icons that are accompanied by a text label.
• In newer Bootstrap versions, the equivalent utility may be named visually-hidden rather than sr-only.

What does sr-only mean in Bootstrap 3?

It means "screen-reader only." The class hides content from visual display while allowing screen readers to read it.

Can I remove sr-only if my Bootstrap dropdown still works?

The dropdown can still function, but an icon-only toggle may no longer have a meaningful label for screen reader users. Keep a clear accessible label.

Does sr-only hide text from screen readers?

No. It does the opposite: it hides text visually while preserving it for screen readers.

Should I use sr-only or aria-label?

Either can provide a label for an icon-only control. Use visible text when possible. Otherwise, choose one clear labeling method and avoid redundant labels.

Why is display: none not equivalent to sr-only?

display: none removes content from both visual layout and the accessibility tree. sr-only is specifically designed to keep the text available to assistive technology.

Is Toggle Dropdown a good label?

It is understandable, but a specific label is better, such as Open departments menu, especially when several dropdowns exist on one page.

Is sr-only still the class name in newer Bootstrap versions?

Bootstrap 3 uses sr-only. Newer Bootstrap versions use visually-hidden, so check the documentation for the version used by your project.

• Accessible names — The text a screen reader uses to identify a button, link, input, or other control.
• ARIA labels (aria-label) — An attribute-based alternative for labeling controls without visible text.
• aria-hidden — Removes decorative or duplicate content from the accessibility tree.
• Semantic HTML buttons — Native <button> elements provide keyboard behavior and a useful role automatically.
• Keyboard accessibility — Icon-only controls must be reachable and usable without a mouse.
• ARIA states (aria-expanded) — Communicates whether a menu, accordion, or similar disclosure control is open.
• Bootstrap dropdowns — The Bootstrap component that provides menu-toggle behavior in the original example.
• Bootstrap utility classes — Reusable CSS classes, including classes for accessibility and layout.