A11y Lablearn by doing
0/20

Hiding · 10

Choose four hiding techniques

Visually hidden, unrendered, and accessibility-hidden content are not interchangeable.

What to do

  1. Keep the first note in the accessibility tree inside a tiny clipped box.
  2. Hide the second with display: none and the fourth with the hidden attribute.
  3. Keep the third visibly boxed but remove it from the accessibility tree with aria-hidden.
/index.html
Preview
updating…

Result

Run the checks

Edit the HTML and select “Check solution”. The preview updates automatically.

If you are stuck

Only the visually-hidden technique keeps content exposed while reducing its rendered box to about one pixel.

Read the exact rule or pattern

Exercise 10 of 20

axe-core

Automated audit