L\u2019elemento comunemente chiamato \u201caccordion\u201d viene usato per mostrare e nascondere delle porzioni di contenuto<\/b>. In genere il primo della lista \u00e8 aperto e mostra il testo, mentre i successivi sono nascosti. In alcuni casi, si preferisce far aprire un elemento alla volta<\/b> chiudendo quello aperto in precedenza, mentre in altri casi si sceglie di permettere all\u2019utente di mantenerli tutti aperti.<\/p>\n\nCosa sapere per l’accessibilit\u00e0<\/h2>\n
In termini di accessibilit\u00e0, e anche di SEO, l\u2019accordion \u00e8 forse l\u2019elemento meno adatto<\/b>, perch\u00e9 l\u2019utente per poter vedere il testo nascosto deve prima sapere in qualche modo che questo \u00e8 presente nella pagina<\/b>. Solitamente per\u00f2, gli elementi accordion chiusi hanno il contenuto nascosto (cio\u00e8 in display:none<\/b>) e questo significa che il contenuto non viene letto n\u00e9 dagli screen reader<\/b> e nemmeno dai crawler<\/b> dei motori di ricerca.<\/p>\n
L\u2019accordion potrebbe essere usato anche per mostrare o nascondere dei campi di un form, ad esempio in un modulo fatto a step per il pagamento<\/b> (login, informazioni di spedizione, informazioni di fatturazione, riepilogo ordine, informazioni di pagamento).<\/p>\n
Come per i men\u00f9 di navigazione, possiamo usare dei button<\/b> e avvalerci dell\u2019attributo aria-expanded<\/b> per determinare l\u2019apertura e la chiusura di un accordion<\/b>. I button saranno sempre visibili, mentre il contenuto degli accordion chiusi sar\u00e0 nascosto.<\/p>\nAnalisi di un esempio dimostrativo<\/h2>\n
Vediamo un esempio fornito da WAI-ARIA<\/a>:<\/p>\n Vediamo anche il codice di esempio di un caso pratico che ho preso da un sito che ho realizzato, dove nel caso specifico viene inserita una sezione FAQ divisa per categorie<\/b>, quindi abbiamo una categoria di FAQ che presenta un elenco fatto ad accordion<\/b>, dove ogni accordion <\/b>\u00e8 una singola FAQ<\/b>. Questa la porzione di codice di esempio:<\/p>\n Quest’ultimo esempio \u00e8 stato fatto usando Bootstrap Italia e WordPress<\/b>, e gli elementi principali sono:<\/p>\n L\u2019elemento comunemente chiamato \u201caccordion\u201d viene usato per mostrare e nascondere delle porzioni di contenuto. In genere il primo della lista \u00e8 aperto e mostra il testo, mentre i successivi sono nascosti. In alcuni casi, si preferisce far aprire un elemento alla volta chiudendo quello aperto in precedenza, mentre in altri casi si sceglie di permettere […]<\/p>\n","protected":false},"author":2,"featured_media":260,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-181","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\/181"}],"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=181"}],"version-history":[{"count":3,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/181\/revisions\/213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Analisi di un caso reale<\/h2>\n
<div class=\"posts-listing posts-listing-faq\">\r\n <h3 id=\"titolo-sezione-1-faq\" class=\"h4\">Titolo della sezione delle FAQ<\/h3>\r\n <ul class=\"accordion list-archive-faq\" id=\"accordion-66b0afcfe9800-\">\r\n <li class=\"accordion-item\">\r\n <article> \r\n <h4 class=\"accordion-header\" id=\"accordion-66b0afcfe9800-category-f12b5109cdb73872918fe9488fdb486b-element-1-heading\">\r\n <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#accordion-66b0afcfe9800-category-f12b5109cdb73872918fe9488fdb486b-element-1-content\" aria-expanded=\"true\" aria-controls=\"accordion-66b0afcfe9800-category-f12b5109cdb73872918fe9488fdb486b-element-1-content\">Titolo dell'accordion e quindi della singola FAQ<\/button>\r\n <\/h4>\r\n <div id=\"accordion-66b0afcfe9800-category-f12b5109cdb73872918fe9488fdb486b-element-1-content\" class=\"accordion-collapse collapse show\" data-bs-parent=\"#accordion-66b0afcfe9800\" role=\"region\" aria-labelledby=\"accordion-66b0afcfe9800-category-f12b5109cdb73872918fe9488fdb486b-element-1-heading\">\r\n <div class=\"accordion-body\">Contenuto testuale dell'accordion<\/div>\r\n <\/div>\r\n <\/article>\r\n <\/li>\r\n <\/ul>\r\n<\/div><\/code><\/pre>\n\n
Link utili<\/h2>\n
\n
Leggi anche<\/h2>\n
\n