The different ways you can hide elements in HTML and how it impacts your users

When and why you may need to hide an element from the user

During the design process, there might be times when you need to keep certain elements hidden from users for design, user experience, or accessibility reasons. For example, you may want to keep a modal box hidden until it's triggered, display a drop-down menu only when it's focused, or hide repetitive components from screen readers to avoid redundancy.

Choosing the right technique is the key to balancing usability and accessibility. Understanding when and how to use each technique ensures that hidden content doesn't disrupt the user experience or add an accessibility barrier for those using assistive technologies.

Removing an element with the display property

Setting an element to display: none in CSS is one of the most effective ways to remove it from the page. This method not only hides the element visually but also removes it from the DOM, making it entirely inaccessible to assistive technologies like screen readers.

.element { display: none; }

Using the display property hides the element both visually and to screen readers

Rendering an element transparent with the visibility and opacity properties

In CSS, you can make an element invisible while still reserving its space in the layout by using either the visibility or opacity properties. With visibility: hidden, the element is hidden but still takes up space in the layout. With opacity: 0, the element remains fully transparent, retains its space, but is still interactive, meaning it can still be clicked or focused on, which can be useful depending on the design needs.

This is useful when you want to hide elements without causing the surrounding content to reflow, while still making the content accessible to assistive technologies. It can be particularly helpful maintaining a stable layout while showing or hiding elements based on user interactions.


								.element { visibility: hidden; }

								.element { opacity: 0; }

Using the visibility property only hides the element visually but not to screen readers

Hiding an element off-screen with positioning

When you need an element to be accessible to screen readers but hidden visually, you can move it off-screen, beyond the viewport. This technique allows the element to remain in the DOM and be interacted with, even though it's not visible.

It's particularly useful for providing additional instructions or tools for screen reader users. For instance, "Skip to content" links often use this method, staying hidden until focused on by a user tabbing through links, at which point they move into view.

There are a few ways to achieve this, but the following is one of the most popular techniques.


								.hidden {

								    border: 0;

								    clip: rect(0 0 0 0);

								    height: 1px;

								    margin: -1px;

								    overflow: hidden;

								    padding: 0;

								    position: absolute;

								    width: 1px;

								    }

Moving elements off screen only hides them visually but not from screen readers

Removing an element from the accessibility tree with aria-hidden

Using aria-hidden is a powerful way to remove an element from the accessibility tree without affecting its visual appearance or the DOM. ARIA, or Accessible Rich Internet Applications, is a set of attributes designed to improve web accessibility.

The aria-hidden attribute specifically tells assistive technologies, like screen readers, to ignore the content of the element and its children. This is particularly useful for hiding non-essential or repetitive content, like icons, from screen readers while keeping the visual design intact.

<span aria-hidden="true">

Using aria-hidden only hides the element from screen readers and not visually

Key takeaways

It's important you use the right technique so you're not depriving users of important information or, alternatively, exposing them to information that's not relevant.

Use display: none to completely remove an element, both visually and from the DOM.
Use visibility: hidden to only remove the element visually, retain the space it would have taken, but remove its interactivity.
Use the opacity: 0 to remove the element visually, retain the space it would have taken, but keep interactivity.
Use off-screen positioning to hide an element visually while keeping it accessible to screen readers.
Use aria-hidden to hide an element from screen readers but leave it visible.