aria-hidden

`aria-hidden` is a WAI-ARIA attribute that controls whether an element is exposed to assistive technologies. When set to `"true"`, the element and all of its descendants are removed from the accessibility tree, making them completely invisible to screen readers and other assistive tools. The element remains fully visible and functional for sighted users. The accessibility tree is a simplified representation of the DOM that assistive technologies use to interpret and present page content. By default, most visible elements appear in the accessibility tree. `aria-hidden="true"` provides a way to selectively exclude elements from this tree, effectively telling assistive technologies to skip over content that would be redundant, confusing, or meaningless when announced. Setting `aria-hidden="false"` does not guarantee an element will be exposed to assistive technologies. If a parent element has `aria-hidden="true"`, child elements cannot override this. And if an element is hidden via CSS (`display: none` or `visibility: hidden`), `aria-hidden="false"` will not make it appear in the accessibility tree.

Not everything visible on screen is useful when announced by a screen reader. Decorative icons, visual separators, redundant text, and ornamental images add visual richness but can create noise and confusion for screen reader users. When a button contains both an icon and a text label, the screen reader should announce the text, not the icon's description. Removing irrelevant content from the accessibility tree improves the efficiency of screen reader navigation. Every element in the accessibility tree is something a screen reader user must process. Reducing clutter allows users to move through content faster and with less cognitive load. `aria-hidden` is also essential for modal dialog patterns. When a modal opens, the background content should be hidden from assistive technologies to prevent screen readers from accessing elements that are visually obscured. This complements the focus trap pattern and creates a complete modal experience.

The attribute is applied directly to the element you want to hide: ```html <!-- Decorative icon next to a button label --> <button> <svg aria-hidden="true" class="icon"><!-- decorative icon --></svg> Save Document </button> <!-- Decorative separator --> <hr aria-hidden="true" class="fancy-divider"> <!-- Background content behind a modal --> <div id="main-content" aria-hidden="true"> <!-- All page content hidden while modal is open --> </div> <div role="dialog" aria-label="Confirm deletion"> <!-- Modal content remains accessible --> </div> ``` **Critical rules to follow:** **Never hide focusable elements.** If an element or any of its children can receive keyboard focus (links, buttons, inputs, elements with `tabindex`), do not apply `aria-hidden="true"`. This creates a dangerous mismatch: keyboard users can navigate to the element, but screen readers cannot announce it. The user focuses on something invisible to their assistive technology. ```html <!-- WRONG: hiding a focusable element --> <div aria-hidden="true"> <button>Click me</button> <!-- Keyboard can focus this, but SR can't see it --> </div> ``` **It affects all descendants.** When you set `aria-hidden="true"` on a container, every element inside it is also hidden from assistive technologies. You cannot override this on child elements. Plan your DOM structure accordingly. **Use it for decorative content.** Icons used alongside text labels, decorative images, visual flourishes, and animated backgrounds are prime candidates. The SVG icon in a button should almost always have `aria-hidden="true"` when a text label is present. **Use it for modal backgrounds.** When implementing modals, toggle `aria-hidden="true"` on the main content wrapper and remove it when the modal closes. This prevents screen readers from reading content the user cannot interact with. **Don't use it as a substitute for proper hiding.** If content should be hidden from everyone, use `display: none` or `visibility: hidden`. If content should be visible only to screen readers, use a visually-hidden CSS class. `aria-hidden` specifically addresses the case where content is visible but should be ignored by assistive technologies. **Dynamic toggling** is common and expected. JavaScript can set and remove `aria-hidden` as the interface state changes: ```javascript // Opening a modal document.getElementById('main-content').setAttribute('aria-hidden', 'true'); // Closing a modal document.getElementById('main-content').removeAttribute('aria-hidden'); ```