header element test

Pass Criteria

Reference

Test hd-001: header element, sectioning content/root is body

header element

Code

<header id="header1">
	<h1>header element</h1>
</header>

Test hd-002: header element, sectioning content/root is not body

Header element inside article

Code

<article>
	<header>
		<p>Header element inside article</p>
	</header>
</article>

Test hd-003: header with aria-label

aria-label should be used as accessible name.

No accessible description.

Code

<article>
	<header aria-label="aria-label attribute">
		<p><code>aria-label</code> should be used as accessible name.</p>
		<p>No accessible description.</p>
	</header>
</article>

Test hd-004: header with aria-labelledby

h1 referenced by aria-labelledby

aria-labelledby should be used as accessible name.

No accessible description.

Code

<article>
	<header aria-labelledby="hd-004-labelledby">
		<h1 id="hd-004-labelledby">h1 referenced by aria-labelledby</h1>
		<p><code>aria-label</code>ledby should be used as accessible name.</p>
		<p>No accessible description.</p>
	</header>
</article>

Test hd-005: header with title attribute.

title should be used as accessible name.

No accessible description.

Code

<article>
	<header title="title attribute">
		<p><code>title</code> should be used as accessible name.</p>
		<p>No accessible description.</p>
	</header>
</article>

Test hd-006: header with aria-describedby

h1 referenced by aria-describedby

Aria-describedby should be used as accessible description.

No accessible name.

Code

<article>
	<header aria-describedby="hd-006-describedby">
		<h1 id="hd-006-describedby">h1 referenced by aria-describedby</h1>
		<p>Aria-describedby should be used as accessible description.</p>
		<p>No accessible name.</p>
	</header>
</article>

Test hd-007: header with aria-label & title attributes

aria-label should be used as accessible name.

title should be used as accessible description.

Code

<article>
	<header 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>
	</header>
</article>