Visually hidden heading
Learn to write headings and text only for screen readers.
What is hidden text?
Sometimes an element has no visible text, or very little. A <button> holding only an arrow icon (→) says 'next' to a sighted user, but a screen reader just hears 'arrow'. Hidden text fills that gap: it is hidden visually but read aloud.
This technique is called visually hidden, or by its class name sr-only. Its goal is to strengthen the accessible name.
How to write the sr-only class
To add hidden text, put the text inside a <span> and add class="sr-only". Important: sr-only is not an HTML feature but a CSS class; for it to work, your page must include a <style> block defining it (for example .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }). Without the CSS, the text stays visible and the trick fails.
Example: <button>→<span class="sr-only">Next</span></button>. A sighted user sees only the arrow, while a screen reader says 'Next'. Use this for icon buttons and any extra description that must be hidden from the eye.
Exercise Add an sr-only span to an icon button
Add a <button> to body. Put an arrow icon → as the visible text. Inside the button add a <span class="sr-only"> with the text Next.
Show example solution
<body>
<button>→<span class="sr-only">Next</span></button>
</body>Test yourself
-
When do you add an sr-only span to an icon button?
- When the button's text is long enough
- When the button's colour is pale
- When the button is very small
- When the button has only an icon
Show answer
When the button has only an icon — Correct. Buttons with only an icon need a name for screen readers.
-
Add sr-only to an icon button
<button>→<span class="____">Next</span></button>Show answer
<button>→<span class="sr-only">Next</span></button> -
Match each technique to its purpose
- sr-only
- Hides text visually
- aria-label
- Writes a short name directly
- aria-describedby
- Links an extra description
- role
- States the role