figure element test

Pass Criteria

Reference

Test fg-001: Figure element

HTML5 logo

Code

<figure>
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
</figure>

Test fg-002: Figure with aria-label

HTML5 logo

Aria-label should be used for accessible name.

No accessible description.

Code

<figure aria-label="aria-label attribute">
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
</figure>

Test fg-003: Figure with aria-labelledby

HTML5 logo

p referenced by aria-labelledby

Aria-labelledby should be used for accessible name.

No accessible description.

Code

<figure aria-labelledby="fg-003-labelledby">
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
	<p id="fg-003-labelledby">p referenced by aria-labelledby</p>
</figure>

Test fg-004: Figure with title attribute

HTML5 logo

Title attribute should be used for accessible name.

No accessible description.

Code

<figure title="title attribute">
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
</figure>

Test fg-005: Figure with figcaption element

HTML5 logo
Figcaption element

Figcaption should be used for accessible name.

No accessible description.

Code

<figure>
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
	<figcaption>Figcaption element</figcaption>
</figure>

Test fg-006: Figure with aria-describedby

HTML5 logo

p referenced by aria-describedby

Aria-describedby should be used for accessible description.

No accessible name.

Code

<figure aria-describedby="fg-006-describedby">
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
	<p id="fg-006-describedby">p referenced by aria-describedby</p>
</figure>

Test fg-007: Figure with figcaption element and title attribute

HTML5 logo
Figcaption element

Figcaption should be used for accessible name.

Title should be used for accessible description.

Code

<figure title="title attribute">
	<img src="../images/HTML5_Logo.png" alt="HTML5 logo" width="128" height="128" />
	<figcaption>Figcaption element</figcaption>
</figure>