Appearance
What is the Difference Between the hidden and aria-hidden Attributes
Difference between the hidden and aria-hidden attributes
HTML uses ARIA (Accessible Rich Internet Applications) to make web content and applications accessible for people with disabilities. There are some keywords such as "hidden" that are common to both HTML and ARIA, thus creating confusion among learners.
The HTML hidden attribute is used when some content isn’t relevant any more. It can also be needed not to allow users to see an element until some condition has been met. When an element has a hidden attribute, the browser hides it visually (equivalent to display: none). After that, with the help of Javascript, you can remove the hidden attribute and make the element visible.
Example of using the hidden attribute:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
}
h1 {
color: #225d9c;
}
</style>
</head>
<body>
<h1>Example of the "hidden" attribute</h1>
<!-- hidden paragraph -->
<p hidden>Here is some text</p>
</body>
</html>The aria-hidden attribute tells screen readers whether or not they must ignore the element. Unlike the HTML hidden attribute, aria-hidden does not hide content visually; it only removes the element from the accessibility tree. It specifies that the element and its descendants will not be perceivable to assistive technologies. This attribute must be used with caution to hide visibly rendered content from assistive technology only when the process of hiding this content improves the experience for users by removing redundant content. Authors must ensure that equivalent and identical meaning and functionality are accessible to assistive technologies.
Example of using the aria-hidden attribute:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
}
h1 {
color: #225d9c;
}
</style>
</head>
<body>
<h1>Example of the "aria-hidden" attribute</h1>
<!-- aria-hidden="true" paragraph -->
<p aria-hidden="true">
Here is some text
</p>
</body>
</html>Summary: The hidden attribute visually hides content from all users, while aria-hidden only hides it from assistive technologies like screen readers, leaving it visible on the page. Use hidden for visual layout control and aria-hidden for accessibility management.