section element test

Pass Criteria

Reference

Test sc-001: Plain Section

Lorem ipsum...

Code

<section>
	Lorem ipsum...
</section>

Test sc-002: Section with <h1>

Once upon a time

Lorem ipsum...

Code

<section>
	<h1>Once upon a time</h1>
	Lorem ipsum...
</section>

Test sc-003: Section with aria-label

Aria-label should be used as accessible name.

No accessible description.

Code

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

Test sc-004: Section with aria-labelledby

h1 referenced by aria-labelledby

Aria-labelledby should be used as accessible name.

No accessible description.

Code

<section aria-labelledby="sc-004-labelledby">
	<h1 id="sc-004-labelledby">h1 referenced by aria-labelledby</h1>
	<p>Aria-labelledby should be used as accessible name.</p>
</section>

Test sc-005: Section with title attribute

Title should be used as accessible name.

No accessible description.

Code

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

Test sc-006: Section with aria-describedby

h1 referenced by aria-describedby

Aria-describedby should be used as accessible description.

No accessible name.

Code

<section aria-describedby="sc-006-describedby">
	<h1 id="sc-006-describedby">h1 referenced by aria-describedby</h1>
	<p>Aria-describedby should be used as accessible description.</p>
</section>

Test sc-007: section with aria-label & title attributes

Aria-label should be used as accessible name.

Title should be used as accessible description.

Code

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