Do you know the difference between the hidden and aria-hidden attributes?
The hidden attribute indicates that browsers should not display the contents of the element.
If the aria-hidden attribute is set to true, this indicates that the element should not be exposed to accessibility APIs, and should not be available in the accessibility tree.
Example 1: Default
The <span> and <button> elements below should be:
- Available in the DOM
- Visible on-screen
- Available in the accessibility tree
Hello world
<span>Hello world</span>
<button>Hello world</button>Example 2: Using the hidden attribute
The <span> and <button> elements below have the hidden attribute applied, and should be:
- Available in the DOM
- Hidden on-screen
- Hidden from the accessibility tree
Hello world
<span hidden>Hello world</span>
<button hidden>Hello world</button>Example 3: Using the aria-hidden attribute
The <span> element below has the aria-hidden="true" attribute applied, and should be:
- Available in the DOM
- Visible on-screen
- Hidden from the accessibility tree
<span aria-hidden="true">Hello world</span>Note: there is no <button> included as part of "Example 3" as aria-hidden="true" should not be used on elements that can receive focus.