main element test

Pass Criteria

Reference

Test ma-001: Main element

Title should be used as accessible name.

Skateboards

The skateboard is the way cool kids get around

Longboards

Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.

Electric Skateboards

These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.

Code

<main>
	<p>Title should be used as accessible name.</p>
	<h2>Skateboards</h2>
	<p>The skateboard is the way cool kids get around</p>

	<h3>Longboards</h3>
	<p>Longboards are a type of skateboard with a longer
	wheelbase and larger, softer wheels.</p>

	<h3>Electric Skateboards</h3>
	<p>These no longer require the propelling of the skateboard
	by means of the feet; rather an electric motor propels the board,
	fed by an electric battery.</p>
</main>

Test ma-002: Main with aria-label

Aria-label should be used as accessible name.

No accessible description.

Code

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

Test ma-003: Main with aria-labelledby

h1 referenced by aria-labelledby

Aria-labelledby should be used as accessible name.

No accessible description.

Code

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

Test ma-004: Main with title attribute

Title should be used as accessible name.

No accessible description.

Code

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

Test ma-005: Main with aria-describedby

h1 referenced by aria-describedby

Aria-describedby should be used as accessible description.

No accessible name.

Code

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

Test ma-006: Main with aria-label & title attributes

Aria-label should be used as accessible name.

Title should be used as accessible description.

Code

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