CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readersaria-live
aebabis
aebabis

Reputation: 3705

Read label of aria-live region

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?

Upvotes: 2

Views: 2326

Answers (2)

slugolicious
slugolicious

Reputation: 17455

Have you played with aria-atomic? It will walk up the ancestor tree so it'd have to be set on a parent of the <dd>. Setting it on the <dt> won't work because it's a sibling. But you could potentially have have a hidden <span> that's the parent of the <dl> with "dynamic number" as the text. The <span> wuold have to be hidden by setting its height to 1px instead of really hiding it (visibility) because truly hidden stuff isn't read by a screen reader. But then if the <span> is only 1px high then that will hide all the children too. Bummer.

You could also try a brute force method and have a 1px aria-live <span> that you update with "dynamic number 2". The full text will be read but will not be displayed. You'd also update your <dd> but it wouldn't have to be aria-live.

Upvotes: 2

aardrian
aardrian

Reputation: 9009

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.

Upvotes: 2

Related Questions