aria-live

Кога се използва

Когато дадена част от страницата се актуализира асинхронно и потребителите на екранни четци трябва да бъдат уведомени, без да се прекъсва текущото им четене. Типичните случаи включват: обобщения за валидиране на формуляри, брой на намерените резултати при търсене, известия тип toast, съобщения в чат потоци и броячи на артикули в кошницата.

Нивото на вежливост се избира съзнателно:

• aria-live="polite" — изчаква потребителят да е неактивен, преди да направи обявяването. Използва се за почти всичко. Статусни съобщения, заредени резултати, добавен артикул в кошницата.
• aria-live="assertive" — прекъсва потребителя незабавно. Запазва се за наистина спешна информация — изтичащата сесия след 30 секунди, неуспешно изпращане на формуляр, отказано плащане. Прекомерната употреба прави страницата усещана като агресивна.
• aria-live="off" (по подразбиране) — без обявявания.

Нативните роли role="status" (имплицитно polite) и role="alert" (имплицитно assertive) обединяват aria-live с разумни настройки по подразбиране. Те се предпочитат, когато са подходящи; към aria-live върху потребителски контейнер се прибягва само когато те не пасват.

Как да се поддържа синхронизацията

Ключовото правило: живият регион трябва да присъства в DOM при първоначалното визуализиране. Браузърите и помощните технологии настройват „наблюдението” на региона, когато той се появи за първи път в дървото за достъпност. Ако регионът се създаде и съдържание се инжектира в него в един и същи JavaScript тик, обявяването най-вероятно ще бъде пропуснато.

Шаблонът е следният:

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

Празният контейнер се визуализира при зареждане на страницата. По-късно в него се записва текст чрез JavaScript. Екранният четец обявява промяната.

Допълнителни правила:

• Актуализирайте чрез задаване на textContent; заместването на целия external HTML на региона може да наруши наблюдението.
• Повтарящите се обявявания изискват промяна на съдържанието — записването на един и същи низ два пъти често не предизвиква второ обявяване. Добавете брояч, времеви клеймо или изчистете региона за кратко.
• Комбинирайте с aria-busy="true" по време на многостъпкови актуализации, за да се избегнат частични обявявания.
• Комбинирайте с aria-atomic, за да управлявате дали се обявява само разликата или целият регион.

Чести грешки

• Създаване на живия регион в същия тик като съдържанието — обявяването не се случва.
• Използване на aria-live="assertive" за всичко. Потребителите заглушават разделa.
• Задаване на aria-live върху интерактивен контрол с фокус. Живите региони са предназначени за статусни актуализации, а не за интерактивни уиджети.
• Скриване на живия регион с display: none. CSS-скрити региони са скрити и в дървото за достъпност и не предизвикват обявявания; вместо това трябва да се използва техниката за визуално скриване (clip / sr-only).
• Вмъкване на много дълго съдържание (абзаци текст) наведнъж в живия регион — потребителят не може да прелиства.
• Пропускане на изчистването на региона след прочитане на съобщението, поради което последващи идентични актуализации не предизвикват обявяване.

Пример

<form>
  <label for="zip">ZIP code</label>
  <input id="zip" name="zip" />
  <button type="submit">Look up</button>
</form>

<!-- Присъства от началното визуализиране -->
<div id="lookup-status" aria-live="polite" class="sr-only"></div>

<script>
  document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const status = document.getElementById('lookup-status');
    status.textContent = 'Looking up location…';
    const place = await lookup(document.getElementById('zip').value);
    status.textContent = `Location: ${place}`;
  });
</script>