article element test

Pass Criteria

Reference

Test ar-001: Plain Article

Lorem ipsum...

Code

<article>Lorem ipsum...</article>

Test ar-002: Article with <h1>

Once upon a time

Lorem ipsum…

Code

<article>
	<h1>Once upon a time</h1>
	Lorem ipsum…
</article>

Test ar-003: Article with aria-label

Aria-label should be used as accessible name.

No accessible description.

Code

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

Test ar-004: Article with aria-labelledby

h1 referenced by aria-labelledby

Aria-labelledby should be used as accessible name.

No accessible description.

Code

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

Test ar-005: Article with title attribute

Title should be used as accessible name.

No accessible description.

Code

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

Test ar-006: Article with aria-describedby

h1 referenced by aria-describedby

Aria-describedby should be used as accessible description.

No accessible name.

Code

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

Test ar-007: Article with aria-label & title attributes

Aria-label should be used as accessible name.

Title should be used as accessible description.

Code

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