Three ways to hide something in HTML

Hidden from the eye, hidden from the reader, or hidden from both. Pick deliberately.

<p hidden>Not rendered, not announced.</p>

<span aria-hidden="true">&rarr;</span>
<a href="/next">Next step</a>

<button type="button">
  <span class="visually-hidden">Delete the July report</span>
  <svg width="16" height="16" aria-hidden="true">
    <use href="#icon-trash"/>
  </svg>
</button>

<p><span class="visually-hidden">Warning: </span>Disk almost full</p>

How it works

1. hidden removes it from the page for everyone.
2. aria-hidden="true" hides it from readers while it stays visible.
3. A visually-hidden class keeps it for readers and takes it off the screen.

The run, in numbers

Lines

13

Characters to type

358

Tokens

94

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 75 seconds.

Type this snippet

Step 2 of 4 in Focus and visibility, step 10 of 15 in Accessible HTML.

← Previous Next →