Sometimes, content should be visually hidden. That means being hidden from the screen but at the same time being available to assistive technologies, such as screen readers.
We use visually hidden content to add meaning where the visual interface alone isn’t sufficient to convey it.
A simple example is an icon button. A magnifying glass may denote that a search mechanism is in place, but a screen reader needs text to function properly.
Here, the icon stays visible, but at the same time, we use text that gives the button a clear, accessible name. This means that a screen reader will announce “Search,” making it obvious to visually impaired users what the icon is intended for.
Note: An accessible name is a short descriptive label associated with a user interface element that assistive technologies, like screen readers, use to identify that element to users.
When You Should Use Visually Hidden Content
Use visually hidden content when visible design needs extra context for non visual users.
Good use cases include:
- labels for icon-only buttons
- skip links
- clarification for repeated links
- status messages for screen reader users
For example, several links may say “Read more” on screen. A visually hidden phrase can make each one clearer.
Now the link has more meaning for users who hear it out of context.
How to Hide Content
Use a visually hidden utility class:
This keeps the text available while removing it from the visual layout.
Incorrect hiding practice
A common mistake is using display: none for text that screen reader users still need.
Inserting this rule into our HTML will make span stop being visible for all users:
At first, this may look fine. The visual design shows only the icon. But the problem is that display: none removes the text from the accessibility tree in most cases. A screen reader may announce only: “Button.”
That is not helpful. The user knows it is a button, but not what the button does.
Note: The accessibility tree is a basic representation of the DOM tree that browsers use to provide information to assistive technologies, including screen readers.
As a rule of thumb, use display: none only when the content should be hidden from everyone.
Use visually hidden CSS, like the utility class shown earlier, when the content should be hidden visually but still available to screen reader users.
Common Mistakes
The biggest mistake is hiding text that all users need. If content helps everyone understand the page, make it visible. Another mistake is using hidden text to stuff keywords or mislead users. That is bad practice.
The only purpose of visually hidden content is to provide a better user experience for users of assistive technologies.
Final Thought
The technique of visually hidden content helps keep your interface clean while ensuring that assistive technologies receive the information they require. And doing so without affecting the visual layout.
Although my blog doesn’t support comments, feel free to reply via email or X.