output element test

Pass Criteria

Reference

Test op-001: Output calculated from two inputs

+ =

Code

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
	<input type="range" id="b" value="50" /> +
	<input type="number" id="a" value="10" /> =
	<output id="output1" for="b a"></output>
</form>

Test op-002: Output with aria-label

10

Aria-label should be used as accessible name

No accessible description.

Code

<output id="output2" aria-label="aria-label attribute">10</output>

Test op-003: Output with aria-labelledby

p referenced by aria-labelledby

10

Aria-labelledby should be used as accessible name

No accessible description.

Code

<p id="op-003-labelledby">p referenced by aria-labelledby</p>
<output id="input3" aria-labelledby="op-003-labelledby">10</output>

Test op-004: Output with label

Label should be used as accessible name

No accessible description.

Code

<label>label wrapping output <output id="output4">10</output></label>

Test op-005: Output with title attribute

10

Title should be used as accessible name

No accessible description.

Code

<output id="input5" title="title attribute">10</output>

Test op-006: Output with aria-describedby

10

p referenced by aria-describedby

Aria-describedby should be used as accessible description

No accessible name.

Code

<output id="output6" aria-describedby="op-006-describedby">10</output>
<p id="op-006-describedby">p referenced by aria-describedby</p>

Test op-007: Output with label element & title attribute

10

Label should be used as accessible name

Title should be used as accessible description

Code

<label for="output7">label referenced by for/id attributes</label>
<output id="output7" title="title attribute">10</output>