progress element test

Pass Criteria

Reference

Test pg-001: Progress element

Downloading progress:

Code

<p>Downloading progress: <progress id="progress1" value="22" max="100"></progress></p>

Test pg-002: Progress with aria-label

Aria-label should be used as accessible name

No accessible description.

Code

<progress id="progress2" aria-label="aria-label attribute" value="22" max="100"></progress>

Test pg-003: Progress with aria-labelledby

p referenced by aria-labelledby

Aria-labelledby should be used as accessible name

No accessible description.

Code

<p id="pg-003-labelledby">p referenced by aria-labelledby</p>
<progress id="input3" aria-labelledby="pg-003-labelledby" value="22" max="100"></progress>

Test pg-004: Progress with label

Label should be used as accessible name

No accessible description.

Code

<label>label wrapping output <progress id="progress4" value="22" max="100"></progress></label>

Test pg-005: Progress with title attribute

Title should be used as accessible name

No accessible description.

Code

<progress id="input5" title="title attribute" value="22" max="100"></progress>

Test pg-006: Progress with aria-describedby

p referenced by aria-describedby

Aria-describedby should be used as accessible description

No accessible name.

Code

<progress id="progress6" aria-describedby="pg-006-describedby" value="22" max="100"></progress>
<p id="pg-006-describedby">p referenced by aria-describedby</p>

Test pg-007: Progress with label element & title attribute

Label should be used as accessible name

Title should be used as accessible description

Code

<label for="progress7">label referenced by for/id attributes</label>
<progress id="progress7" title="title attribute" value="22" max="100"></progress>