Go back Solution

2.2. Hidden elements

Introduction

Nowadays, a lot of content is hidden on a page until it's necessary: menus, drawers, dialogs, tooltips… you name it!

When we hide content visually, we must remember to hide it completely. Otherwise, those elements are still accessible, even when invisible.

This mistake can confuse and frustrate 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;

<!-- Even invisible, "Get started" can be clicked / focused -->
<div style="opacity: 0">
  <button>Get started</button>
</div>

To completely remove the interaction, we need to use the attribute inert. This tells the browser to "ignore" the elements inside as if they didn't exist.

<!-- With `inert`, we cannot interact with the child button -->
<div style="opacity: 0" inert="true">
  <button>Get started</button>
</div>

Exercise

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

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

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

Hint 2: The attribute inert lacks browser support, so we need the inert polifyll.

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

Bonus

1. CSS transitions

This bonus is not about A11Y, it's about CSS transitions. I highly recommend you to pair with your group to explore this one!

The text "Here's a random article." has a fade-in/fade-out transition done with CSS opacity and transition.

Assuming you solved the A11Y exercise correctly, you've added visibility:hidden; to the element when it's hidden. But wait… now the fade-out transition is gone!

Goal: Ensure the fade-in and fade-out transitions work as before. This can be solved with only CSS.

Hint: In Chrome, go to "More tools > Animations". This panel helps you to inspect animations and find a solution.

🍀 Toggle CSS hint #1 CSS transitions have multiple properties. We can use them to better control how the transition happens.

🍀 Toggle CSS hint #2 Check transition-delay. With that we can better control when the visibility happens.

Further reading

WCAG Success Criterion

Exercise takeaways

(After the exercise) Reveal takeaways