footer element test

Pass Criteria

Reference

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

footer element

Code

<footer id="footer1"><code>footer</code> element</footer>

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

footer element inside article

Code

<article>
	<footer>
		<code>footer</code> element inside <code>article</code>
	</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><code>aria-label</code> should be used as accessible name.</p>
		<p>No accessible description.</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><code>aria-labelledby</code> should be used as accessible name.</p>
		<p>No accessible description.</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><code>title</code> should be used as accessible name.</p>
		<p>No accessible description.</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">
			<code>small</code> referenced by <code>aria-describedby</code>
		</small>
		<p>
			<code>aria-describedby</code> should be used as accessible description.
		</p>
		<p>No accessible name.</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><code>aria-label</code> should be used as accessible name.</p>
		<p><code>title</code> should be used as accessible description.</p>
	</footer>
</article>