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

Next lesson: Skip link

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies