{"id":111,"date":"2024-08-12T11:00:14","date_gmt":"2024-08-12T11:00:14","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=111"},"modified":"2024-08-23T11:50:24","modified_gmt":"2024-08-23T11:50:24","slug":"come-sviluppare-un-sito-web-accessibile","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-sviluppare-un-sito-web-accessibile\/","title":{"rendered":"Come sviluppare un sito web accessibile"},"content":{"rendered":"<p>Molte persone non se ne rendono conto, ma <b>il vantaggio dei siti web accessibili<\/b> \u00e8 che sono tendenzialmente <b>molto pi\u00f9 idonei al ricevere un alto punteggio<\/b> da parte dei motori di ricerca.<\/p>\n<p>Perch\u00e9? La spiegazione \u00e8 semplice: <b>l\u2019uso corretto dei tag HTML appropriati aiuta il crawler<\/b>, cio\u00e8 il bot del motore di ricerca che scansiona il sito web, <b>ad organizzare i contenuti in modo efficiente<\/b>. Inoltre, <b>un sito web accessibile \u00e8 generalmente pi\u00f9 veloce e pi\u00f9 performante<\/b>, perch\u00e9 usa meno elementi di disturbo (si cerca di evitare l\u2019uso di video esterni, immagini pesanti, caroselli di immagini a scorrimento, gallerie).<\/p>\n\n<div class=\"textblock background-color-1\">\n<p><strong>Importante<\/strong>: Da giugno 2025 entra in vigore l&#8217;obbligo per molti privati di avere un sito web accessibile. Leggi i dettagli qui: <a href=\"https:\/\/www.accessibilita.digital\/accessibilita-gli-obblighi-da-giugno-2025-per-i-privati\/\">Accessibilit\u00e0: Gli obblighi da Giugno 2025 per i privati<\/a><\/p>\n<\/div>\n<h2><a id=\"toc-1\"><\/a>Accenni di HTML e vantaggi SEO<\/h2>\n<p>Questo <b>significa che i siti web accessibili devono essere brutti<\/b> ma sono sempre indicizzati bene?<\/p>\n<p><b>No, non \u00e8 cos\u00ec<\/b>: un sito web accessibile non \u00e8 necessariamente brutto, anzi, e allo stesso tempo non \u00e8 detto che venga ben indicizzato. \u00c8 possibile che altri siti web che fanno una <b>SEO molto aggressiva<\/b> siano indicizzati meglio, anche se poco accessibili.<\/p>\n<p>Per capirci meglio: <b>un sito web che punta tutto sulla SEO<\/b> probabilmente avr\u00e0 parole chiave che sono completamente fuori contesto, <b>ingannando il crawler<\/b> per ottenere un punteggio pi\u00f9 alto, e magari ci riuscir\u00e0 pure!<\/p>\n<p>Tuttavia, nel lungo termine, come ormai si vede dai frequenti aggiornamenti agli algoritmi di Google ma anche di altri motori di ricerca, <b>la strada pi\u00f9 efficiente \u00e8 quella di avere contenuti ben strutturati<\/b>.<\/p>\n<p>Certo, rimarr\u00e0 sempre il problema del cliente che vuole essere indicizzato nelle prime posizioni in pochi giorni, e per il quale sar\u00e0 quindi necessario fare una <b>landing page in tutta velocit\u00e0<\/b> a 300 euro, ma questi sono dei casi limite che a mio avviso non vale la pena prendere in considerazione per quello di cui ci stiamo occupando.<\/p>\n<h4><a id=\"toc-1-1\"><\/a>I Core Web Vitals e l\u2019accessibilit\u00e0<\/h4>\n<p>Sappiamo che Google tiene molto in considerazione i cosiddetti <b>Core Web Vitals<\/b>, cio\u00e8 quegli <b>indicatori di performance<\/b> del sito web che aiutano a determinare il punteggio che una pagina avr\u00e0 nei risultati di ricerca. <b>Una pagina lenta avr\u00e0 un punteggio inferiore di una pagina veloce<\/b>, a parit\u00e0 di contenuti.<\/p>\n<p>Da qualche tempo inoltre nei Core Web Vitals \u00e8 incluso anche <b>l\u2019indice di accessibilit\u00e0<\/b>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-112 size-large\" src=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals-1024x786.png\" alt=\"I core web vitals ora contengono anche l'indicatore di accessibilit\u00e0\" width=\"1024\" height=\"786\" srcset=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals-1024x786.png 1024w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals-300x230.png 300w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals-768x589.png 768w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals-500x384.png 500w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals-326x250.png 326w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-2-Core-Web-Vitals.png 1058w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Scansione effettuata con <a href=\"https:\/\/pagespeed.web.dev\/analysis\/https-www-devlancer-it\/2j6qa0hu8y?form_factor=desktop\" rel=\"nofollow noopener\">Pagespeed Insights<\/a><\/figcaption><\/figure>\n<p>Diventa quindi importante <b>progettare un sito web in ottica accessibile<\/b> fin da subito: il vantaggio \u00e8 anche di ottenere un <b>migliore punteggio per l\u2019indicizzazione<\/b>, fattore che pu\u00f2 essere usato anche come leva commerciale verso i propri clienti.<\/p>\n<h4><a id=\"toc-1-2\"><\/a>I tag HTML pi\u00f9 importanti da tenere in considerazione<\/h4>\n<p>Senza dubbio \u00e8 utile conoscere almeno i tag HTML principali che servono sia per l\u2019accessibilit\u00e0 che per la SEO:<\/p>\n<h5><a id=\"toc-1-2-1\"><\/a>Titoli (intestazioni da h1 a h6)<\/h5>\n<ul>\n<li><strong>Accessibilit\u00e0<\/strong>: i titoli vengono usati per <b>dividere <\/b><b>il contenuto<\/b><b> in sezioni e capitoli<\/b>, come fosse l\u2019indice di un libro, rendendo gli argomenti pi\u00f9 facilmente fruibili. L\u2019utente pu\u00f2 \u201csaltare\u201d (skippare) da un heading all\u2019altro premendo un tasto scorciatoia della propria tecnologia assistiva, ad esempio il tasto \u201cH\u201d (che sta per <i>Heading<\/i>, cio\u00e8 Intestazione). \u00c8 una buona pratica <b>fare in modo che i titoli siano concisi ma esplicativi<\/b>, meglio dividere la pagina in pi\u00f9 capitoli brevi ben strutturati, piuttosto di avere un unico testo molto lungo ma poco strutturato.<\/li>\n<li><strong>SEO<\/strong>: i titoli hanno <b>un peso maggiore rispetto al testo normale<\/b> e dovrebbero contenere le parole chiave utili per il testo che li segue.<\/li>\n<li><strong>Importante<\/strong>: ogni pagina web dovrebbe avere <b>un solo tag h1<\/b><\/li>\n<\/ul>\n<h5><a id=\"toc-1-2-2\"><\/a>Immagini (tag HTML \u201cimg\u201d, \u201cfigure\u201d, \u201cfigcaption\u201d, \u201cpicture\u201d)<\/h5>\n<ul>\n<li><strong>Accessibilit\u00e0<\/strong>: le <b>immagini decorative<\/b>, come le icone, possono avere un <b>testo alternativo vuoto<\/b> (attributo \u201calt\u201d), ma questo attributo deve essere presente. Invece, per le <b>immagini contestuali<\/b>, ad esempio l\u2019immagine che mostra <b>la preparazione <\/b><b>di una<\/b><b> ricetta<\/b>, dovrebbe essere inserito, come testo alternativo, un testo descrittivo. Il testo alternativo pu\u00f2 essere breve, non serve spiegare ogni dettaglio, ma sicuramente <b>non deve essere banale<\/b>. Ad esempio, scrivere \u201cFoto dell\u2019impasto dei pancake\u201d non ha senso, piuttosto scriviamo \u201cL\u2019impasto dei pancake \u00e8 quasi pronto nel contenitore, aggiungiamo gli aromi\u201d. Dobbiamo fingere di non poter vedere l\u2019immagine e di avere qualcuno che ce la deve spiegare brevemente a voce.<br \/>\nSe possibile, <b>per le immagini contestuali<\/b> racchiudiamo il tag \u201cimg\u201d dentro a un tag \u201cfigure\u201d, che pu\u00f2 usare anche il \u201cfigcaption\u201d come didascalia, e usiamo il tag \u201cpicture\u201d quando abbiamo versioni diverse per la stessa immagine, ad esempio per le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" rel=\"nofollow noopener\">immagini responsive<\/a>. Il tag \u201cpicture\u201d pu\u00f2 essere inserito dentro a \u201cfigure\u201d e l\u2019img pu\u00f2 essere inserita in entrambi.<\/li>\n<li><strong>SEO<\/strong>: <b>le immagini pesano molto sulla pagina<\/b> e dovrebbero essere <b>ottimizzate per ridurne peso e dimensioni<\/b>. Nella maggior parte dei casi, una immagine di larghezza o altezza massima di <b>1000px<\/b> \u00e8 pi\u00f9 che sufficiente, a meno di immagini che debbano vedersi a schermo intero, e pu\u00f2 essere salvata con programmi come GIMP o Photoshop a <b>qualit\u00e0 80%<\/b>, con poca differenza percettiva rispetto alla qualit\u00e0 massima, ma con un peso molto inferiore. In genere si usano i <b>JPEG<\/b> per le immagini che non contengono testo all\u2019interno, e i <b>PNG<\/b> quando ci sono dei testi sovraimpressi. Nuovi formati che si stanno diffondendo e che sono consigliati perch\u00e9 pi\u00f9 ottimizzati sono <b>il WebP e l\u2019AVIF<\/b>. Da tenere presente che il <b>testo alternativo<\/b> (attributo \u201calt\u201d) pu\u00f2 essere utile anche per la SEO.<\/li>\n<\/ul>\n<h5><a id=\"toc-1-2-3\"><\/a>Link (tag HTML \u201ca\u201d)<\/h5>\n<ul>\n<li><strong>Accessibilit\u00e0<\/strong>: i collegamenti ipertestuali (link) <b>devono contenere un testo e il testo deve essere utile<\/b>. Da evitare quindi l\u2019uso di \u201cclicca qui\u201d, \u201cscopri di pi\u00f9\u201d e formule simili. Una buona pratica \u00e8 di <b>usare come testo lo stesso titolo (tag title) della pagina di destinazione<\/b>. Inoltre i link che puntano a siti esterni andrebbero indicati con una icona apposita.<\/li>\n<li><strong>SEO<\/strong>: i link aiutano il <b>crawler<\/b>, cio\u00e8 il bot del motore di ricerca che scansiona un sito web, a <b>trovare nuovi contenuti<\/b>, sia interni che esterni. Avere molti link interni, purch\u00e9 siano utili e senza esagerare, \u00e8 <b>un ottimo modo per ottenere un maggior punteggio PageRank<\/b> e quindi avere <b>pagine meglio indicizzate<\/b>. Anche i link esterni aggiungono valore, se sono link utili, soprattutto se puntano ad altri siti che gestiamo, ad esempio nel caso di aziende che rientrano nello stesso macro-brand, oppure di portali secondari che gestiamo oltre al nostro blog principale.<\/li>\n<li><strong>Importante<\/strong>: \u00e8 molto utile <b>conoscere i vari attributi di questo tag<\/b>, e soprattutto l\u2019attributo \u201crel\u201d per quanto riguarda almeno i valori <i>noreferrer<\/i>, <i>nofollow<\/i>, <i>external<\/i>. Nel caso si usi il <b>target<\/b><b>=\u201d_blank\u201d<\/b> per aprire il link in una nuova scheda, \u00e8 buona pratica usare anche <b>rel<\/b><b>=\u201dnoopener\u201d<\/b> per evitare <a href=\"https:\/\/owasp.org\/www-community\/attacks\/Reverse_Tabnabbing\" rel=\"nofollow noopener\">vulnerabilit\u00e0<\/a>, anche se al giorno d\u2019oggi la situazione \u00e8 molto migliorata.<\/li>\n<\/ul>\n<h5><a id=\"toc-1-2-4\"><\/a>Formattazione del testo<\/h5>\n<p>Dopo aver imparato bene questi tag, i successivi che posso consigliare riguardano <b>la formattazione del testo<\/b>, anche questi molto utili sia per l\u2019accessibilit\u00e0 che per la SEO:<\/p>\n<ul>\n<li><strong>grassetto<\/strong>, sottolineato, corsivo, ecc. tramite i tag: <i>b, strong, u, i, em<\/i><\/li>\n<li><strong>liste<\/strong>, con i tag: <i>ul, ol, li<\/i>, ma anche <i>dl, dt<\/i> e <i>dd<\/i><\/li>\n<li>altri <strong>formati multimediali<\/strong> tramite i tag: <i>video, audio, object, canvas, svg<\/i>, ecc.<\/li>\n<li>le <strong>tabelle<\/strong>, tramite i tag: <i>table, thead, tbody, th, td, tr, caption, summary<\/i><\/li>\n<\/ul>\n<h5><a id=\"toc-1-2-5\"><\/a>Form<\/h5>\n<p>Infine, senza dubbio \u00e8 bene sapere <b>tutto quello che riguarda i form<\/b>, compresi i tag <b>fieldset<\/b>, <b>input<\/b>, <b>label<\/b> e <b>button<\/b>, conoscenza base fondamentale per l\u2019accessibilit\u00e0, con i siti web moderni che fanno ormai ampio uso dei moduli digitali, sempre pi\u00f9 usati anche dalle Pubbliche Amministrazioni per il rilascio dei documenti.<\/p>\n<p>Tutti questi argomenti si possono approfondire su vari portali, tra i quali consiglio soprattutto MDN.<\/p>\n<h2><a id=\"toc-2\"><\/a>Link utili<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/Heading_Elements\" rel=\"nofollow noopener\">MDN: Heading elements<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" rel=\"nofollow noopener\">MDN: Responsive Images<\/a><\/li>\n<li><a href=\"https:\/\/www.semrush.com\/blog\/internal-links\/#2--they-pass-authority\" rel=\"nofollow noopener\">SemRush: Internal linking and PageRank<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/a\" rel=\"nofollow noopener\">MDN: The Anchor element<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\" rel=\"nofollow noopener\">MDN: HTML rel attribute<\/a><\/li>\n<li><a href=\"https:\/\/owasp.org\/www-community\/attacks\/Reverse_Tabnabbing\" rel=\"nofollow noopener\">OWASP: Reverse Tabnabbing for links that open in a new tab<\/a><\/li>\n<li>Approfondimento: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Accessibility\/HTML\" rel=\"nofollow noopener\">HTML: A good basis for accessibility<\/a><\/li>\n<\/ul>\n<h2><a id=\"toc-3\"><\/a>Leggi anche<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-possiamo-rendere-accessibile-un-sito-web\/\">Come possiamo rendere accessibile un sito web<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/accessibilita-gli-obblighi-da-giugno-2025-per-i-privati\/\">Accessibilit\u00e0: Gli obblighi da Giugno 2025 per i privati<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/perche-un-sito-web-dovrebbe-essere-accessibile\/\">Perch\u00e9 un sito web dovrebbe essere accessibile?<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/che-cose-laccessibilita-web\/\">Che cos\u2019\u00e8 l\u2019accessibilit\u00e0 web?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Molte persone non se ne rendono conto, ma il vantaggio dei siti web accessibili \u00e8 che sono tendenzialmente molto pi\u00f9 idonei al ricevere un alto punteggio da parte dei motori di ricerca. Perch\u00e9? La spiegazione \u00e8 semplice: l\u2019uso corretto dei tag HTML appropriati aiuta il crawler, cio\u00e8 il bot del motore di ricerca che scansiona [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":245,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-111","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\/111"}],"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=111"}],"version-history":[{"count":13,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/111\/revisions\/222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}