Spinbutton Examples

Using div element

The div example is valid HTML.

<div> class="spinbutton form-element" tabindex="0" role="spinbutton"
aria-valuemin="1" aria-valuemax="10" aria-valuenow="4" 
aria-valuetext="billion kilograms">Mass 1</div>
	

Using button element

Putting role=spinbutton and using the aria-min,-max,-now, and -text attributes is not valid HTML.

<button> role="spinbutton"
aria-valuemin="1" aria-valuemax="10" aria-valuenow="4" 
aria-valuetext="billion kilograms">Mass 1</button>
		

During Implementation

We found the follwoing HTML sounded best so far. See github issue April 4th, 2018 comment

Mass Control 1