A11y tips: hide elements for all users

To hide content for all users (sighted, screen reader and keyboard) there are several techniques that we can use with some differences between them:

HTML attribute hidden

The item and everything it contains is removed from view for the user, from the accessibility tree, and from the tab order. It's as if it doesn't exist in HTML: you can't see it, the screen reader doesn't announce anything, and you can't tab to it.

As Monica Dinculescu points out, using the hidden attribute to hide an element can cause problems when interacting with our CSS, but at the same time she proposes a solution.

<div hidden>
  <p>This content won't be shown</p>
</div>

CSS display: none

It has the same effect as the previous one, with the only difference that here we need the CSS to be loaded so that the element is hidden, while with the hidden attribute the element will never be shown no matter there is CSS.

<div style="display: none;">
  <p>This content won't be shown</p>
</div>

CSS visibility: hidden

The effect is the same as the previous ones with the difference that here the element is hidden from sighted users but maintaining its dimensions (width and height), with which an empty space appears that does not show anything, neither the element nor its content.

<div style="visibility: hidden;">
  <p>This content won't be shown but it'll take up space</p>
</div>