{"id":266,"date":"2024-09-04T10:56:30","date_gmt":"2024-09-04T10:56:30","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=266"},"modified":"2025-01-05T12:31:14","modified_gmt":"2025-01-05T12:31:14","slug":"come-effettuare-analisi-accessibilita-sito-web","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-effettuare-analisi-accessibilita-sito-web\/","title":{"rendered":"Come effettuare l'analisi di accessibilit\u00e0 di un sito web"},"content":{"rendered":"

Analizzare un sito web per i requisiti di accessibilit\u00e0<\/h2>\n

Abbiamo visto alcuni strumenti utili<\/a> per svolgere queste analisi, in modo tale da puntare alla piena confermit\u00e0<\/strong> ai diversi livelli delle WCAG<\/a>. Questo infatti ci servir\u00e0 in particolare da Giugno 2025<\/strong>, data a partire dalla quale entreranno in vigore nuovi obblighi per i privati<\/a> in merito all’accessibilit\u00e0 web. Avremo bisogno infatti di compilare la dichiarazione di accessibilit\u00e0<\/a>.<\/p>\n

Vediamo dunque come si pu\u00f2 effettuare nella pratica una analisi di accessibilit\u00e0<\/strong>.<\/p>\n\n

Prima analisi semi automatica<\/h2>\n

Anzitutto apriamo il sito web che ci interessa e scansioniamolo con WAVE<\/a>\u00a0o con IBM Equal Accessibility Checker<\/a> che sono entrambi disponibili come estensioni per il browser.<\/p>\n

Probabilmente vedremo alcuni errori<\/strong>, come in questo caso:<\/p>\n

\"\"
La scansione con WAVE ha restituito degli errori<\/figcaption><\/figure>\n

Con IBM Accessibility Checker<\/strong> possiamo generare dei veri a propri report, <\/strong>questo strumento in genere si attiva dall’Inspector del browser e si effettua una scansione della pagina:<\/p>\n

\"\"
La scansione con IBM Accessibility Checker ha restituito degli errori<\/figcaption><\/figure>\n

Assicuriamoci di aver impostato lo strumento per effettuare le scansioni secondo le WCAG<\/strong>:<\/p>\n

\"\"
Su IBM Accessibility Checker impostiamo l’uso delle guidelines WCAG 2.2<\/figcaption><\/figure>\n

A questo punto possiamo individuare i primi problemi di accessibilit\u00e0<\/strong> presenti nel sito. Come possiamo vedere, i due strumenti forniscono suggerimenti e segnalazioni molto diverse, anche per questo motivo \u00e8 bene usarne pi\u00f9 di uno. Iniziamo dunque a compilare la tabella del modulo di autovalutazione<\/a> provando a capire quali criteri vengono rispettati e quali no.<\/p>\n

Se vogliamo semplificarci il lavoro, IBM Accessibility Checker<\/strong> ci permette di cliccare su Export XLS<\/strong> ed esportare cos\u00ec un file HTML con la tabella dei vari criteri, che possiamo verificare e riportare di conseguenza:<\/p>\n

\"\"
Rapporto in versione HTML degli errori rilevati da IBM AC<\/figcaption><\/figure>\n

Potremmo ad esempio marcare come “Non soddisfatti” i criteri 1.4.3 Contrasto Minimo<\/strong> e 2.4.1 Salto di blocchi<\/strong>, se abbiamo verificato che effettivamente la conformit\u00e0 non venga rispettata. Ecco un esempio:<\/p>\n

\"\"
Tabella di conformit\u00e0 del modello di autovalutazione AGID<\/figcaption><\/figure>\n

Questa tabella potrebbe essere un inizio per chi si occupa dell’aspetto tecnico dell’accessibilit\u00e0: ad esempio si potrebbe inviare agli sviluppatori web<\/strong> del sito chiedendo di verificare cosa si pu\u00f2 fare per conformarsi ai criteri non soddisfatti<\/strong>.<\/p>\n

Analisi automatiche periodiche<\/h2>\n

Possiamo anche programmare delle analisi periodiche<\/strong> con strumenti quali MAUVE<\/a> o simili. In questo modo riceveremo dei rapporti a frequenze stabilite che ci potrebbero servire per rimanere aggiornati sullo stato dell’accessibilit\u00e0 del sito.<\/p>\n

Infatti, con il tempo e con l’inserimento di nuovi contenuti<\/strong> testuali, immagini, video e altro, potrebbe capitare che alcune pagine diventino pi\u00f9 o meno accessibili. Pensiamo al caso in cui chi si occupa di gestire i contenuti si dimentichi di inserire il testo alternativo alle immagini, o usi dei tag HTML errati<\/strong> tramite editor di testo WYSIWYG<\/strong> come TinyMCE o CKEditor<\/strong>.<\/p>\n

Analisi manuali<\/h2>\n

In ogni caso, avremo bisogno di effettuare delle verifiche manuali per casi pi\u00f9 particolari, ad esempio la verifica del contrasto colore<\/a>. Facciamo un esempio: abbiamo un sito con sfondo bianco<\/strong> e un pulsante (button) con bordo e testo gialli<\/strong>.<\/p>\n

Usiamo quindi uno degli strumenti per la verifica del contrasto colore<\/a>, come ad esempio WebAIM Contrast Checker<\/strong>:<\/p>\n

\"\"<\/p>\n

Vediamo che il contrasto \u00e8 insufficiente<\/a> e risulta di solo 1.07, quindi questo pulsante non \u00e8 accessibile. Un utente ipovedente o che non riesce a distinguere bene i colori potrebbe non riuscire a leggere il testo del pulsante.<\/p>\n

Questo \u00e8 un esempio di verifica manuale, ma possiamo fare anche altro: verificare i form e le label degli input<\/strong>, controllare che i video abbiano i sottotitoli<\/strong>, verificare che non vi siano animazioni<\/strong> che si avviano in automatico e non possono essere fermate manualmente, controllare la grandezza dei caratteri e la leggibilit\u00e0 dei font<\/a>.<\/p>\n

Verifica dei pattern e del flusso di navigazione<\/h2>\n

Nelle sue linee guida dell’accessibilit\u00e0<\/a>, l’AGID ha definito dei Criteri di Valutazione che sono essenziali per la verifica soggettiva e al momento sono: percezione, comprensibilit\u00e0, operabilit\u00e0, coerenza, salvaguardia della salute, sicurezza, trasparenza, apprendibilit\u00e0, aiuto e documentazione, tolleranza agli errori, gradevolezza, flessibilit\u00e0.<\/p>\n

Per esempio, dovremo valutare che i vari componenti, come la navigazione a briciole di pane (breadcrumbs<\/a>) siano facilmente comprensibili e utilizzabili.<\/p>\n

Oppure, i componenti che si ripetono pi\u00f9 volte<\/strong> in una serie di pagine web e condividi la stessa funzionalit\u00e0<\/strong>, dovrebbero essere coerenti e apparire allo stesso modo. Questo riguarda il criterio 3.2.4 Consistent Identification<\/a> (Livello AA).<\/p>\n

Test con utenti reali<\/h2>\n

Se possibile, dovremmo effettuare anche dei test con persone affette da disabilit\u00e0 visive, auditive o motorie, ad esempio con persone cieche che usano tecnologie assistive<\/a> come gli screen reader<\/strong> o il BrailleNote Touch. <\/strong>In questo modo, otterremo dei feedback e capiremo come comportarci di conseguenza e quali modifiche apportare al sito.<\/p>\n

Questo \u00e8 meglio spiegato al punto b) Costituzione del gruppo di valutazione, del paragrafo 3.2.2.1. Verifica soggettiva<\/strong> delle linee guida AGID sull’accessibilit\u00e0.<\/p>\n

