Ariahidden

aria-hidden is an accessibility attribute defined by the WAI-ARIA specification that indicates whether an element and its subtree should be exposed to assistive technologies such as screen readers. The attribute takes a boolean value: true or false. When aria-hidden="true" is applied to an element, assistive technologies are instructed to ignore the element and all its descendants, effectively removing them from the accessibility tree. When aria-hidden="false" is applied, the element should be exposed again; if the attribute is absent, the element is accessible by default.

aria-hidden is not a visual property and does not affect how content is displayed on screen. It is used to manage what screen readers announce, creating a way to hide content from AT without altering layout. The attribute is inherited by descendants, meaning children are hidden unless they explicitly override with aria-hidden="false" or another mechanism. A common pattern is to hide the page background content when a modal dialog is open by applying aria-hidden="true" to the surrounding page content while ensuring the modal has appropriate accessibility roles (for example, role="dialog" and aria-modal="true").

Cautions and limitations: aria-hidden is not a security measure and should not be used to conceal sensitive data. Screen readers and other assistive technologies may handle dynamic changes differently, so testing across target AT and browsers is important. When content becomes visible again, manage focus to guide users back to the appropriate location.

Example: <div aria-hidden="true">Decorative spacer</div> hides that element from screen readers while remaining visible to sighted users.