hidden vs aria-hidden attributes in HTML

The hidden attribute and the aria-hidden attribute in HTML serve different purposes:

1. hidden attribute: The hidden attribute is a standard HTML attribute that is used to hide an element from the page layout. When an element has the hidden attribute, it is not rendered on the page and is effectively removed from the accessibility tree. It is supported by all major browsers.

Example:

<div hidden>This element is hidden</div>

2. aria-hidden attribute: The aria-hidden attribute is an accessibility attribute used to indicate that an element and its descendants are not visible or perceivable to assistive technologies. It is used to convey information to screen readers, helping them to understand the visibility state of the element. The aria-hidden attribute does not affect the visual rendering of the element.

Example:

<div aria-hidden="true">This element is not visible to assistive technologies</div>

In summary, the hidden attribute is used to hide an element from both the visual display and the accessibility tree, while the aria-hidden attribute is used to indicate that an element is not visible or perceivable to assistive technologies. Both attributes can be used in combination to ensure proper visibility and accessibility of web content.