Tabbladen testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

nav met class tabs

HTML-voorbeeld:

<div class="tabs">
    <ul>
        <li><a href="#" aria-current="page">Optie 1</a></li>
        <li><a href="#">Optie 2</a></li>
        <li><a href="#">Optie 3</a></li>
        <li><a href="#">Optie 4</a></li>
    </ul>
</div>

span op aria-current.

HTML-voorbeeld:

<div class="tabs">
    <ul>
        <li><span aria-current="page">Optie 1</span></li>
        <li><a href="#">Optie 2</a></li>
        <li><a href="#">Optie 3</a></li>
        <li><a href="#">Optie 4</a></li>
    </ul>
</div>

aria-current op li

HTML-voorbeeld:

<div class="tabs">
    <ul>
        <li aria-current="page"><a href="#">Optie 1</a></li>
        <li><a href="#">Optie 2</a></li>
        <li><a href="#">Optie 3</a></li>
        <li><a href="#">Optie 4</a></li>
    </ul>
</div>

Section

HTML-voorbeeld:

<section class="tabs">
    <ul>
        <li><a href="#" aria-current="page">Optie 1</a></li>
        <li><a href="#">Optie 2</a></li>
        <li><a href="#">Optie 3</a></li>
        <li><a href="#">Optie 4</a></li>
    </ul>
</section>

Zonder container

• Optie 1
• Optie 2
• Optie 3
• Optie 4

HTML-voorbeeld:

<ul class="tabs">
    <li><a href="#" aria-current="page">Optie 1</a></li>
    <li><a href="#">Optie 2</a></li>
    <li><a href="#">Optie 3</a></li>
    <li><a href="#">Optie 4</a></li>
</ul>