footer element test

Pass Criteria

Reference

Test ft-001: Footer element, sectioning content/root is body

footer element

Code

<footer>footer element</footer>

Test ft-002: Footer element, sectioning content/root is not body

footer element inside article

Code

<article>
	<footer>footer element inside article</footer>
</article>

Test ft-003: footer with aria-label

Aria-label should be used as accessible name.

No accessible description.

Code

<article>
	<footer aria-label="aria-label attribute">
		<p>Aria-label should be used as accessible name.</p>
	</footer>
</article>

Test ft-004: footer with aria-labelledby

small referenced by aria-labelledby

Aria-labelledby should be used as accessible name.

No accessible description.

Code

<article>
	<footer aria-labelledby="ft-004-labelledby">
		<small id="ft-004-labelledby">small referenced by aria-labelledby</small>
		<p>Aria-labelledby should be used as accessible name.</p>
	</footer>
</article>

Test ft-005: footer with title attribute.

Title should be used as accessible name.

No accessible description.

Code

<article>
	<footer title="title attribute">
		<p>Title should be used as accessible name.</p>
	</footer>
</article>

Test ft-006: footer with aria-describedby

small referenced by aria-describedby

Aria-describedby should be used as accessible description.

No accessible name.

Code

<article>
	<footer aria-describedby="ft-006-describedby">
		<small id="ft-006-describedby">h1 referenced by aria-describedby</small>
		<p>Aria-describedby should be used as accessible description.</p>
	</footer>
</article>

Test ft-007: footer with aria-label & title attributes

Aria-label should be used as accessible name.

Title should be used as accessible description.

Code

<article>
	<footer aria-label="aria-label attribute" title="title attribute">
		<p>Aria-label should be used as accessible name.</p>
		<p>Title should be used as accessible description.</p>
	</footer>
</article>