Documentazione ed esempi del componente di paginazione utile per indicare una serie di contenuti correlati tra più pagine.
Panoramica
I collegamenti della paginazione sono contenuti per praticità in un elemento <nav class="pagination-wrapper"> per dare la possibilità agli screenreader, e altre tecnologie assistive, di identificarli come una sezione di navigazione.
Poiché è molto probabile che la pagina possa contenere più di un elemento <nav class="pagination-wrapper"> è consigliabile inserire un attributo aria-label con la descrizione del suo scopo. Ad esempio, se il componente di impaginazione viene utilizzato per navigare tra una serie di risultati di ricerca, un’etichetta appropriata potrebbe essere aria-label="Pagine dei risultati di ricerca".
Stato disabilitato e attivo
I link della paginazione assumonono uno stato disabilitato usando la classe .disabled nel tag <li>.
Per indicare la pagina attiva corrente utilizzare l’attributo aria-current="page" nel tag <a>, l’aspetto grafico cambierà di conseguenza.
Disabilitazione link
La classe .disabled usa pointer-events: none per provare a disabilitare l’attivazione dei comportamenti di default dei link <a>, ma tale funzionalità non è gestita in alcuni browsers. Oltre a questo, la navigazione attraverso tastiera rimane abilitata, per cui utenti che utilizzano tecnologie assistive saranno comunque in grado di attivare tali link. Per ovviare a questo problema, è possibile aggiungere l’attributo tabindex="-1", e utilizzare Javascript per disabilitare le loro funzionalità.
È inoltre consigliabile applicare aria-hidden="true" ai link disabilitati per evitare che vengano considerati nel conteggio degli elementi totali in lista fornito dagli screen reader.
In alternativa per la paginazione si può sostituire il link disabilitato con uno <span> avente classe .page-link e contenuto in un <li> con classe .nolink (es.: <li class="page-item"><span class="page-link">1</span></li>).
Allineamento
Grazie alle utilità di Flexbox, si può allineare facilmente il blocco della paginazione.
Sui dispositivi mobile la paginazione è centrata per default.
Navigazione centrata
Per centrare la navigazione aggiungere la classe justify-content-center al tag <nav>.
Navigazione allineata a destra
Per allineare a destra la navigazione aggiungere la classe justify-content-end al tag <nav>.
Responsive
Con i dovuti accorgimenti sopraelencati e inserendo alcune classi delle utilità display si può trasformare la paginazione in base alla risoluzione del dispositivo in uso dell’utente.
Funzioni aggiuntive
La paginazione base può essere integrata con elementi aggiuntivi per rendere più fruibile la navigazione quando il numero di pagine è elevato. È inoltre disponbile una versione semplificata ottimizzata per dispositivi mobile.
More
Quando è presente un grande numero di pagine è consigliabile visualizzare unicamente le pagine più prossime a quella corrente, inserendo delle ellissi (…) fra queste e la prima ed ultima pagina. Non essendo collegate a nessuna pagina le ellissi vanno inserite in un tag <span>.
Page changer
Per velocizzare la navigazione è possibile inserire un menu “Page changer”.
Jump to page
Con l’elemento aggiuntivo “Jump to page” l’utente può specificare un numero di pagina concreto.
Simple mode
La paginazione in versione “Simple mode” è ottimizzata per i dispositivi mobile. Può essere utilizzata anche su tablet e desktop quando il numero di pagine è ridotto.
Link testuali
Le icone chevron utilizzate come link di navigazione possono essere sostituite da link testuali come “precedente” e “successiva”. In tal caso al tag <a> contenente il testo dovrà essere aggiunta la classe .text. Es: <a class="page-link text" href="#">Precedente</a>.
Notare come sia stato inserito il testo “Pagina” in un elemento <span class="sr-only"> invisibile su schermo ma enunciabile dagli screen reader per facilitare la comprensione agli utenti che utilizzano tecnologie assistive.
Total number
Aggiungendo al classe .pagination-total al tag <nav> che contiene la paginazione è possibile indicare il numero totale di pagine all’interno di un tag <p> collocato priam della chiusura del <nav>.