Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the Difference Between the hidden and aria-hidden Attributes?
The hidden and aria-hidden attributes in HTML serve different purposes for controlling element visibility and accessibility. The hidden attribute completely removes an element from both visual display and screen readers, while aria-hidden only affects accessibility tools without changing visual presentation.
Syntax
Following is the syntax for the hidden attribute
<element hidden>Content</element>
Following is the syntax for the aria-hidden attribute
<element aria-hidden="true">Content</element> <element aria-hidden="false">Content</element>
The Hidden Attribute
The HTML hidden attribute is a boolean attribute that completely removes an element from all presentations. When applied, the element becomes invisible to users, screen readers, and other assistive technologies. It is equivalent to setting display: none in CSS.
The hidden attribute is used for elements that are not currently relevant to the user but may become relevant later based on user actions or application state. Content with the hidden attribute can be accessed and manipulated through JavaScript to show or hide elements dynamically.
Since hidden is a boolean attribute, its presence indicates the element is hidden, regardless of the value. The recommended practice is to use no value (<div hidden>) or an empty string (<div hidden="">).
Example Using Hidden Attribute
Following example demonstrates the hidden attribute in action
<!DOCTYPE html>
<html>
<head>
<title>Hidden Attribute Example</title>
<style>
div {
border: 2px dashed mediumvioletred;
height: 50px;
width: 300px;
padding: 10px;
margin: 10px 0;
}
h3 {
color: navy;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 30px;">
<h3>Hidden Attribute Demo</h3>
<div>
<p>This paragraph is visible.</p>
</div>
<div>
<p hidden>This paragraph is hidden.</p>
</div>
</body>
</html>
The first div shows its paragraph content, while the second div appears empty because its paragraph is hidden
Hidden Attribute Demo [This paragraph is visible.] (visible in bordered div) [] (empty bordered div - content is hidden)
The Aria-Hidden Attribute
The aria-hidden attribute controls whether an element and its descendants are exposed to assistive technologies like screen readers. Unlike the hidden attribute, aria-hidden does not affect the visual presentation of the element it remains visible on screen but can be hidden from the accessibility tree.
The aria-hidden attribute accepts two values:
aria-hidden="true" Removes the element from the accessibility tree. Screen readers will ignore this content.
aria-hidden="false" Ensures the element is included in the accessibility tree (this is the default behavior).
This attribute is commonly used for decorative elements like icons or duplicate content that would be redundant for screen reader users.
Example Using Aria-Hidden Attribute
Following example shows the difference between aria-hidden="true" and aria-hidden="false"
<!DOCTYPE html>
<html>
<head>
<title>Aria-Hidden Attribute Example</title>
<style>
div {
border: 2px dashed navy;
height: 50px;
width: 300px;
padding: 10px;
margin: 10px 0;
}
.label {
font-weight: bold;
color: darkblue;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 30px;">
<div class="label">aria-hidden="false" (accessible to screen readers)</div>
<div>
<p aria-hidden="false">This text is accessible to screen readers.</p>
</div>
<div class="label">aria-hidden="true" (hidden from screen readers)</div>
<div>
<p aria-hidden="true">This text is hidden from screen readers but visually visible.</p>
</div>
</body>
</html>
Both paragraphs are visually displayed, but screen readers will only announce the first paragraph
aria-hidden="false" (accessible to screen readers) [This text is accessible to screen readers.] aria-hidden="true" (hidden from screen readers) [This text is hidden from screen readers but visually visible.]
Interactive Example Showing and Hiding Content
Following example demonstrates both attributes with JavaScript control
<!DOCTYPE html>
<html>
<head>
<title>Hidden vs Aria-Hidden Interactive Demo</title>
<style>
.content-box {
border: 2px solid #007bff;
padding: 15px;
margin: 10px 0;
background-color: #f8f9fa;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 12px;
margin: 5px;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 30px;">
<h2>Hidden vs Aria-Hidden Demo</h2>
<div class="content-box">
<p id="hiddenContent">This content uses the hidden attribute</p>
<button onclick="toggleHidden()">Toggle Hidden</button>
</div>
<div class="content-box">
<p id="ariaContent">This content uses aria-hidden attribute</p>
<button onclick="toggleAria()">Toggle Aria-Hidden</button>
</div>
<script>
function toggleHidden() {
const element = document.getElementById('hiddenContent');
if (element.hasAttribute('hidden')) {
element.removeAttribute('hidden');
} else {
element.setAttribute('hidden', '');
}
}
function toggleAria() {
const element = document.getElementById('ariaContent');
const currentValue = element.getAttribute('aria-hidden');
if (currentValue === 'true') {
element.setAttribute('aria-hidden', 'false');
} else {
element.setAttribute('aria-hidden', 'true');
}
}
</script>
</body>
</html>
Click the buttons to see how each attribute affects content visibility differently. The hidden attribute completely removes content from view, while aria-hidden only affects screen reader access.
Key Differences Between Hidden and Aria-Hidden
Following table summarizes the main differences between these attributes
| Aspect | hidden | aria-hidden |
|---|---|---|
| Attribute Type | Boolean (presence indicates true) | Enumerated (requires "true" or "false") |
| Visual Impact | Completely hides element from view | No visual impact - element remains visible |
| Screen Reader Impact | Hidden from screen readers | Controls screen reader accessibility |
| CSS Equivalent | Similar to display: none
|
No direct CSS equivalent |
| Usage Syntax | <div hidden> |
<div aria-hidden="true"> |
| Common Use Cases | Conditional content, dynamic UI states | Decorative icons, duplicate content |
| JavaScript Control | Add/remove attribute | Toggle between "true" and "false" |
Best Practices
When choosing between these attributes, consider the following guidelines
Use hidden when content should be completely unavailable to all users until specific conditions are met, such as collapsed sections, hidden form fields, or conditional content.
Use aria-hidden="true" for purely decorative elements like icons that don't convey additional information, or duplicate content that would be redundant for screen reader users.
Never use aria-hidden="true" on focusable elements like buttons or links, as this creates accessibility issues.
Avoid using hidden="false" simply remove the attribute instead, as boolean attributes don't work with false values.
Conclusion
The hidden attribute completely removes elements from all users and presentations, while aria-hidden specifically controls accessibility tree exposure without affecting visual presentation. Choose hidden for content that should be completely unavailable, and aria-hidden for managing screen reader access to decorative or redundant elements.
406 Views
