Il \u201cread more\u201d \u00e8 un tipo di elemento molto simile all\u2019accordion<\/b> e molto usato nei siti web. Anzi, in buona sostanza potremmo dire che \u00e8 proprio un accordion, e funziona in modo quasi identico.<\/p>\n\nRead more o accordion?<\/h2>\n
La differenza principale in genere sta nel titolo usato per il singolo elemento<\/b>: spesso un accordion generico, come nel caso delle FAQ, riporta il titolo del contenuto che viene a seguire, mentre un elemento \u201cread more\u201d riporta solo la dicitura \u201cLeggi di pi\u00f9\u201d o \u201cScopri\u201d e formule simili. In termini di accessibilit\u00e0 e SEO, non sono dei testi molto adatti<\/b>, ma per le esigenze grafiche e le richieste di cliente finale, si cerca di fare il possibile.<\/p>\n
Altra differenza sostanziale \u00e8 che il \u201cread more\u201d ha solitamente una prima porzione di testo gi\u00e0 visibile<\/b>, e una seconda porzione nascosta<\/b> che deve apparire solo quando si aziona il relativo pulsante.<\/p>\n
Si crea quindi un caso un po\u2019 particolare che bisogna capire come gestire:<\/p>\n
Si tratta quindi di una alternativa piuttosto \u201ccustom<\/b>\u201d del classico accordion.<\/p>\nEsempio pratico con WordPress ed Elementor<\/h2>\n
Proviamo a vedere meglio il codice di un esempio che ho realizzato per un sito custom<\/b> fatto con WordPress<\/b> e Bootstrap Italia<\/b>.<\/p>\n
In questo caso ho usato Elementor<\/b> sviluppando un Widget Custom<\/a> che permettesse al cliente di creare un elemento \u201cRead more\u201d direttamente da editor visuale in backend. La soluzione \u00e8 sicuramente migliorabile, ma a mio avviso rispecchia i requisiti minimi di accessibilit\u00e0, tentando di mantenere comunque una struttura che sia facilmente gestibile da un utente meno esperto.<\/p>\n Rispetto ad altri Visual Builder<\/b> che ho usato, come Divi o WP Bakery, Elementor<\/b> sembra essere quello che permette pi\u00f9 facilmente la personalizzazione<\/b> da parte di noi sviluppatori web, e che allo stesso tempo rispetta in modo pi\u00f9 fedele e \u201cdeveloper-friendly\u201d le linee guida sull\u2019accessibilit\u00e0<\/b>.<\/p>\n A parte i vari <div> creati di default da Elementor, questa sezione \u00e8 divisa in due colonne<\/b>, a sinistra abbiamo un\u2019immagine e a destra il testo. Questo testo viene mostrato solo parzialmente e termina con i tre puntini di sospensione, viene poi sostituito dal secondo testo, inizialmente nascosto, che appare solo all\u2019attivazione del pulsante \u201cLeggi di pi\u00f9\u201d.<\/p>\n Vi \u00e8 quindi un piccolo trucchetto, che mira a risolvere il problema di come rendere il secondo testo una continuazione sensata del primo. In pratica, da backend vi sono due campi di testo<\/b>, il primo che contiene il testo di anteprima<\/b>, e il secondo che contiene sia il testo di anteprima sia la sua continuazione<\/b>.<\/p>\n In questo modo, rendiamo pi\u00f9 semplice all\u2019utente che gestisce il sito capire come impostare questo componente personalizzato<\/b>, perch\u00e9 pu\u00f2 inserire il testo completo nel secondo campo, copiarne la prima parte, incollarla nel primo campo di testo e, se lo desidera, inserire in fondo i tre puntini di sospensione.<\/p>\n Il risultato finale \u00e8 che attivando il pulsante, il primo testo viene nascosto<\/b>, e il secondo testo ne prende il posto<\/b>, generalmente riuscendo anche a mantenere la stessa altezza<\/b> di partenza dell\u2019elemento iniziale, che \u00e8 un altro aspetto da non sottovalutare.<\/p>\n Infine, in questo modo \u00e8 pi\u00f9 semplice \u201cspezzare\u201d il testo: l\u2019utente che inserisce i campi in backend non deve pi\u00f9 di tanto preoccuparsi di come dividere<\/b> tra \u201cprima parte\u201d e \u201cseconda parte\u201d, perch\u00e9 come abbiamo detto pu\u00f2 semplicemente copiare e incollare l<\/b>e prime righe<\/b> del testo completo.<\/p>\n Nel nostro codice HTML abbiamo molta carne al fuoco, ma proviamo a fare un po\u2019 di ordine e capire quali sono gli elementi principali<\/b> da tenere in considerazione:<\/p>\n \u00c8 importante che il contenuto e l\u2019elemento <label> siano a pari livello del checkbox, cos\u00ec da renderli raggiungibili in CSS usando il selettore sibling<\/a> \u201c~\u201d, ad esempio cos\u00ec:<\/p>\n Ovviamente, come gi\u00e0 accennato anche per gli accordion, la soluzione non \u00e8 ideale per i crawler dei motori di ricerca<\/b>, che riusciranno ad indicizzare solo la prima parte visibile del testo (anteprima), tuttavia \u00e8 una buona via di mezzo per incontrare le richieste del cliente.<\/p>\n Il \u201cread more\u201d \u00e8 un tipo di elemento molto simile all\u2019accordion e molto usato nei siti web. Anzi, in buona sostanza potremmo dire che \u00e8 proprio un accordion, e funziona in modo quasi identico. Read more o accordion? La differenza principale in genere sta nel titolo usato per il singolo elemento: spesso un accordion generico, […]<\/p>\n","protected":false},"author":2,"featured_media":261,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-185","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\/185"}],"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=185"}],"version-history":[{"count":3,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/185\/revisions\/214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/261"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<div class=\"elementor-element elementor-element-d9aab0c e-grid e-con-boxed e-con e-parent e-lazyloaded\" data-id=\"d9aab0c\" data-element_type=\"container\">\r\n <div class=\"e-con-inner\">\r\n <div class=\"elementor-element elementor-element-fc3befe e-con-full e-flex e-con e-child animated slideInLeft\" data-id=\"fc3befe\" data-element_type=\"container\" data-settings=\"{"animation":"slideInLeft"}\">\r\n <div class=\"elementor-element elementor-element-5ff33aa elementor-widget elementor-widget-image\" data-id=\"5ff33aa\" data-element_type=\"widget\" data-settings=\"{"_animation":"none"}\" data-widget_type=\"image.default\">\r\n <div class=\"elementor-widget-container\">\r\n <img fetchpriority=\"high\" decoding=\"async\" width=\"764\" height=\"700\" src=\"image.jpg\" class=\"attachment-large size-large wp-image-49326\" alt=\"\" srcset=\"image.jpg 764w, image-300x275.jpg 300w, image-273x250.jpg 273w\" sizes=\"(max-width: 764px) 100vw, 764px\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"elementor-element elementor-element-bdbe2a7 e-con-full e-flex e-con e-child animated slideInRight\" data-id=\"bdbe2a7\" data-element_type=\"container\" data-settings=\"{"animation":"slideInRight"}\">\r\n <div class=\"elementor-element elementor-element-be66a43 elementor-widget elementor-widget-readmore-custom\" data-id=\"be66a43\" data-element_type=\"widget\" data-settings=\"{"_animation":"none"}\" data-widget_type=\"readmore-custom.default\">\r\n <div class=\"elementor-widget-container\">\r\n <input type=\"checkbox\" id=\"readmore-handler-66b0b89f9e5e2\" class=\"sr-only visually-hidden\" aria-expanded=\"false\" aria-controls=\"readmore-content-wrapper-66b0b89f9e5e2\" tabindex=\"0\" onchange=\"toggleReadMore('#readmore-content-wrapper-66b0b89f9e5e2')\" data-bs-target=\"readmore-content-wrapper-66b0b89f9e5e2\">\r\n <h2><span class=\"ez-toc-section\" id=\"titolo\" ez-toc-data-id=\"#titolo\"><\/span>Titolo<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n <div id=\"readmore-content-wrapper-66b0b89f9e5e2\" class=\"readmore-content-wrapper\">\r\n <div class=\"readmore-content-preview\">\r\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quasi ut exercitationem veniam cum, dolorem, iusto, in esse velit praesentium illo vel? Aliquid, tempore aspernatur dolor expedita voluptatibus dolorem!<\/p>\r\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quasi ut exercitationem veniam cum, dolorem, iusto, in esse velit praesentium illo vel? Aliquid, tempore aspernatur dolor expedita voluptatibus dolorem!<\/p>\r\n <p>Questo testo finisce qui...<\/p>\r\n <\/div>\r\n <div class=\"readmore-content-full\" style=\"display: none;\">\r\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quasi ut exercitationem veniam cum, dolorem, iusto, in esse velit praesentium illo vel? Aliquid, tempore aspernatur dolor expedita voluptatibus dolorem!<\/p>\r\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quasi ut exercitationem veniam cum, dolorem, iusto, in esse velit praesentium illo vel? Aliquid, tempore aspernatur dolor expedita voluptatibus dolorem!<\/p>\r\n <p>Seconda parte di testo ...<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"handler-label m-0\"><label for=\"readmore-handler-66b0b89f9e5e2\" tabindex=\"-1\">Leggi di pi\u00f9<\/label><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script>\r\nfunction toggleReadMore(selector = null)\r\n{\r\n if (!selector) {\r\n selector = jQuery(this).attr('data-bs-target');\r\n }\r\n\r\n let previewContent = jQuery(selector).find('.readmore-content-preview');\r\n let fullContent = jQuery(selector).find('.readmore-content-full');\r\n\r\n jQuery(previewContent).toggle();\r\n jQuery(fullContent).toggle();\r\n}\r\n<\/script><\/code><\/pre>\nMostrare e nascondere il testo completo<\/h2>\n
\n
input[type=\u201dcheckbox\u201d]:checked ~ .handler-label label { opacity:1; }\r\ninput[type=\u201dcheckbox\u201d]:checked ~ .readmore-content-full { display:block; }\r\ninput[type=\u201dcheckbox\u201d]:checked ~ .readmore-content-preview { display:none; }<\/code><\/pre>\nLink utili<\/h2>\n
\n
Leggi anche<\/h2>\n
\n