header element test

Pass Criteria

Reference

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

header element

Code

<header>
	<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>Aria-label should be used as accessible name.</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>Aria-labelledby should be used as accessible name.</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>Title should be used as accessible name.</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>
	</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>Aria-label should be used as accessible name.</p>
		<p>Title should be used as accessible description.</p>
	</header>
</article>