Accessibilità Digitale

Come realizzare un componente di paginazione accessibile

Quando abbiamo un elenco di prodotti o news, oppure una lista di risultati di ricerca, può essere molto utile inserire un componente per la paginazione, cioè per dividere la visualizzazione in più pagine numeriche che l’utente può scorrere. Per l’accessibilità, suggerirei di evitare lo scroll infinito o il “carica altri” che aggiunge tramite AJAX elementi in tempo reale, che diventano molto difficili per l’utente da consultare e possono creare confusione.

Esempio dimostrativo

Il W3C Design System offre un esempio di paginazione che possiamo analizzare.

<nav aria-label="pagination" class="l-cluster pagination">
	<ul class="pagination__list">
		<li><a href="path/to/page">Previous <span class="visuallyhidden">page</span></a></li>
		<li><a class="pagination__list__first" href="path/to/page"><span class="visuallyhidden">page</span> 1<span class="visuallyhidden"> (first page)</span></a></li>
		<li><a class="ellipsis">&#8230;</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 6</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 7</a></li>
		<li><a href="#" aria-label="page 8" aria-current="page">8</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 9</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 10</a></li>
		<li><a class="ellipsis">&#8230;</a></li>
		<li><a class="pagination__list__last" href="path/to/page"><span class="visuallyhidden">page</span> 20<span class="visuallyhidden"> (last page)</span></a></li>
		<li><a href="path/to/page">Next <span class="visuallyhidden">page</span></a></li>
	</ul>
</nav>

Vediamo gli aspetti principali:

  • La paginazione è contenuta dentro un <nav> con aria-label
  • Gli elementi sono composti da un <ul> con i relativi <li>
  • La singola pagina è un <a>, dove la pagina corrente usa aria-label e aria-current

Esempio reale con WordPress e Bootstrap Italia

Proviamo invece a vedere un esempio di un caso pratico, che ho sviluppato in WordPress e Bootstrap Italia:

<nav class="navigation pagination" aria-label="Paginazione">
    <h2 class="screen-reader-text">Navigazione elementi</h2>
    <div class="nav-links">
        <ul class="page-numbers">
            <li><span aria-current="page" class="page-numbers current">1</span></li>
            <li><a class="page-numbers" href="/news/page/2/">2</a></li>
            <li><a class="page-numbers" href="/news/page/3/">3</a></li>
            <li><span class="page-numbers dots">…</span></li>
            <li><a class="page-numbers" href="/news/page/28/">28</a></li>
            <li><a class="page-numbers" href="/news/page/29/">29</a></li>
            <li><a class="page-numbers" href="/news/page/30/">30</a></li>
            <li><a class="next page-numbers" href="/news/page/2/"><span class="visually-hidden">Elementi successivi</span></a></li>
        </ul>
    </div>
</nav>

Anche in questo caso troviamo l’uso degli elementi <nav>, <ul>, <li>, e degli attributi aria-current e aria-label. L’ultimo <li> contiene il link per la pagina successiva, generalmente indicata da una freccia verso destra.

Codice PHP

Questo è il codice PHP che richiama la paginazione tramite le funzioni di WordPress:

<?php
the_posts_pagination([
'screen_reader_text' => __('Navigazione elementi', 'acme'),
'aria_label' => __('Paginazione', 'acme'),
'mid_size' => 2,
'end_size' => 3,
/* translators: %s here are html tags */
'prev_text' => __(sprintf('%sElementi precedenti%s', '<span class="visually-hidden">', '</span>'), 'acme'),
/* translators: %s here are html tags */
'next_text' => __(sprintf('%sElementi successivi%s', '<span class="visually-hidden">', '</span>'), 'acme'),
'type' => 'list'
]);
?>

Questa funzione the_posts_pagination si occupa di generare già l’HTML necessario, possiamo comunque intervenire per migliorare l’accessibilità.

Link utili

Leggi anche

Ultimi articoli