<nav role="navigation" aria-label="Navigazione paginata" class="u-layout-prose">
    <ul class="Grid Grid--fit Grid--alignMiddle u-text-r-xxs">
        <li class="Grid-cell u-textCenter">
            <a href="#" class="u-color-50 u-textClean u-block">
                <span class="Icon-chevron-left u-text-r-m" role="presentation"></span>
                <span class="u-hiddenVisually">Pagina precedente</span>
            </a>
        </li>
        <li class="Grid-cell u-textCenter">
            <a href="/page-1" aria-label="Pagina 1" class="u-padding-r-all u-color-50 u-textClean u-block">
                <span class="u-text-r-m">1</span>
            </a>
        </li>
        <li class="Grid-cell u-textCenter" aria-hidden="true">
            <span class="u-padding-r-all u-block u-color-50">
        <span class="u-text-r-m">...</span>
            </span>
        </li>
        <li class="Grid-cell u-textCenter">
            <a href="/page-12" aria-label="Pagina 12" class="u-padding-r-all u-background-50 u-color-white u-textClean u-block">
                <span class="u-text-r-m">12</span>
            </a>
        </li>
        <li class="Grid-cell u-textCenter">
            <a href="/page-13" aria-label="Pagina 13" class="u-padding-r-all u-color-50 u-textClean u-block">
                <span class="u-text-r-m">13</span>
            </a>
        </li>
        <li class="Grid-cell u-textCenter">
            <a href="/page-13" aria-label="Pagina 14" class="u-padding-r-all u-color-50 u-textClean u-block">
                <span class="u-text-r-m">14</span>
            </a>
        </li>
        <li class="Grid-cell u-textCenter">
            <a href="#" class="u-padding-r-all u-color-50 u-textClean u-block">
                <span class="Icon-chevron-right u-text-r-m" role="presentation"></span>
                <span class="u-hiddenVisually">Pagina successiva</span>
            </a>
        </li>
    </ul>
</nav>

Requisiti per la paginazione

  • l’area cliccabile dei link utilizzati per la paginazione deve essere sufficientemente ampia a ogni risoluzione (>= 40px)
  • auspicabilmente, il numero dei link deve poter esser contenuto in un’unica riga anche sugli schermi più piccoli (es. <= 5)
  • il link che indica la pagina corrente deve differire visibilmente dagli altri
  • nella maggior parte dei casi è utile avere un link alla prima pagina sempre visibile (almeno su desktop)
  • non è necessario mostrare un link all’ultima pagina