• Success Criterion 4.1.3
  • Conformance level AA

Live Region Whose Content Loads Before It’s Ready to Announce

4.1.3 — Status Messages

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Live region present but broken: injected with content simultaneously with creation (missed by assistive technology), aria-live (code that makes screen readers announce updates) on element replaced wholesale, or display:none toggling that suppresses announcement.

Example 

function showFilterResult(count) {
  const container = document.getElementById('filterResults');
  container.innerHTML = `<p aria-live="polite">${count} cars match your filters</p>`;
}
// the aria-live paragraph is created and filled in the same innerHTML call, so screen readers
// never see it appear and then change

Why it matters

A shopper applying filters gets no announcement, because the live region and its message appear at the same instant, which most screen readers miss.

How to test

Inspect the live region in DevTools: if content is injected into the element at the same moment the element itself is created, some screen readers miss the announcement — check the region exists in the DOM before content is added.

How to fix

Mount the empty live region in the initial page markup, then only ever update its text content afterward.

<div id="filterResults" role="status" aria-live="polite"></div>
// JS: function showFilterResult(count) { filterResults.textContent = `${count} cars match your filters`; }

Outcome

A shopper hears "14 cars match your filters" every time they adjust a filter.

Who is affected

Screen reader users filtering used cars miss every "X cars match" update after the first page load.

Learn more

Related scenarios