Detailed answer
Hidden normally removes content from visual rendering.
Aria-hidden=true removes content from the accessibility tree without necessarily changing appearance. Use each for its actual purpose. Avoid focusable controls in an aria-hidden subtree because a person could focus something assistive technology cannot identify. Provide equivalents for meaningful visual content.
Example
<span aria-hidden="true">★</span><span>Featured HTML lesson</span>
Understanding the behavior
Hidden generally removes content from rendering, while aria-hidden hides it from the accessibility tree without necessarily hiding it visually. Neither should be used casually on a focusable control. A keyboard user must not land on something whose identity is hidden.
Practical implementation notes
Inspect both the visual page and the accessibility tree. For decorative icons beside an existing label, aria-hidden can avoid duplicate speech, but the meaningful label must remain available.
How to check it
Inspect the accessibility tree after hiding only the redundant decoration.
Expected result
Featured remains available while the decorative duplicate is omitted.
Watch out: Do not use aria-hidden to remove essential information with no alternative.
Read the reference ↗