Hide text visually while keeping it available to screen readers. Generate a robust sr-only class, a focusable variant and real-world HTML patterns with a live preview.
Runs entirely in your browser. Nothing is uploaded to any server.
Icon buttons and vague links like "Read more" need extra words that sighted users infer from the layout.
The extra text is announced by assistive technology without changing your design.
Text hidden with display:none or visibility:hidden is removed for screen readers too; the sr-only technique keeps it.
The class shrinks the element to a single pixel, clips it so nothing is painted, hides overflow and removes it from normal layout with absolute positioning. Screen readers still read the text because it remains in the accessibility tree. white-space:nowrap prevents some screen readers from reading clipped text word by word.
The focusable variant hides the element only while it does not have focus, so it becomes visible when a keyboard user tabs to it. That is the right choice for skip links. Avoid putting interactive elements inside a plain sr-only container, because users would focus something they cannot see.
clip-path:inset(50%) plus the older clip property for broad support.
Becomes visible on focus, ideal for skip links.
Decorative SVG icons get aria-hidden="true" so only the hidden label is read.
They achieve similar results. aria-label replaces an element's content for assistive technology, while sr-only text adds real text to the content, which also works with translation tools and is copied with the page.
display:none and visibility:hidden hide content from everyone, including screen reader users.
It prevents other styles, such as component padding or positioning, from accidentally making the hidden text visible. Turn it off if your CSS architecture avoids !important.
No. It is a simplified approximation; real screen readers differ in wording and punctuation. Always test with an actual screen reader.
Yes. Without a leading space some screen readers run the words together with the visible text.
More free tools from My Panda Toolbox.