As a web developer, you want your website to be usable by everyone, including people who rely on assistive technologies. These technologies—such as screen readers, braille displays, and speech recognition software—can help individuals with disabilities navigate the web more easily. Sometimes, you may need to hide certain parts of your webpage visually without hiding them from these tools. However, doing this incorrectly can cause big accessibility issues.
In this article, we’ll explore how to effectively hide and manage hidden content for people using assistive technologies. We’ll discuss why display: none is problematic, how to use the clip pattern, and how attributes like aria-hidden and hidden can help. By the end, you’ll have a better understanding of how to ensure your website remains inclusive and user-friendly.
The Problem with display: none
When you use display: none in your CSS, you remove an element from the visual flow of the page. This means sighted users will not see it. But, it also means the element is completely invisible to assistive technologies such as screen readers. If you’ve hidden important text or controls this way, users who rely on assistive technologies might miss out on content or functionality that they need.
For example, imagine you have a button that visually looks like an icon, but you hide the text label using display: none. Now, people who can see the icon know what the button does, but people using assistive technologies hear nothing. This creates a poor user experience and makes your site less accessible.
The Clip Pattern: A Better Approach
To visually hide content while keeping it available to assistive technologies, the clip pattern is a popular solution. The idea is to position the element off-screen so sighted users don’t see it, but screen readers can still find it. Here’s an example:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}By applying the .visually-hidden class to your element, you ensure it’s hidden visually but remains accessible to assistive technologies. This makes the content discoverable by screen readers, letting users who can’t see the screen still benefit from it.
Why the Clip Pattern Works
This pattern relies on moving the element so it’s not visible in the viewport and restricting its size to 1px by 1px. With clip: rect(0, 0, 0, 0); (or clip-path in modern CSS), the browser cuts off any visual display. Yet, the element remains in the Document Object Model (DOM), meaning assistive technologies can still access it. That’s the key difference between this and display: none.
Managing Visibility with aria-hidden and the hidden Attribute
Beyond CSS, there are HTML and ARIA (Accessible Rich Internet Applications) attributes that also control how content is shown to both users and assistive technologies. Two important attributes here are aria-hidden and the HTML5 hidden attribute.
aria-hidden="true"
When you add aria-hidden="true" to an element, you’re telling assistive technologies not to read or announce that element to users. This is handy for decorative images or redundant content. For instance, if you have a background image that doesn’t provide important information, you could mark it with aria-hidden="true" so screen readers ignore it.
But be cautious: if you need an element to be read by assistive technologies, do not use aria-hidden=”true”. This attribute will block that element from being announced entirely.
<div aria-hidden="true">
<img src="decorative-image.jpg" alt=""/>
</div>HTML5 hidden Attribute
The hidden attribute is another way to remove content from everyone—both sighted users and assistive technologies. When you use it, browsers typically hide the element. Screen readers will also skip it. This is good if the element is meant to be inaccessible to all users, like a form section that’s not yet relevant or a menu item that’s not available.
<div hidden>
<p>This content is hidden from all users.</p>
</div>Use hidden or aria-hidden when you truly want to exclude an element from assistive technologies. If you want it hidden visually but still available to screen readers, you should stick with the clip pattern or .visually-hidden approach.
Best Practices for Accessible, Visually-Hidden Content
1. Use Semantic HTML
Using proper semantic HTML elements (like <nav> for navigation, <main> for main content, or <section> for thematic grouping) is important for clear structure. It helps assistive technologies interpret your content correctly. Semantic HTML also reduces the need for extra attributes and complex styling, since the markup itself conveys meaning.
2. Avoid Hiding Focusable Elements
If an element can receive focus (like links, form inputs, or buttons), think carefully before hiding it. A hidden yet focusable element can be confusing for keyboard-only users, since it might get focus without being visible. If you must hide a focusable element, consider removing it from the tab order by using tabindex="-1" or ensuring it’s properly revealed at the right time.
For example, if you have a pop-up form that appears only after a button click, you can initially hide it with the clip pattern. Once the user clicks, you can remove the clip pattern or switch the CSS to show the content. This way, the form becomes available to both sighted users and people using assistive technologies at the same time.
3. Provide Context for Hidden Content
Sometimes you want to reveal hidden content dynamically (like a drop-down menu). In these cases, use ARIA attributes such as aria-expanded and aria-controls to inform assistive technologies that a certain part of the page is now visible or hidden. This can help screen reader users understand changes on the page.
<button aria-expanded="false" aria-controls="menu" id="menuButton">
Toggle Menu
</button>
<nav id="menu" class="visually-hidden">
<!-- Menu items go here -->
</nav>When you click the button, you can toggle its aria-expanded value from false to true, and remove the .visually-hidden class from the menu. This ensures that both visual and non-visual users know the content has been revealed.
4. Test with Multiple Assistive Technologies
It’s important to test your website with different assistive technologies because each one may behave slightly differently. Popular screen readers include NVDA, JAWS, and VoiceOver. Don’t forget to check on both desktop and mobile devices. Regular testing can help you catch accessibility issues before your users do.
Handling Localization
If you’re translating your site into multiple languages, remember that hidden text might also need translation. For example, your .visually-hidden text for instructions or links should be available to screen readers in every supported language. Make sure your language attributes (like lang="en") are correct, and consider cultural differences that could impact how you label hidden elements.
For instance, if you have an English site and a Spanish site, your hidden instructions should be translated into Spanish on the Spanish version. This ensures that users relying on assistive technologies can access the content in the correct language.
Putting It All Together: A Quick Example
Let’s look at a simple example of an accessible button that has visually hidden text:
<button class="icon-button">
<span class="visually-hidden">Submit Form</span>
<img src="icon-submit.png" alt="" aria-hidden="true" />
</button>- The
.visually-hiddenclass hides the text “Submit Form” from sighted users, but screen readers can still read it. - The
<img>tag includes an emptyaltattribute andaria-hidden="true", so assistive technologies ignore the image itself. - Sighted users see only the icon, while screen reader users hear “Submit Form.”
This example keeps your content accessible to people using assistive technologies and also meets visual design needs.
Additional Resources
- Web Content Accessibility Guidelines (WCAG): A detailed guide on making web content accessible.
- WAI-ARIA Authoring Practices: Official tips on using ARIA roles, states, and properties.
- MDN Web Docs on ARIA: In-depth explanations of ARIA attributes and best practices.
Exploring these resources will help you master hiding content effectively, ensuring people who use assistive technologies can still access everything they need.
Conclusion
Hiding content from sighted users while keeping it accessible to assistive technologies is an essential skill for modern web developers. By avoiding display: none for important information, using the clip pattern for visually hidden content, and carefully leveraging aria-hidden or hidden, you can ensure everyone has a good experience on your site.
Remember to keep the following points in mind:
- Use the clip pattern (
.visually-hidden) to hide content from sighted users but keep it readable by assistive technologies. - Use
aria-hiddenandhiddenonly when you truly want to hide content from all users, including those using assistive technologies. - Pay attention to focusable elements, making sure you don’t accidentally trap keyboard users in hidden sections.
- Test frequently with various tools and real users to ensure your hidden content behaves as you expect.
- Localize your hidden text so that people using assistive technologies in other languages can also benefit.
By following these guidelines, you’ll be well on your way to building inclusive websites that work for everyone. Your careful attention to accessibility shows that you value all your users, regardless of their abilities or the assistive technologies they use. Embracing these practices will help ensure a positive, welcoming, and user-friendly experience across the board.