aria-hidden vs hidden
Written byPhuoc Nguyen
Created
06 Oct, 2023
Category
HTML
Tags
Accessibility, ARIA
ARIA attributes are essential for web accessibility as they help make web content more usable for people with disabilities. Two commonly used ARIA attributes are
`aria-hidden` and `hidden`. While both attributes hide content from screen readers and other assistive technologies, they serve different purposes.In this post, we'll explore the differences between
`aria-hidden` and `hidden` and determine which one suits your needs. Let's dive in!#The hidden attribute
The
`hidden` attribute is an HTML feature that hides an element from view. It's great for hiding unnecessary content that doesn't add value for the user. You can apply it to any HTML element and use CSS to make it visually disappear.Here's an example of how to use the
`hidden` attribute:html
<div>
<h2>Some Heading</h2>
<p hidden>Some text that is not relevant to the user</p>
</div>In this example, the paragraph element is hidden from view, yet it still exists in the DOM.
#The aria-hidden attribute
The
`aria-hidden` attribute is an ARIA attribute that tells assistive technologies, such as screen readers, that an element and its content are not important for the user to view or interact with. It works differently from the `hidden` attribute, which hides content from all users.Here's an example of how you can use the
`aria-hidden` attribute:html
<div>
<h2>Some Heading</h2>
<p aria-hidden="true">
Some text that is not relevant to the user
</p>
</div>In this example, the paragraph element is not accessible to screen readers, but it can still be seen by the user.
#The differences
Although both
`aria-hidden` and `hidden` are used to hide content, they serve different purposes. The `hidden` attribute is an HTML attribute that hides an element from view, while the `aria-hidden` attribute is an ARIA attribute that indicates an element and its content are not relevant for the user to view or interact with.The key difference between these attributes lies in their target audience. The
`hidden` attribute hides an element from both sighted users and assistive technologies, whereas the `aria-hidden` attribute only hides an element from assistive technologies like screen readers.Another significant difference between these attributes is how they affect the DOM flow. When an element is hidden using the
`hidden` attribute, it is completely removed from the DOM flow, causing other elements to move up to fill the empty space. However, when an element is hidden using the `aria-hidden` attribute, it remains visible on the page for sighted users but is hidden from assistive technologies. This means that elements after it will not be affected and will remain in their original position in the DOM flow.#Deciding between aria-hidden and hidden
Choosing between the
`aria-hidden` and `hidden` attributes can be tricky. Generally, use `aria-hidden` to hide an element from assistive technologies like screen readers. Use `hidden` to hide an element from both sighted users and assistive technologies.But it's not always so straightforward. Consider a button that triggers a modal dialog box. The dialog box should be hidden from assistive technologies when closed, but it should also be hidden visually from sighted users. In this case, you need to use both attributes.
#When to use both attributes together
In some cases, it may be necessary to use both the
`aria-hidden` and `hidden` attributes. Here are some examples:#Show/hide password button
A common example where both attributes are used is a "show password" button in a login form. Initially, the password field is hidden from view using the
`hidden` attribute since it's not relevant until the user clicks on the "show password" button. Once the user clicks the button, the password field becomes visible. However, to hide it from screen readers, it should also have an `aria-hidden="true"` attribute.html
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" hidden aria-hidden="true">
<button type="button" onclick="togglePasswordVisibility()">Show Password</button>
</div>#Tabs navigation
Tabs navigation is a common feature in user interfaces, where only one tab is visible at a time while others remain hidden. But, it's crucial to mark the content of inactive tabs with both attributes to ensure that screen readers don't read them out. This makes it easier for people with disabilities to use the interface.
html
<div role="tablist">
<button id="tab1" role="tab" aria-selected="true">
Tab 1
</button>
<button id="tab2" role="tab" aria-selected="false">
Tab 2
</button>
<button id="tab3" role="tab" aria-selected="false">
Tab 3
</button>
</div>
<!-- Tab content -->
<div id="panel1" role="tabpanel">
Content of tab 1
</div>
<div id="panel2" role="tabpanel" hidden aria-hidden="true">
Content of tab 2
</div>
<div id="panel3" role="tabpanel" hidden aria-hidden="true">
Content of tab 3
</div>Using both attributes ensures that inactive tabs are hidden from all users, regardless of visual ability. This creates a more inclusive and enjoyable user experience for everyone.
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn