2.2. Hidden elements
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>
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.