dimanche 12 juin 2016

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?

Aucun commentaire:

Enregistrer un commentaire