aria-hidden and aria-live
Hide decorative elements and announce dynamic content to screen readers.
aria-hidden and aria-live is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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>aria-hidden Pitfall
Never apply aria-hidden to focusable elements:
<!-- BAD: button is in tab order but invisible to screen readers -->
<button aria-hidden="true">Close</button>
<!-- Users reach this via Tab but hear nothing
They cannot tell if they're on a button or lost focus -->
<!-- If you want to hide from both: use hidden attribute -->
<button hidden>Close</button>
<!-- Or: disabled (but disabled removes from tab order) -->
<button disabled aria-hidden="true">Close</button>aria-live
aria-live turns a region into a live region — changes are automatically announced:
<!-- polite: announce when user is idle -->
<div aria-live="polite" id="status"></div>
<!-- assertive: announce immediately, interrupting current speech -->
<div aria-live="assertive" id="errors"></div>
<script>
// Inject text to trigger announcement:
document.getElementById('status').textContent = 'File saved successfully.';
// Screen reader announces this without user moving focus
</script>aria-live Values
The three aria-live values:
off— default: changes not announcedpolite— announced when user pauses; for non-urgent updatesassertive— announced immediately, interrupts; for errors and critical alerts
aria-atomic
aria-atomic controls whether the whole region or just changed parts are announced:
<div aria-live="polite" aria-atomic="true" id="timer">
Time remaining: 05:00
</div>
<!-- aria-atomic="true": announce the whole div each update -->
<!-- Without it: only the changed text node is announced
'Time remaining: 05:00' vs just '05:00' -->
<script>
setInterval(() => {
document.getElementById('timer').textContent = `Time remaining: ${getTime()}`;
}, 1000);
</script>aria-relevant
aria-relevant specifies what types of changes are announced:
<div
aria-live="polite"
aria-relevant="additions text" <!-- announce added content and text changes -->
id="feed"
>
<!-- New items added here -->
</div>
<!-- Values: additions, removals, text, all
Default: additions text
aria-relevant="removals" needed to announce deleted items -->Live Region Best Practices
Guidelines for live regions:
- Use one persistent live region per type of announcement (don't create and destroy)
- Start with empty content; inject text to trigger announcement
- Keep announcements concise — screen readers interrupt or get behind
- For loading states: use polite
- For form errors: use assertive or role="alert"
Patterns for Toast Notifications
Announcing toast notifications with live regions:
<div
role="status"
aria-live="polite"
aria-atomic="true"
id="toast-container"
class="sr-only"
></div>
<script>
function showToast(message) {
const container = document.getElementById('toast-container');
container.textContent = '';
// Force rerender for re-announcement:
requestAnimationFrame(() => {
container.textContent = message;
});
}
</script>aria-busy
aria-busy="true" indicates content is being updated:
<div id="feed" aria-live="polite" aria-busy="false">
<!-- content -->
</div>
<script>
const feed = document.getElementById('feed');
feed.setAttribute('aria-busy', 'true');
await loadContent();
feed.innerHTML = newContent;
feed.setAttribute('aria-busy', 'false');
// Only now does the live region announce the update
</script>Quick Check
When should you use aria-live="assertive" vs "polite"?
Recap: aria-hidden and aria-live
Hiding and live region essentials:
aria-hidden="true"— removes from accessibility tree (not focusable elements!)aria-live="polite"— announces changes when user is idlearia-live="assertive"— announces immediately (for errors)aria-atomic="true"— announce whole region on changearia-busy— suppress announcements during loading
Frequently asked questions
Is the “aria-hidden and aria-live” lesson free?
Yes — the full text of “aria-hidden and aria-live” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “aria-hidden and aria-live”?
Hide decorative elements and announce dynamic content to screen readers. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “aria-hidden and aria-live” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.