nav element test

Pass Criteria

Reference

Test nv-001: Nav element

Code

<nav>
	<h2>You are here:</h2>
	<ul>
		<li><a href="/">Main</a> →</li>
		<li><a href="/products/">Products</a> →</li>
		<li><a href="/products/dishwashers/">Dishwashers</a> →</li>
		<li><a>Second hand</a></li>
	</ul>
</nav>

Test nv-002: nav with aria-label

Code

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

Test nv-003: nav with aria-labelledby

Code

<nav aria-labelledby="nv-003-labelledby">
	<h1 id="nv-003-labelledby">h1 referenced by aria-labelledby</h1>
	<p>Aria-labelledby should be used as accessible name.<p>
</nav>

Test nv-004: Nav element with title attribute

Code

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

Test nv-005: nav with aria-describedby

Code

<nav aria-describedby="nv-005-describedby">
	<h1 id="nv-005-describedby">h1 referenced by aria-describedby</h1>
	<p>Aria-describedby should be used as accessible description.</p>
</nav>

Test nv-006: nav with aria-label & title attributes

Code

<nav 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>
</nav>