title: Read label of aria-live region
body: <p>I have a definition list where one of the items can change:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Update dynamic content
  setInterval(function() {
    document.getElementById('dynamic-info').textContent++;
  }, 3000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dl&gt;
    &lt;dt&gt;Static information&lt;/dt&gt;
    &lt;dd&gt;Value 1&lt;/dd&gt;
    
    &lt;dt&gt;Static information 2&lt;/dt&gt;
    &lt;dd&gt;Value 2&lt;/dd&gt;
    
    &lt;dt id="dynamic-info-def"&gt;Dynamic number&lt;/dt&gt;
    &lt;dd id="dynamic-info" aria-live="polite" aria-labelledby="dynamic-info-def"&gt;1&lt;/dd&gt;
  &lt;/dl&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have put <code>aria-live</code> 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.</p>
  
  <p>I can't put <code>aria-live</code> on the <code>&lt;dl&gt;</code> because that would be too much content to read. I tried putting a wrapper div around the last <code>dt/dd</code> pair, but this is illegal HTML.</p>
  
  <p>I tried using <code>aria-labelledby</code> (shown above), but this had no effect (in Chrome with VoiceOver).</p>
  
  <p>How can I make a live region read associated content?</p>