[HTML 5] aria-live

"aria-live" is a method to tell the information to the screen reader once value changed.

aria-live has three value:

1. off: nothing will happen

2. polite: wait user finish current action, then tell user, cover most use cases.

3. assertive: interpute whatever users are current doing.

<form action="">
        <span class="label" id="currValue">Current value</span>
        <span aria-describedby="help" tabindex="0" role="spinbutton" aria-labelledby="currValue">
          <span aria-live="assertive" id="number">90</span>
          <button tabindex="-1" type="button" id="add" title="add 10" aria-controls="number">Add</button>
          <button tabindex="-1" type="button" id="subtract" title="subtract 10" aria-controls="number">Subtract</button>
        </span>
        <div id="help">
          Use "add" and "subtract" buttons, or up and down arrows, to add or subtract 10, respectively.
        </div>
      </form>

 

DEMO