Read label of aria-live region

Question

I have a definition list where one of the items can change:

// Update dynamic content
setInterval(function() {
  document.getElementById('dynamic-info').textContent++;
}, 3000);

<dl>
  <dt>Static information</dt>
  <dd>Value 1</dd>
  
  <dt>Static information 2</dt>
  <dd>Value 2</dd>
  
  <dt id="dynamic-info-def">Dynamic number</dt>
  <dd id="dynamic-info" aria-live="polite" aria-labelledby="dynamic-info-def">1</dd>
</dl>

I have put aria-live on the content because it needs to be read to a screenreader, which works, but only the number is read. It needs to say "Dynamic number: 2" so the user has context.

I can't put aria-live on the <dl> because that would be too much content to read. I tried putting a wrapper div around the last dt/dd pair, but this is illegal HTML.

I tried using aria-labelledby (shown above), but this had no effect (in Chrome with VoiceOver).

How can I make a live region read associated content?

Answer 1

An area specified as an ARIA live region will read only its content. It will ignore aria-labelledby and aria-describedby.

You will need to adjust your function to write the entire text block into the live region.

If you do not want that additional text to be visible, use a CSS off-screen technique to hide it.