consolelog.tools logo

Screen Reader Text Generator

Generate visually hidden text for screen readers (sr-only)

Generate Screen Reader Text

Common Patterns

Skip link that becomes visible when focused, allowing keyboard users to skip navigation

HTML

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

<!-- Later in the page -->
<main id="main-content" tabindex="-1">
  <!-- Main content -->
</main>

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-width: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  padding: 1rem;
  background: #000;
  color: #fff;
  z-index: 9999;
}

Best Practices

When to Use

  • •Icon-only buttons and links need text labels
  • •Provide additional context for form fields
  • •Announce status changes and notifications
  • •Add instructional text not shown visually
  • •Clarify generic link text like "Read more"
  • •Indicate required fields
View example
<!-- Icon button -->
<button type="submit">
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Submit form</span>
</button>

CSS Implementation

  • •Use position: absolute with specific dimensions
  • •Don't use display: none (screen readers skip it)
  • •Don't use visibility: hidden (screen readers skip it)
  • •Include overflow: hidden and clip for older browsers
  • •Add -focusable variant for skip links
View example
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

ARIA Live Regions

  • •Use aria-live="polite" for non-critical updates
  • •Use aria-live="assertive" for important/urgent messages
  • •Add role="status" for status updates
  • •Add role="alert" for error messages
  • •Use aria-atomic="true" to announce entire region
View example
<!-- Status update -->
<div role="status" aria-live="polite">
  <span class="sr-only">3 new messages</span>
</div>

<!-- Error alert -->
<div role="alert" aria-live="assertive">
  <span class="sr-only">Error: Form submission failed</span>
</div>

Common Use Cases

  • •Required field indicators
  • •Loading states
  • •Icon-only controls
  • •Pagination "current page" indicator
  • •External link indicators
  • •New window warnings
View example
<!-- Required field -->
<label for="name">
  Name
  <span class="sr-only">(required)</span>
  <abbr title="required" aria-hidden="true">*</abbr>
</label>

<!-- External link -->
<a href="https://example.com" target="_blank">
  Visit Example
  <span class="sr-only">(opens in new window)</span>
</a>

Things to Avoid

  • •Don't duplicate visible text exactly
  • •Don't use for large amounts of text
  • •Don't hide critical information from sighted users
  • •Don't use instead of proper ARIA attributes
  • •Don't forget to test with actual screen readers

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Frequently Asked Questions - Screen Reader Text Generator