On hiding content

Sometimes you want parts of your page to be invisible. For example, because all of your application is on a single page. The hidden attribute in the HTML standard is made for this. In this post I will explain how the attribute works, how it differs from [aria-hidden] and how it relates to just hiding with CSS.

What it is

This may be somewhat superfluous, but let’s start with looking at what ‘hidden’ means. Other than ‘not visible’, it also indicates that an element is not relevant.

For modern websites, think of “not relevant” as no longer relevant, or not yet relevant. There’s a thing in your HTML structure, it is not in view and users cannot do anything with it. It just sits there, waiting to be consumed by some script.

How the hiding works

There is a part of the HTML spec that recommends what browsers should include in their built-in stylesheets. For elements with the hidden atribute, it prescribes using display: none. Interestingly, this means hidden elements are treated the same as elements like head, script and title: not displayed (not usually, anyway).

Most browsers do this, but it takes little effort to set it explicitly in your CSS:

[hidden] { display: none; }

It then works not only in browsers that have the above lines in their built-in stylesheet, but also in all others (that understand attribute selectors). I would recommend doing this. By default, most browsers also set elements with hidden="false" to display: none, so when something should no longer be hidden, best just remove the attribute, rather than changing its value.

aria-hidden vs hidden

There is also a aria-hidden attribute. It differs in default behaviour: an element with aria-hidden is hidden from (just) screen readers, an element with hidden is hidden from all modalities, including screen readers.

Their default visibility seems to be the only difference, as both attributes will take the element out of the accessibility tree.

If you want nobody to be able to interact with a part of your page, I would recommend using the hidden attribute. This also follows the first rule of ARIA: “Don’t use ARIA if there is a native HTML alternative”. In any case, best don’t use both at the same time, as that approach is known to cause conflicts.

Hiding with attributes vs hiding with CSS

Is invisibility not just a visual thing, you might wonder? Why bother with an attribute if all the browser does is use CSS anyway?

In addition to it being a visual thing, hidden content is also a semantic thing. It describes not just what something looks like, it describes the thing’s meaning within the page structure. Therefore, it still makes sense to use the attribute over the styling.

More information

• Marcy Sutton did a great screencast showing different ways of hiding content including a demo of how they play out in screenreaders
• The hidden attribute in the HTML spec. See also the part about the inert attribute and how it differs from hidden.
• Steve Faulker’s hidden content test results