title: Making a screen reader reread if the aria-label changes
body: <p>Is it possible to make a screen reader reread the select element if the contents of the aria-label changes?</p>
  
  <p>I've made a simple snippet, I know I'm not following most aria conventions, to show what I mean.</p>
  
  <p>If you turn on a screen reader and click on the div it will read the label "unchecked" if you then press space the label will update but the screen reader will stay silent. Though it will read the new label if you click off and on again.</p>
  
  <p>Is this the right way to make the screen reader read updates or is there another method I'm not aware of?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let toggleSwitch = document.querySelector('.toggle-switch');
  
  toggleSwitch.addEventListener("keyup", function(e) {
    let code = (e.keyCode ? e.keyCode : e.which);
    
    if (code == 32) {
      let nextState = toggleSwitch.getAttribute('aria-label') == 'unchecked' ? 'checked' : 'unchecked';
      
      toggleSwitch.setAttribute('aria-label', nextState);
      
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toggle-switch {
    width: 50px;
    height: 50px;
  }
  
  .toggle-switch[aria-label="unchecked"] {
    background: red;
  }
  
  .toggle-switch[aria-label="checked"] {
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Press space to change state
  &lt;div class="toggle-switch" tabindex="0" aria-label="unchecked"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help.</p>