Paginering testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

nav met class pagination

HTML-voorbeeld:

<nav class="pagination" aria-label="Paginering">
<ul>
    <li><a href="#" aria-label="Ga naar pagina 1"aria-current="true">1</a></li>
    <li><a href="#" aria-label="Ga naar pagina 2">2</a></li>
    <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
    <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
    <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>
</nav>

nav met class pagination en "vorige" en "volgende links.

HTML-voorbeeld:

<nav class="pagination" aria-label="Paginering">
<a href="#" aria-label="Ga naar de vorige pagina" class="adjacent previous">Vorige</a>
<ul>
    <li><a href="#" aria-label="Ga naar pagina 1">1</a></li>
    <li><a href="#" aria-label="Ga naar pagina 2" aria-current="true">2</a></li>
    <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
    <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
    <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>
<a href="#" aria-label="Ga naar de volgende pagina" class="adjacent next">Volgende</a>
</nav>

Uitgeschakelde vorige of volgende link.

HTML-voorbeeld:

<nav class="pagination" aria-label="Paginering">
<span aria-label="Ga naar de vorige pagina" class="disabled">Vorige</span>
<ul>
    <li><a href="#" aria-label="Ga naar pagina 1" aria-current="true">1</a></li>
    <li><a href="#" aria-label="Ga naar pagina 2" >2</a></li>
    <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
    <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
    <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>
<a href="#" aria-label="Ga naar de volgende pagina">Volgende</a>
</nav>

div met class pagination

HTML-voorbeeld:

<div class="pagination">
<ul>
    <li><a href="#" aria-label="Ga naar pagina 1" aria-current="true">1</a></li>
    <li><a href="#" aria-label="Ga naar pagina 2">2</a></li>
    <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
    <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
    <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>
</div>

ul met class pagination

Stel de variabele: --pagination-justify-content in op flex-start om deze visuele weergave te laten werken.

HTML-voorbeeld:

<ul class="pagination">
<li><a href="#" aria-label="Ga naar pagina 1" aria-current="true">1</a></li>
<li><a href="#" aria-label="Ga naar pagina 2">2</a></li>
<li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
<li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
<li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>

Actieve pagina zonder klikbaar element

Stel de variabele: --pagination-justify-content in op flex-start om deze visuele weergave te laten werken.

HTML-voorbeeld:

<ul class="pagination">
<li aria-label="Huidige pagina, pagina 1" aria-current="true">1</li>
<li><a href="#" aria-label="Ga naar pagina 2">2</a></li>
<li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
<li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
<li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>

Actieve pagina zonder klikbaar element: span

Stel de variabele: --pagination-justify-content in op flex-start om deze visuele weergave te laten werken.

HTML-voorbeeld:

<ul class="pagination">
<li><span aria-label="Huidige pagina, pagina 1" aria-current="true">1</span></li>
<li><a href="#" aria-label="Ga naar pagina 2">2</a></li>
<li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
<li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
<li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
</ul>