aria-hidden 및 aria-live

aria-hidden

<!-- 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 사용 사례

<!-- 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 사용 시 주의점

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

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

aria-atomic

<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

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

aria-busy

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

빠른 확인

복습: aria-hidden과 aria-live