Using Hidden Content in an Accessible Way

Sometimes web developers will use HTML attributes or CSS properties to visually hide elements on a webpage. The reasons for this vary widely, but it is always important to ensure that a high level of accessibility is maintained. ​
​

Several techniques can be used to hide content on a webpage. Some of them will still leave the element "visible" to a screen reader, however. Whether it would be more accessible to also remove the element from the accessibility tree really depends on the situation. Let's look at a few examples.

The aria-hidden attribute is a property that indicates whether an element is visible or hidden to assistive technologies such as screen readers. When set to "true", it hides the element from assistive technologies while remaining visible to sighted users.
​
The following code snippet shows how this attribute may be used:

​<div aria-hidden="true">

This content is hidden from assistive technologies.

</div>

While aria-hidden="true" can be useful for hiding decorative or redundant content from assistive technologies, its misuse can lead to accessibility issues. Important content hidden with this attribute may become inaccessible to users who rely on screen readers.

The display: none CSS property removes an element from the normal document flow and hides it from both sighted users and assistive technologies. It is most typically seen written as inline CSS in the HTML document.

The following code snippet shows how this property may be used:

​<div style="display: none;">

This content is hidden from both sighted users and assistive technologies.

</div>

Using display: none can effectively hide content from all users, including those with disabilities. However, it should be used carefully, ensuring that essential content is not inadvertently hidden from assistive technologies.

The visually-hidden technique hides content visually but ensures it remains accessible to screen readers by positioning it off-screen or setting its dimensions to zero.

The following code snippet shows how this technique might appear in the HTML document:
​

<div class="visually-hidden">

This content is visually hidden but accessible to screen readers.

</div>

and in the CSS file:

.visually-hidden {

position: absolute !important;

height: 1px;

width: 1px;

overflow: hidden;

clip: rect(1px, 1px, 1px, 1px); /* Clip the element to make it effectively invisible */

white-space: nowrap; /* Prevent wrapping */

}

The visually-hidden technique provides a balance between hiding content visually and maintaining accessibility. By positioning content off-screen or setting its dimensions to zero, it remains accessible to screen readers while remaining visually hidden.

Using role="presentation" or "none" on an element will remove the innate ARIA semantics assigned to the element from the accessibility tree.

The element’s content will remains available to assistive technologies, but the semantic meaning of the container element — and in some cases, its required child elements — will no longer be mapped to the accessibility API.

There are many ways to approach hidden content, but it is crucial to always consider its impact on web accessibility. For more on this topic and additional code examples, check out this article from Indiana University on Hidden Content and Web Page Accessibility.