aria-hidden and aria-live
Hide decorative elements and announce dynamic content to screen readers.
aria-hidden
aria-hidden="true" removes an element from the accessibility tree — screen readers skip it completely:
<!-- Decorative icon: visible but skip by screen readers -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>
<!-- Decorative separator -->
<img src="divider.svg" alt="" aria-hidden="true">
<!-- Note: aria-hidden does NOT affect visibility or tab focus
A button with aria-hidden is still tabbable! -->aria-hidden Use Cases
Appropriate uses for aria-hidden:
<!-- 1. Icons next to descriptive text -->
<button>
<svg aria-hidden="true"><!-- icon --></svg>
Save Document
</button>
<!-- 2. Repeated text in a card link -->
<a href="/blog/post-1">
<span aria-hidden="true">Read more</span>
<span class="sr-only">Read more: HTML5 Forms Guide</span>
</a>
<!-- 3. UI decoration (dots, decorative borders) -->
<span aria-hidden="true">•••</span>