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 attributehidden

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.

AsMonica Dinculescu points out, using thehidden 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>

CSSdisplay: none

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

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

CSSvisibility: hidden

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

<div>  <p>This content won't be shown but it'll take up space</p></div>