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:

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:

<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:

<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.

CodePren Demo