HTML input type="range" element
Test
- The label should be announced
- If a slider is present, the value should be announced as users change the value
Example
Code sample
<label class="label" for="a">Rate the movie</label>
<input class="input" id="a" name="a" type="range">
| OS | Browser | NVDA 2014.4 | JAWS 16 | VoiceOver |
|---|---|---|---|---|
| Windows 7 | IE 11 |
"Rate the movie. Slider. 50" Arrows increase and decrease number Changes to number are announced |
"Rate the movie. Left right slider. 50. To increase or decrease use the arrow keys" Arrows increase and decrease number Changes to number are not announced |
|
| Windows 7 | IE 8 | x | x | |
| Windows 7 | Chrome 39 |
"Rate the movie. Slider. Editable. Blank" Arrows increase and decrease number Changes to number are not announced |
"Rate the movie. Left right slider. 50. To increase or decrease use the arrow keys" Arrows increase and decrease number Changes to number are announced |
|
| Windows 7 | Firefox 34 |
"Rate the movie. Slider. 50" Arrows increase and decrease number Changes to number are announced |
"Rate the movie. Left right slider. 50. To increase or decrease use the arrow keys" Arrows increase and decrease number Changes to number are announced |
|
| OSX 10.9 | Chrome 39 |
"50. Rate the movie. Slider" Arrows increase and decrease number Changes to number are announced |
||
| OSX 10.9 | Firefox 34 |
"0. Rate the movie. Slider" Arrows increase and decrease number Changes to number are not announced |
||
| OSX 10.9 | Safari 7 |
"50%. Rate the movie. Slider" Arrows increase and decrease number Changes to number are announced |