status

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

За неспешни информационни съобщения: „Запазено”, „12 резултата”, „Артикулът е добавен в количката”, „Свързване…”. role="status" е еквивалентен на aria-live="polite" плюс неявен aria-atomic="true" — екранният четец изчаква края на текущото изказване, след което прочита промяната.

Повечето успешно изпратени формуляри, броячи на резултати от търсене, завършване на зареждане и toast-известия принадлежат тук. Запазете role="alert" за действителни прекъсвания.

Нативният елемент <output> носи role="status" автоматично — удобно за резултати от тип калкулатор, свързани с полета за въвеждане чрез <form>. За toast и известия за статус извън контекста на формуляр, <div role="status"> е стандартният шаблон.

Както при всички активни зони, елементът за статус ТРЯБВА да е в DOM-дървото преди да се вмъкне съобщението. Рендирайте <div role="status"></div> празен, след което актуализирайте текстовото му съдържание. Добавянето на елемента от нулата с вече вмъкнато съдържание е ненадеждно.

Компромиси при активни зони

• aria-live="off" — без обявяване. По подразбиране за обикновено съдържание.
• aria-live="polite" (≡ role="status") — обявява се при следващата пауза. По подразбиране за съобщения за статус.
• aria-live="assertive" (≡ role="alert") — прекъсва текущата реч. Използвайте само за спешни съобщения.

WCAG 4.1.3 (Съобщения за статус, AA) изисква съобщенията за статус да се представят чрез активна зона, за да може помощната технология да ги обяви без да принуждава потребителя да премести фокуса.

Чести грешки

• Елементът за статус се създава динамично с вече вмъкнато текстово съдържание. Много екранни четци пропускат обявяването.
• Актуализиране на статуса с форматирано съдържание (<span> и <strong>). Някои екранни четци четат маркирането буквално; пазете съдържанието на статуса като обикновен текст.
• Множество бързо последователни актуализации — по-новите съобщения презаписват по-ранните без обявяване.
• Използване на role="status" за действително спешни грешки (използвайте role="alert").
• Визуално скрит статус без отчитане на aria-atomic, когато текстът съдържа едновременно стабилни и променящи се части. Стойността по подразбиране aria-atomic="true" при status чете цялата зона всеки път, което може да е шумно.

Пример

<!-- Рендирайте празен при зареждане на страницата -->
<div role="status" id="cartStatus"></div>

<script>
  // Когато количката се актуализира:
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Нативен еквивалент -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>