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