Живые области: aria-live aria-atomic aria-relevant

Что такое живые области?

Создание живой области

<!-- Polite: announce when user is idle -->
<div aria-live="polite" id="notifications"></div>

<!-- Inject text to announce: -->
<script>
document.getElementById('notifications').textContent = '5 new messages';
// Screen reader announces: '5 new messages' when user pauses
</script>

Итоги по значениям aria-live

aria-atomic подробно

<div aria-live="polite" aria-atomic="false">  <!-- default -->
  Items in cart: <span id="count">3</span>
</div>
<!-- Only the changed span is announced: '4' -->

<div aria-live="polite" aria-atomic="true">
  Items in cart: <span id="count">3</span>
</div>
<!-- The entire div is announced: 'Items in cart: 4' -->

<!-- aria-atomic="true" gives more context but is more verbose -->

Значения aria-relevant

<!-- Default: additions text -->
<div aria-live="polite" aria-relevant="additions text">

<!-- Announce removals too: -->
<div aria-live="polite" aria-relevant="removals">

<!-- Announce everything: -->
<div aria-live="polite" aria-relevant="all">

<!-- Values: additions, removals, text, all
     'additions' = added nodes announced
     'removals' = removed nodes announced
     'text' = text content changes announced -->

Предопределённые роли живых областей

Состояние загрузки с живой областью

<div role="status" aria-live="polite" aria-atomic="true" id="load-status">
  <!-- empty initially -->
</div>

<script>
async function loadData() {
  document.getElementById('load-status').textContent = 'Loading...';
  const data = await fetchData();
  renderResults(data);
  document.getElementById('load-status').textContent =
    `${data.length} results loaded.`;
}
</script>

Обратная связь при отправке формы

<form id="contact-form" novalidate>
  <input type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

<div role="status" aria-live="polite" id="form-status"></div>

<script>
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const status = document.getElementById('form-status');
  status.textContent = 'Submitting...';
  await submitForm(new FormData(form));
  status.textContent = 'Thank you! You are now subscribed.';
});
</script>

Количество результатов поиска

<label for="search">Search</label>
<input type="search" id="search">

<div role="status" aria-live="polite" aria-atomic="true" id="results-count"></div>
<div id="results"></div>

<script>
let debounceTimer;
search.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const results = filterResults(search.value);
    renderResults(results);
    document.getElementById('results-count').textContent =
      `${results.length} results for "${search.value}"`;
  }, 300);
});
</script>

Антишаблоны живых областей

Тестирование живых областей

Быстрая проверка

Итоги: живые области