aria-hidden and aria-live

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

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

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

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

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

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