Why can’t I just use display:none to hide text from sight?

Because display:none and visibility:hidden remove the element from the accessibility tree, so screen readers skip the text entirely — which defeats the purpose of writing it. The generated rule instead keeps the node in the tree while painting nothing: a 1px box with position:absolute, overflow:hidden, clip-path:inset(50%), and the legacy clip:rect(0 0 0 0) for older browsers. That’s why it’s called “visually hidden” rather than just “hidden”.

What’s the difference between the Clip CSS, Tailwind, and Bootstrap techniques?

They all produce the same robust clip-rect effect, just packaged differently. “Clip CSS” gives you a hand-written .sr-only rule you ship yourself — works in any project. “Tailwind” uses the framework’s built-in sr-only utility, so there’s no CSS to write at all. “Bootstrap” uses Bootstrap 5’s .visually-hidden class, whose declarations are !important-flagged so they override component styles. Pick whichever matches your stack; the class name in the generated markup updates to match.

When should I use the Focusable technique?

Use it for skip links and similar interactive controls that should stay hidden until a keyboard user tabs to them, at which point they become visible and on-screen. It maps to the sr-only-focusable / focus:not-sr-only pattern. The audit warns if you apply it to non-interactive content like a plain span of hidden prose, because there’s nothing for a keyboard user to focus and reveal.

What does turning on a live region do?

Setting the live region to Polite or Assertive wraps your text in a container with role="status" (polite) or role="alert" (assertive) plus aria-live and aria-atomic. That tells assistive tech to announce the text when it changes after page load — for example “Form saved” or “3 new messages”. Polite waits for the next natural pause; assertive interrupts whatever is being spoken, so reserve it for genuinely urgent messages like errors.

Do the pattern-library examples use the technique I selected?

Yes. Each pattern — icon-button label, external-link notice, pagination “page X of Y”, sortable-column state, required-field text, loading status, “New” badge, breadcrumb current page, and skip link — is rendered with the class name of whichever technique you’ve chosen, so the markup you copy always matches the CSS you copy. The one exception is the skip link, which forces the focusable class because a skip link must reveal on focus to be usable.

Can I use this with React/JSX, and can I share my configuration?

The generated HTML is valid JSX too — in React you’d typically write className instead of class, and Tailwind users can drop the classes straight in. The text, technique, wrapping element, and live-region settings are all encoded in the page URL, so a share link reproduces the same output for a teammate, and the markup can be copied, downloaded, or piped into another tool on the site.

Screen Reader Text Generator

Generate the visually-hidden (“sr-only”) text that gives assistive tech the context sighted users get from icons, colour, and layout — and get the technique right. Pick the robust 1px clip-rect rule, Tailwind’s sr-only, Bootstrap’s .visually-hidden, or the focusable skip-link reveal, then drop in a real pattern (icon-button label, “opens in a new tab”, page X of Y, sort state…). The preview shows exactly what a screen reader announces, and the audit explains why display:none is the wrong tool.

About this ToolHow it works, benefits & use cases

The Screen Reader Text Generator builds the visually-hidden (“sr-only”) text that gives assistive technology the context sighted users get for free from icons, colour, and layout — and, just as importantly, it gets the hiding technique right. Type the text a screen reader should announce, then choose how to hide it: the robust hand-written 1px clip-rect rule (position:absolute, overflow:hidden, clip-path:inset(50%), with the legacy clip fallback), Tailwind’s built-in sr-only utility, Bootstrap 5’s .visually-hidden, or the focusable skip-link reveal that appears only on keyboard focus. A library of real patterns — required-field “required”, a polite loading/status live region, external-link “(opens in a new tab)”, an icon-button label, pagination “page X of Y”, sortable-column “sorted ascending”, a “New” badge, a breadcrumb current-page marker, and a skip link — renders complete markup using whichever technique you picked, so the class always matches the CSS you copy. The preview reads back exactly what assistive tech announces, an optional aria-live wrapper turns the text into a status or alert region, and an audit explains why display:none is the wrong tool. The whole configuration lives in a shareable URL.

How to Use

1Pick a ready-made pattern from the library (icon-button label, “opens in a new tab”, page X of Y, sort state, skip link…) or skip straight to writing free-form text.
2Type the text a screen reader should announce — it’s read aloud but never shown on screen.
3Choose the hiding technique: Clip CSS (recommended), Tailwind sr-only, Bootstrap .visually-hidden, or Focusable for skip links.
4Optionally set the wrapping element (span/div/p) and turn on a polite or assertive aria-live region for content that changes.
5Read the “Screen reader announces” preview, then copy the HTML and CSS (or note that Tailwind needs no CSS), or share the URL.

Key Benefits

Four real techniques side by side — robust clip-rect, Tailwind sr-only, Bootstrap .visually-hidden, and the focusable skip-link reveal
Ships the correct CSS per technique, or tells you when Tailwind’s utility means no CSS is needed
A library of production patterns (required field, loading status, external link, icon button, pagination, sort state, badge, breadcrumb, skip link) rendered with your chosen technique
Live “announces” preview, including the live-region preamble, so you hear what AT will say
Optional aria-live wrapper (role status / alert) for dynamic status messages
Audit that explains why display:none and visibility:hidden hide from AT, and warns about empty text or misusing the focusable technique
Shareable URL captures the text, technique, element, and live-region settings

Common Use Cases

Giving an icon-only button a spoken label so it announces its action instead of just “button”
Telling screen-reader users a link opens a new tab without cluttering the visible label
Adding a polite aria-live status announcement for a loading or saved state
Marking a required field with hidden “(required)” text beside a visual asterisk
Announcing a sortable table column’s state (“sorted ascending”) or the current pagination page

Screen reader announces

“Close dialog”

Technique: Clip CSSClass: .sr-only

Generated markup

Visually-hidden HTML

<span class="sr-only">Close dialog</span>

CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Looks good — notes below

Reminder: never hide this with display:none or visibility:hidden — both drop the node from the accessibility tree, so the text is lost to assistive tech. The generated 1px clip rule paints nothing yet stays in the tree.

Pattern library

Pick a ready-made pattern, or write free-form text below. Patterns render with the technique you choose.

Hidden text

Text a screen reader should announce

This is read aloud but never shown on screen. Write it the way you’d say it.

Hiding technique

RecommendedThe robust hand-written .sr-only rule — 1px box + clip-path. Works everywhere, no framework needed.

Options

Wrapping element

Live region (announce changes)

Wraps the text in role="status"/alert with aria-live so updates are spoken aloud.

display:none is not “visually hidden”

It’s tempting to hide text with display:none or visibility:hidden, but both remove the element from the accessibility tree — so screen readers skip it entirely, defeating the whole point. The robust pattern keeps the node in the tree while painting nothing: a 1px box with position:absolute, overflow:hidden, clip-path:inset(50%), and the legacy clip:rect(0 0 0 0) for old browsers.

When to reach for the focusable variant

A skip link should stay hidden until a keyboard user tabs to it, then appear on screen. That’s the sr-only-focusable / focus:not-sr-only pattern — only for interactive elements, never for a plain block of hidden prose.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Screen Reader Text Generator

How to Use

Key Benefits

Common Use Cases

Screen reader announces

CSS

Pattern library

Hidden text

Hiding technique

Options

display:none is not “visually hidden”

When to reach for the focusable variant

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Screen Reader Text Generator