input type=range element test

Pass Criteria

Reference

Test ri-001: Unlabelled input type="range"

Code

<input id="input1" type="range" min="-100" max="100" value="10" step="10" />

Test ri-002: Input type="range" with aria-label

Aria-label should be used as accessible name

No accessible description.

Code

<input id="input2" type="range" min="-100" max="100" value="10" step="10" aria-label="aria-label attribute" />

Test ri-003: Input type="range" with aria-labelledby

p referenced by aria-labelledby

Aria-labelledby should be used as accessible name

No accessible description.

Code

<p id="ri-003-labelledby">p referenced by aria-labelledby</p>
<input id="input3" type="range" min="-100" max="100" value="10" step="10" aria-labelledby="ri-003-labelledby" />

Test ri-004: Input type="range" with label

Label should be used as accessible name

No accessible description.

Code

<label>label wrapping input <input id="input4" type="range" min="-100" max="100" value="10" step="10" /></label>

Test ri-005: Input type="range" with title attribute

Title should be used as accessible name

No accessible description.

Code

<input id="input5" type="range" min="-100" max="100" value="10" step="10" title="title attribute" />

Test ri-006: Input type="range" with aria-describedby

p referenced by aria-describedby

Aria-describedby should be used as accessible description

No accessible name.

Code

<input id="input6" type="range" min="-100" max="100" value="10" step="10" aria-describedby="ri-006-describedby" />
<p id="ri-006-describedby">p referenced by aria-describedby</p>

Test ri-007: Input type="range" with label element & title attribute

Label should be used as accessible name

Title should be used as accessible description

Code

<label for="input7">label referenced by for/id attributes</label>
<input id="input7" type="range" min="-100" max="100" value="10" step="10" title="title attribute" />