Hidden text plays a common role in web design and development. It refers to text that exists in the code but is not visible on the screen. But how does this affect users who rely on screen readers? In this article, we’ll explore how different methods of empty text impact accessibility, especially for screen reader users—and how to do it the right way.
What is Hidden Text?
Hidden text is content that is present in the HTML of a webpage but is not shown to users visually. Developers use various CSS and HTML techniques to hide text for design or accessibility purposes.
Common ways text is hidden:
- display: none; – removes the element completely from both view and accessibility
- visibility: hidden; – hides the element but keeps its space reserved
- opacity: 0; – makes the element fully transparent
- position: absolute; left: -9999px; – moves text far off-screen
- .sr-only class – hides the text visually but keeps it accessible to screen readers
How Screen Readers Work
Screen readers are tools used by visually impaired users to hear the content of web pages. These tools interpret the structure and content of the HTML and convert it into speech. Whether or not screen readers can read hidden text depends on how it’s hidden in the code.
How Different Hiding Methods Affect Screen Readers
1. Using the .sr-only Class
This is the best method for hiding text from sighted users while keeping it accessible to screen readers. It’s widely used to provide extra context or instructions only for assistive technology.
Use case: Labels for icons, form buttons, or navigation aids like “Skip to content”.
Result: Text is not visible to users but is read by screen readers. Highly recommended for accessibility.
2. Using display: none or visibility: hidden
These styles remove content not just from the visual layout but also from the accessibility tree. That means screen readers cannot detect or read the text.
Result: Hidden from both users and screen readers. Not recommended when the content is important for accessibility.
3. Using Off-Screen Positioning (left: -9999px)
This technique visually hides the text by moving it far off the screen. The content still exists in the DOM, so screen readers can access and read it.
Result: Works with screen readers. Technically acceptable, but .sr-only is the cleaner, more standard method.
When Should You Use Hidden Text for Screen Readers?
Use hidden text when you want to provide extra information or clarification that isn’t necessary for sighted users, but is important for screen reader users.
Common examples include:
- Describing icons or buttons that lack text
- Labeling form fields for assistive technologies
- Adding navigation shortcuts like “Skip to main content”
What You Should Avoid
- Hiding keywords just for SEO purposes. This is considered a black-hat tactic and can lead to penalties from search engines.
- Adding hidden text that misleads users or screen readers.
- Using improper hiding methods that unintentionally block access for assistive tech.
Best Practices Summary
| Hiding Method | Visible to Users | Read by Screen Readers | Recommended Use Case |
| .sr-only | No | Yes | Accessibility labels and screen reader-only content |
| display: none | No | No | Remove content completely |
| visibility: hidden | No | No | Temporarily hidden elements |
| left: -9999px | No | Yes | Works, but better to use .sr-only |
Conclusion
If your goal is to make your website accessible to all users for caracter invisible—including those who use screen readers—then how you hide text matters. Use techniques like .sr-only when hiding content for visual users but keeping it available for screen readers. Avoid using display: none or visibility: hidden for important content that needs to be read. Good accessibility practices don’t just improve user experience; they also help your website meet standards and perform better overall.
