Accessibility and Hiding Content with HTML and CSS

February 17, 2000

//import HiddenContentWidget from ‘./HiddenContentWidget’;

Conditionally hiding and showing content is a common practice in websites with rich interactions. There are a few ways to toggle presentation on the page and it’s important to understand how each works and what side effects they have, especially with respect to how assistive technologies interpret hidden content.

To demonstrate, let’s take a look at a simple link component.

Here is some <a href="#" id="link-to-hide">hidden</a> content.

Here is some hidden content.

The Basics of Hiding Content

There are quite a few methods for hiding an HTML element, many of which are rooted in manipulating CSS properties. Let’s focus on a few of those properties and what they default to by examining our “hidden” link.

Let’s hop into the browser’s developer tools (cmd+option+I on Mac, ctrl+shift+I on Windows) and use the console to find out some information about the “hidden” link while it’s still visible.

We can access our link with document.querySelector("#link-to-hide"). Let’s assign it to a variable so we can continue to gather information.

const link = document.querySelector('link-to-hide')

Now let’s look at the style of our link.

const style = window.getComputedStyle(link)

This gives us a CSSStyleDeclaration object that looks unweildy if we print it out raw, but is powerful if we know what we’re looking for.

`display`

Let’s take a look at our link’s display property. display controls the display type (e.g. block or inline) of our element and the layout its children are displayed in (e.g. flow, grid, flex, or even table). The value that would hide our element is none, but we’ll save that for later.

style.display //outputs "inline"

The default value here is inline, meaning our element does not generate line breaks before or after itself and is not hidden by default.

`opacity`

Now let’s look at our link’s opacity. Opacity values run from 0 (totally transparent) to 1 (totally opaque). An opacity value less than 1 places the element in a new stacking context, which is a three-dimensional conceptualization of HTML elements along the z-axis, towards the user. Stacking context can be manipulated a number of ways, but most directly through the z-index CSS property.

style.opacity //outputs "1"

The default value here is 1, meaning our element is completely opaque by default.

`visibility`

Visibility has three possible values: visible, hidden, and collapsed. I’d hazard a guess that our element defaults to visible.

style.visibility //outputs "visible"

Getting Fancy

Beyond changing

We’ll conditionally hide it when we press a button. Try it!

Visually we can see the button disappear from the page and no space is reserved for the button when it’s hidden. You can no longer click the link or tab to it using your keyboard. The sentence reads “Here is some content.” But what does the DOM tree look like? If you inspect the element using developer tools by right clicking and selecting “inspect” from the menu

There are two important questions you should ask yourself when hiding content in order to determine the most effective method to use:

1. Should the element still be present in the DOM tree?

Should this element still appear in the HTML markdown? Should it still be interactive even though it isn’t visually shown?

2. Should the element be present in the accessibility tree?

The accessibility tree is a subset of the DOM tree that contains metadata about each of its elements so that assisive technology can use accessibility APIs to accurately describe what is on the page. I highly recommend reading this article by Hidde de Vries, which goes into detail about how it works and why it’s important in a really approachable way. The accessibility tree ignores non-semantic elements like wrapper divs and spans

Let’s look at the example above and see if we can answer those two questions.

Let’s go through some techniques for hiding content and test how they affect the DOM tree and accessibility tree.

We’ll take a link and apply each technique and examine what’s happening in your browser. We’ll be using the Accessibility tab in Chrome’s developer tools (open using cmd + option + I).

`visibility: hidden`

visible link
invisible link

If you inspect the second link above, you’ll see that it still shows up in the DOM tree but that you can’t tab to it or interact with it. You’ll also notice that the space it would normally take is not saved. It is removed from the accessibility tree.

`display: none`

visible link
invisible link

`opacity: 0`

visible link
invisible link