ClientSideTools Privacy-First Browser Tools

Screen Reader Text (`sr-only`) Generator & Tester

Generate robust visually hidden CSS and audit hidden-content techniques without sending your markup to a server.

Web Accessibility Local processing HTML and CSS are analyzed locally.

Generator and tester

Generate visually hidden CSS

Test hidden-content patterns

Audit results

Generate CSS or test pasted HTML and CSS.

Findings

    Introduction

    Visually hidden text is commonly used to provide extra context to screen reader users without adding visual noise. However, fragile hiding techniques can make content inaccessible, unexpectedly focusable, or completely hidden from assistive technology.

    This tool generates a robust visually hidden utility and helps audit existing markup for common mistakes.

    How it works

    The generator creates a standard visually hidden CSS pattern using clipping, one-pixel dimensions, overflow hiding, and nowrap behavior. The tester parses pasted HTML and CSS locally, then looks for accessible hidden-text patterns and risky hiding techniques.

    • Scripts are not executed.
    • Pasted markup is analyzed in an inert document.
    • CSS selectors are inspected for hidden-content declarations.
    • Elements are checked for hidden attributes, aria-hidden misuse, and focusability.

    How to use

    1. Choose a class name.
    2. Generate and copy the CSS utility.
    3. Paste your HTML and CSS into the tester.
    4. Run the audit.
    5. Review findings and fix risky hiding techniques.

    Practical example

    A skip link can be visually hidden until focused: 

    <a class="sr-only-focusable" href="#main">
  Skip to content
</a>

    The generated focusable variant hides the link by default and reveals it when it receives keyboard focus.

    Use cases

    • Creating screen-reader-only labels for icon buttons.
    • Building accessible skip links.
    • Auditing design-system utility classes.
    • Finding content accidentally hidden from assistive technology.
    • Reviewing legacy CSS hiding techniques.

    Best practices

    • Use a well-tested visually hidden utility instead of ad-hoc hiding.
    • Do not use display: none for content that should remain in the accessibility tree.
    • Avoid hiding focusable elements unless they are truly inactive.
    • Use aria-hidden="true" carefully and never on focusable content.
    • Test skip links with a keyboard.

    Common mistakes

    • Using visibility: hidden when content should still be announced.
    • Using negative text-indent without overflow control.
    • Hiding only part of a link label.
    • Making an element visually hidden but still focusable without a reveal state.
    • Placing aria-hidden="true" around interactive controls.

    Limitations

    • The tester uses heuristic CSS analysis.
    • It cannot simulate every screen reader’s behavior.
    • Complex selector matching may be limited in an inert document.
    • Real assistive technology testing is still required for conformance work.

    Browser compatibility

    The generated CSS uses widely supported techniques. The tool itself works in current versions of major browsers.

    FAQ

    Is my markup uploaded?

    No. HTML and CSS are analyzed locally in your browser.

    Is sr-only content read by screen readers?

    When implemented correctly, visually hidden text remains in the accessibility tree and is announced by screen readers.

    Should I use display: none for screen-reader text?

    No. display: none removes content from the accessibility tree, so it will usually not be announced.

    Does this prove screen reader compatibility?

    No. It helps catch common implementation mistakes, but actual screen reader testing is still necessary.

    References

    Version and changelog

    • Version: 1.0.0
    • Last updated: August 8, 2026
    • Changelog: Initial production release.