Chiaramente questo potrebbe richiedere dei costi importanti<\/strong> e dovrebbe essere previsto, preventivato e concordato con il nostro committente<\/strong>, sia esso una Pubblica Amministrazione o una azienda privata.<\/p>\n

In genere si cerca di svolgere un test con un numero dispari di partecipanti e che sia il pi\u00f9 possibile imparziale<\/strong>, alla fine del quale si chiede agli utenti di compilare un questionario<\/strong> per misurare la soddisfazione (o insoddisfazione) percepita durante le varie fasi di navigazione del sito web.<\/p>\n

Conclusioni<\/h2>\n

Abbiamo visto alcune azioni che possiamo intraprendere per l’analisi di accessibilit\u00e0 delle pagine web. Questa \u00e8 sicuramente una buona partenza<\/strong> ma il lavoro poi dovrebbe essere continuativo<\/strong> e distribuito nel tempo. Gli strumenti automatici sono ottimi alleati per aiutarci nel lavoro, ma non possono essere sufficienti, \u00e8 opportuno infatti svolgere attivit\u00e0 manuali<\/strong> per verificare di essere realmente conformi (o meno).<\/p>\n

Dopo le verifiche pi\u00f9 strettamente tecniche relative al codice HTML<\/strong> in particolare, dovremo controllare anche il flusso di navigazione e i vari pattern<\/strong>, per assicurarci che siano consistenti e intuitivi per l’utente.<\/p>\n

Infine dovremmo, se possibile, svolgere dei test reali<\/strong> con persone affette da forme di disabilit\u00e0 in modo da verificare se, nella pratica, il sito che abbiamo realizzato sia davvero ben utilizzabile dagli utenti pi\u00f9 interessati.<\/p>\n

Leggi anche<\/h2>\n