{"id":31,"date":"2024-08-09T15:40:56","date_gmt":"2024-08-09T15:40:56","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=31"},"modified":"2024-08-23T11:13:25","modified_gmt":"2024-08-23T11:13:25","slug":"come-possiamo-rendere-accessibile-un-sito-web","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-possiamo-rendere-accessibile-un-sito-web\/","title":{"rendered":"Come possiamo rendere accessibile un sito web"},"content":{"rendered":"\r\n<p>Per gli aspetti strettamente tecnici:\u00a0<a href=\"https:\/\/www.accessibilita.digital\/come-sviluppare-un-sito-web-accessibile\/\">Come sviluppare un sito web accessibile<\/a>. Per ora soffermiamoci sugli <strong>aspetti informativi<\/strong> che possono farci capire quali tecniche dovremmo usare.<\/p>\r\n\r\n\r\n\r\n<p>I punti pi\u00f9 importanti che dobbiamo affrontare sono:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong>La progettazione del sito web<\/strong> con una visione accessibile fin da subito<\/li>\r\n\r\n\r\n\r\n<li><strong>L\u2019alberatura<\/strong> del sito e il <strong>percorso di navigazione<\/strong><\/li>\r\n\r\n\r\n\r\n<li>Il tipo di <strong>esperienza<\/strong> che vogliamo offrire all\u2019utente<\/li>\r\n\r\n\r\n\r\n<li>Il <strong>codice di sviluppo<\/strong>, con particolare attenzione all\u2019HTML<\/li>\r\n\r\n\r\n\r\n<li>L\u2019uso di <strong>strumenti automatici<\/strong> per l\u2019analisi in fase di sviluppo e di post-sviluppo<\/li>\r\n\r\n\r\n\r\n<li><strong>L\u2019analisi manuale<\/strong> e i relativi <strong>test manuali<\/strong> da parte degli utenti<\/li>\r\n\r\n\r\n\r\n<li>Le <strong>tecnologie assistive<\/strong><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Come gi\u00e0 possiamo immaginare, i temi che affronteremo sono complessi e <strong>richiedono molto studio<\/strong> e approfondimento. Per questo motivo il mio invito \u00e8 quello di <strong>pianificare<\/strong>, un po\u2019 per volta, la formazione necessaria. Sebbene possa andare contro i miei stessi interessi, quanto stiamo trattando non sar\u00e0 sicuramente sufficiente per sapere tutto sull\u2019accessibilit\u00e0 web.<\/p>\r\n\r\n\r\n\r\n<p><strong>Le informazioni da conoscere sono tantissime e in continuo aggiornamento<\/strong>, quindi la mia raccomandazione \u00e8 di leggere anche altri articoli e seguire altri corsi. Vi indicher\u00f2 alcune risorse utili da consultare che potranno aiutarvi.<\/p>\r\n\r\n\r\n\r\n<p>Quando progettiamo un sito web, dobbiamo valutare diversi aspetti tra i quali <strong>il percorso di navigazione<\/strong> che vogliamo presentare all\u2019utente, <strong>i componenti grafici<\/strong> che vogliamo inserire, il <strong>tipo di esperienza<\/strong> che vogliamo offrire.<\/p>\r\n\r\n\r\n\r\n<p><strong>La navigazione dovrebbe essere intuitiva<\/strong> e possibilmente <strong>divisa per sezioni<\/strong>, ma a questo bene o male siamo abbastanza abituati. In genere i siti web moderni si dividono in <strong>pagine istituzionali<\/strong>, come il <em>Chi siamo<\/em> e <em>La nostra storia<\/em>, e in <strong>pagine dedicate<\/strong> a prodotti e servizi, poi spesso abbiamo la <strong>sezione dedicata al blog<\/strong>, la pagina per i <strong>contatti<\/strong>, e a volte la pagina dedicata ai <strong>documenti<\/strong> e alle <strong>risorse multimediali<\/strong> da scaricare.<\/p>\r\n\r\n\r\n\r\n<p>Ovviamente <strong>ogni azienda \u00e8 diversa<\/strong> e quindi ogni sito web \u00e8 unico, ma a grandi linee tutti seguono uno stesso concetto: <strong>riuscire a comunicare all\u2019utente quello che si fa<\/strong>, e offrire i contenuti di interesse per portarlo a contattarci o ad acquistare i nostri beni e servizi.<\/p>\r\n\r\n\r\n\r\n<p>Nel caso delle <strong>Pubbliche Amministrazioni<\/strong>, il focus \u00e8 quello di <strong>fornire le informazioni al cittadino<\/strong>. Il sito di <strong>una azienda sanitaria dovr\u00e0 concentrarsi sul rendere reperibili le informazioni sulle cure<\/strong>, i medicinali, i servizi di cura, i medici attivi nella zona, e via dicendo.<\/p>\r\n\r\n\r\n\r\n<p>Diversamente, <strong>un comune vorr\u00e0 comunicare gli eventi e le novit\u00e0<\/strong>, offrire una serie di <strong>servizi online<\/strong>, oltre a fornire <strong>informazioni e documenti utili<\/strong>. Pensiamo ad esempio all\u2019esigenza di rinnovare la carta d\u2019identit\u00e0 o anche alla necessit\u00e0 di pagare una contravvenzione.<\/p>\r\n\r\n\r\n\r\n<p>Un <strong>museo pubblico<\/strong> o una <strong>biblioteca comunale<\/strong> vorranno comunicare principalmente gli eventi organizzati, le ultime novit\u00e0, i servizi offerti.<\/p>\r\n\r\n\r\n\r\n<p>Insomma, ogni caso \u00e8 diverso, e va analizzato di volta in volta, ma quello che possiamo fare \u00e8 di <strong>progettare una soluzione digitale<\/strong> che sia allo stesso tempo <strong>piacevole per l\u2019occhio<\/strong> ma anche <strong>funzionale per il cervello<\/strong>.<\/p>\r\n\r\n\r\n\r\n<p>Se come cittadino devo <strong>pagare una multa<\/strong>, possiamo tutti immaginare il mio estremo senso di sconforto quando, oltre a dover fare un qualcosa che eviterei volentieri di fare, trovo anche <strong>delle difficolt\u00e0 nel farlo<\/strong> perch\u00e9 magari il sistema di pagamento funziona male.<\/p>\r\n\r\n\r\n\r\n<p>Ecco, immaginiamo lo stesso scenario per una persona affetta da qualche tipo di <strong>disabilit\u00e0<\/strong>, magari anche grave: <strong>la difficolt\u00e0 e il dispiacere aumentano esponenzialmente<\/strong>.<\/p>\r\n\r\n\r\n\r\n<p>Questi sono solo alcuni degli aspetti da tenere in considerazione in fase di progettazione.<\/p>\r\n\r\n\r\n\r\n<p>Per quanto riguarda la fase di <strong>sviluppo tecnico<\/strong>, ci\u00f2 che sicuramente ci aiuta sono gli <strong>strumenti automatici<\/strong>: li vedremo meglio in una prossima lezione, ma intanto possiamo accennare al fatto che ci sono <strong>software<\/strong>, <strong>estensioni del browser<\/strong>, <strong>plugin<\/strong> e altro che possono darci un supporto nella creazione di un sito web.<\/p>\r\n\r\n\r\n\r\n<p>Anche gli <strong>ambienti di sviluppo<\/strong>, cio\u00e8 gli IDE, ormai stanno diventando sempre pi\u00f9 <strong>integrati e integrabili<\/strong> con soluzioni che ci aiutano a <strong>creare codice accessibile<\/strong>. I CMS stessi sono sempre pi\u00f9 attenti a rispettare le linee guida sull\u2019accessibilit\u00e0, permettendoci cos\u00ec di creare dei siti pi\u00f9 accessibili.<\/p>\r\n\r\n\r\n\r\n<p>Ci\u00f2 a cui dobbiamo fare attenzione sono sicuramente <strong>l\u2019uso dei plugin e dei temi<\/strong>, ad esempio per <strong>WordPress o Joomla<\/strong>, perch\u00e9 non sempre questi sono accessibili, o comunque spesso <strong>generano un HTML che non \u00e8 accessibile<\/strong>.<\/p>\r\n\r\n\r\n\r\n<p>Per fare un esempio, <strong>un plugin potrebbe creare il codice HTML di una immagine senza <\/strong><strong>attributo<\/strong><strong> alt<\/strong> per il testo alternativo, e questo pu\u00f2 presentare un problema di accessibilit\u00e0.<\/p>\r\n\r\n\r\n\r\n<p>Diventa quindi molto importante <strong>conoscere l\u2019argomento<\/strong> e avere l\u2019esperienza necessaria per capire cosa \u00e8 meglio fare. Non \u00e8 detto che il plugin o il tema che abbiamo installato siano compatibili con i requisiti di accessibilit\u00e0, e questo potrebbe far <strong>lievitare il budget<\/strong> perch\u00e9 dovremo <strong>sviluppare qualcosa di personalizzato<\/strong>, o quantomeno dovremo <strong>mettere mano al codice<\/strong> fatto da altri.<\/p>\r\n\r\n\r\n\r\n<p>Durante e dopo lo sviluppo del sito, dovremo fare alcuni <strong>test manuali<\/strong>, ad esempio con <strong>lettori di schermo digitali<\/strong>, e avremo bisogno, se possibile, anche di far <strong>eseguire dei test da persone esterne<\/strong>, possibilmente affette da forme di disabilit\u00e0 diverse. Esistono delle <strong>associazioni<\/strong> che svolgono questo tipo di attivit\u00e0, a volte anche gratuitamente.<\/p>\r\n\r\n\r\n\r\n<p>Ci\u00f2 che gli utenti con disabilit\u00e0 usano per avere un <strong>supporto alla navigazione nel web<\/strong> si chiamano <strong>\u201ctecnologie assistive\u201d<\/strong> e sono di vario tipo: <strong>lettori di schermo<\/strong>, <strong>sintetizzatori vocali<\/strong>, <strong>dispositivi di puntamento<\/strong>, e altri ancora.<\/p>\r\n\r\n\r\n\r\n<p>Tutti questi aspetti vanno <strong>tenuti in considerazione gi\u00e0 dall\u2019inizio<\/strong>, e la mentalit\u00e0 che dobbiamo avere \u00e8 molto diversa rispetto a come siamo abituati. Non si tratta solamente di <strong>pensare a cosa vuole l\u2019utente<\/strong> e a come lo vuole ottenere, ma anche a <strong>come possiamo aiutare ad ottenerlo<\/strong> in modo indiretto, cio\u00e8 agevolando la sua esperienza <strong>prevedendo gi\u00e0 quali difficolt\u00e0 fisiche o psicofisiche potrebbe avere<\/strong>.<\/p>\r\n\r\n\r\n\r\n<p><strong>Un utente completamente cieco non capir\u00e0 la differenza di colore<\/strong> che c\u2019\u00e8 tra la testata del sito e il contenuto principale, <strong>ma <\/strong><strong>potr\u00e0 capire<\/strong><strong> il testo <\/strong>in esso contenuto. Anche per questo dovremo fare attenzione a come scriviamo i contenuti.<\/p>\r\n\r\n\r\n\r\n<p>Come vedremo, un link \u201cscopri di pi\u00f9\u201d o \u201cleggi tutto\u201d, per quanto sia diffuso al giorno d\u2019oggi, potrebbe rappresentare davvero un\u2019ostacolo per l\u2019utente, specialmente quando ne abusiamo in tutto il sito.<\/p>\r\n\r\n\r\n\r\n<p>Allo stesso modo, <strong>un contenuto nascosto<\/strong> che appare solo a seguito di un click su un pulsante, per esempio un <strong>accordion<\/strong>, potrebbe risultare <strong>completamente invisibile<\/strong> all\u2019utente che usa il lettore di schermo.<\/p>\r\n\r\n\r\n\r\n<p>\u00c8 nostro il compito di <strong>renderlo visibile e accessibile<\/strong>, almeno nel modo migliore possibile.<\/p>\r\n<p><\/p>\r\n<h2 class=\"wp-block-heading\">Leggi anche:<\/h2>\r\n<p>\r\n\r\n<\/p>\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"https:\/\/www.accessibilita.digital\/accessibilita-gli-obblighi-da-giugno-2025-per-i-privati\/\" data-type=\"post\" data-id=\"50\">Accessibilit\u00e0: Gli obblighi da Giugno 2025 per i privati<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"https:\/\/www.accessibilita.digital\/cosa-sono-gli-obiettivi-di-accessibilita\/\" data-type=\"post\" data-id=\"35\">Cosa sono gli obiettivi di accessibilit\u00e0?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"https:\/\/www.accessibilita.digital\/modello-di-autovalutazione-per-laccessibilita\/\" data-type=\"post\" data-id=\"41\">Modello di autovalutazione per l\u2019accessibilit\u00e0<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"https:\/\/www.accessibilita.digital\/tecnologie-assistive-cosa-sono-e-casi-duso\/\" data-type=\"post\" data-id=\"47\">Tecnologie assistive: cosa sono e casi d\u2019uso<\/a><\/li>\r\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>\r\n<\/ul>\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Per gli aspetti strettamente tecnici:\u00a0Come sviluppare un sito web accessibile. Per ora soffermiamoci sugli aspetti informativi che possono farci capire quali tecniche dovremmo usare. I punti pi\u00f9 importanti che dobbiamo affrontare sono: La progettazione del sito web con una visione accessibile fin da subito L\u2019alberatura del sito e il percorso di navigazione Il tipo di [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":234,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31","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\/31"}],"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=31"}],"version-history":[{"count":4,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/31\/revisions\/128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/234"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}