Go Back

2.2. Hidden elements

Introduction

With the evolution of clean and focused design approach, we tend to hide the information until it's absolute necessary. That means the internet is full of hidden secrets behind diverse animated components: menus, drawers, modals, tooltips… you name it!

Sometimes when we hide content visually, we forget to hide them completely. When this happens, the interactive elements are still accessible, even when invisible. This will cause confusion and frustation for those who lose track of the focus indicator while navigating the page.

These are common ways to hide content:

/* Visually hidden but accessible by keyboard */
opacity: 0;

/* Completely hidden: visually and by keyboard */
display: none;
visibility: hidden;

In some cases we can't avoid avoid using opacity to visually hide some content. In those cases, we can use the attribute inert. This will tell the browser to "ignore" the elements inside as if they didn't exist.

<!-- Even invisible, "Get started" can be clicked / focused -->
<div style="opacity: 0">
  <button>Get started</button>
</div>
<!-- With `inert`, we cannot long interact with "Add to cart" -->
<div style="opacity: 0" inert="true">
  <button>Get started</button>
</div>

Exercise

In the exercise page, there is a Menu that can be toggled through a <button>. Use your keyboard to navigate through the page. You'll notice the links inside the menu are still accessible even if the menu is hidden.

🎯 Goal: Make the interactive elements only accessible when visible.

Note: The attribute inert lacks browser support, so we need to add a inert polifyll.

<!-- Include the inert polyfill at the bottom of the page -->
<script src="../assets/polyfill-inert.js"></script>

Hint: Use Accessibility Insights "Tab Stops" feature to detect errors within interactive elements.

Notes