HtmlConceptBeginner · 3 min read

What is aria-hidden Attribute in HTML: Simple Explanation

The aria-hidden attribute in HTML tells assistive technologies like screen readers whether to ignore an element. When set to true, the element and its children are hidden from screen readers, improving accessibility by controlling what content is announced.

⚙️

How It Works

The aria-hidden attribute acts like a 'do not disturb' sign for screen readers. Imagine a room where some conversations are private and should not be overheard. Setting aria-hidden="true" on an element tells screen readers to skip that element and everything inside it, so users relying on these tools won't hear about it.

This attribute does not hide the element visually on the page; it only affects what assistive technologies announce. This helps developers control the reading order and avoid confusion by hiding decorative or redundant content from screen readers.

💻

Example

This example shows a visible message that is hidden from screen readers using aria-hidden.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aria-hidden Example</title>
</head>
<body>
  <h1>Welcome to Our Website</h1>
  <p aria-hidden="true">This text is visible but hidden from screen readers.</p>
  <p>This text is visible and read by screen readers.</p>
</body>
</html>

Output

Page shows a heading 'Welcome to Our Website' and two paragraphs. The first paragraph text 'This text is visible but hidden from screen readers.' is visible but skipped by screen readers. The second paragraph is visible and read aloud.

🎯

When to Use

Use aria-hidden="true" when you want to hide content from screen readers but keep it visible on the page. This is helpful for:

Decorative icons or images that do not add meaning.
Duplicate content that might confuse screen reader users.
Elements used only for visual effects or layout.

Do not use it to hide important information or interactive elements, as this can make your site inaccessible.

✅

Key Points

aria-hidden controls screen reader visibility, not visual display.
Setting it to true hides the element and its children from assistive tech.
Helps improve accessibility by reducing noise for screen reader users.
Should not be used to hide important or interactive content.

✅

Key Takeaways

The aria-hidden attribute hides elements from screen readers without hiding them visually.

Use aria-hidden="true" to prevent assistive technologies from announcing non-essential content.

Do not hide important or interactive elements with aria-hidden to keep your site accessible.

aria-hidden improves user experience for screen reader users by reducing unnecessary information.