Quando abbiamo un elenco di prodotti o news<\/b>, oppure una lista di risultati di ricerca<\/b>, pu\u00f2 essere molto utile inserire un componente per la paginazione, cio\u00e8 per dividere la visualizzazione in pi\u00f9 pagine numeriche che l\u2019utente pu\u00f2 scorrere<\/b>. Per l\u2019accessibilit\u00e0, suggerirei di evitare lo scroll infinito<\/b> o il \u201ccarica altri\u201d che aggiunge tramite AJAX elementi in tempo reale, che diventano molto difficili per l\u2019utente da consultare e possono creare confusione.<\/p>\n\nEsempio dimostrativo<\/h2>\n
Il W3C Design System offre un esempio di paginazione<\/a> che possiamo analizzare.<\/p>\n Vediamo gli aspetti principali:<\/p>\n Proviamo invece a vedere un esempio di un caso pratico, che ho sviluppato in WordPress<\/strong> e Bootstrap Italia<\/strong>:<\/p>\n Anche in questo caso troviamo l\u2019uso degli elementi <nav><\/b>, <ul><\/b>, <li><\/b>, e degli attributi aria-current<\/b> e aria-label<\/b>. L\u2019ultimo <li> contiene il link per la pagina successiva<\/b>, generalmente indicata da una freccia verso destra.<\/p>\n Questo \u00e8 il codice PHP<\/b> che richiama la paginazione tramite le funzioni di WordPress<\/b>:<\/p>\n Questa funzione the_posts_pagination<\/a> si occupa di generare gi\u00e0 l\u2019HTML necessario, possiamo comunque intervenire per migliorare l\u2019accessibilit\u00e0<\/b>.<\/p>\n Quando abbiamo un elenco di prodotti o news, oppure una lista di risultati di ricerca, pu\u00f2 essere molto utile inserire un componente per la paginazione, cio\u00e8 per dividere la visualizzazione in pi\u00f9 pagine numeriche che l\u2019utente pu\u00f2 scorrere. Per l\u2019accessibilit\u00e0, suggerirei di evitare lo scroll infinito o il \u201ccarica altri\u201d che aggiunge tramite AJAX elementi […]<\/p>\n","protected":false},"author":2,"featured_media":228,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/203"}],"collection":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/comments?post=203"}],"version-history":[{"count":3,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/203\/revisions\/218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<nav aria-label=\"pagination\" class=\"l-cluster pagination\">\r\n\t<ul class=\"pagination__list\">\r\n\t\t<li><a href=\"path\/to\/page\">Previous <span class=\"visuallyhidden\">page<\/span><\/a><\/li>\r\n\t\t<li><a class=\"pagination__list__first\" href=\"path\/to\/page\"><span class=\"visuallyhidden\">page<\/span> 1<span class=\"visuallyhidden\"> (first page)<\/span><\/a><\/li>\r\n\t\t<li><a class=\"ellipsis\">…<\/a><\/li>\r\n\t\t<li><a href=\"path\/to\/page\"><span class=\"visuallyhidden\">page<\/span> 6<\/a><\/li>\r\n\t\t<li><a href=\"path\/to\/page\"><span class=\"visuallyhidden\">page<\/span> 7<\/a><\/li>\r\n\t\t<li><a href=\"#\" aria-label=\"page 8\" aria-current=\"page\">8<\/a><\/li>\r\n\t\t<li><a href=\"path\/to\/page\"><span class=\"visuallyhidden\">page<\/span> 9<\/a><\/li>\r\n\t\t<li><a href=\"path\/to\/page\"><span class=\"visuallyhidden\">page<\/span> 10<\/a><\/li>\r\n\t\t<li><a class=\"ellipsis\">…<\/a><\/li>\r\n\t\t<li><a class=\"pagination__list__last\" href=\"path\/to\/page\"><span class=\"visuallyhidden\">page<\/span> 20<span class=\"visuallyhidden\"> (last page)<\/span><\/a><\/li>\r\n\t\t<li><a href=\"path\/to\/page\">Next <span class=\"visuallyhidden\">page<\/span><\/a><\/li>\r\n\t<\/ul>\r\n<\/nav><\/code><\/pre>\n\n
Esempio reale con WordPress e Bootstrap Italia<\/h2>\n
<nav class=\"navigation pagination\" aria-label=\"Paginazione\">\r\n <h2 class=\"screen-reader-text\">Navigazione elementi<\/h2>\r\n <div class=\"nav-links\">\r\n <ul class=\"page-numbers\">\r\n <li><span aria-current=\"page\" class=\"page-numbers current\">1<\/span><\/li>\r\n <li><a class=\"page-numbers\" href=\"\/news\/page\/2\/\">2<\/a><\/li>\r\n <li><a class=\"page-numbers\" href=\"\/news\/page\/3\/\">3<\/a><\/li>\r\n <li><span class=\"page-numbers dots\">\u2026<\/span><\/li>\r\n <li><a class=\"page-numbers\" href=\"\/news\/page\/28\/\">28<\/a><\/li>\r\n <li><a class=\"page-numbers\" href=\"\/news\/page\/29\/\">29<\/a><\/li>\r\n <li><a class=\"page-numbers\" href=\"\/news\/page\/30\/\">30<\/a><\/li>\r\n <li><a class=\"next page-numbers\" href=\"\/news\/page\/2\/\"><span class=\"visually-hidden\">Elementi successivi<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/nav><\/code><\/pre>\nCodice PHP<\/h3>\n
<?php\r\nthe_posts_pagination([\r\n'screen_reader_text' => __('Navigazione elementi', 'acme'),\r\n'aria_label' => __('Paginazione', 'acme'),\r\n'mid_size' => 2,\r\n'end_size' => 3,\r\n\/* translators: %s here are html tags *\/\r\n'prev_text' => __(sprintf('%sElementi precedenti%s', '<span class=\"visually-hidden\">', '<\/span>'), 'acme'),\r\n\/* translators: %s here are html tags *\/\r\n'next_text' => __(sprintf('%sElementi successivi%s', '<span class=\"visually-hidden\">', '<\/span>'), 'acme'),\r\n'type' => 'list'\r\n]);\r\n?><\/code><\/pre>\nLink utili<\/h2>\n
\n
Leggi anche<\/h2>\n
\n