Better Project
Rebuild del sito web con focus sull’accessibilità per migliorare l’esperienza di navigazione e l’usabilità generale.
25 problemi di accessibilità trovati in questo audit — il 76% invisibili a uno scanner automatico.
Tutti i problemi sono risolti nel nuovo sito web.
Utilizzato un plugin custom per filtri accessibili.
Caso studio: tabella dei contenuti
Tipologia progetto
Progetto di ricerca europeo finanziato dal programma Horizon Europe dell'Unione Europea
Stack e stato
Stack:
Stato:
Obiettivi progetto
Rebuild del sito web. Cliente non ricade sotto l’European Accessibility Act, vuole implementare accessibilità web in linea con i valori etici aziendali e per mantenere una buona usabilità della sua applicazione web.
Impatto potenziale
- Usabilità e prestazioni da mobile e desktop (UX):L'adeguamento dei contrasti e l'alleggerimento del codice garantiscono un caricamento più rapido e una consultazione immediata in particolare da smartphone, anche in condizioni di luce sfavorevole o per utenti con impedimenti temporanei.
- Ampliamento del bacino utenti potenziali: La rimozione delle barriere di navigazione rende i contenuti del sito accessibili a oltre il 20% inn più di potenziali clienti fisici con disabilità o limitazioni temporanee in Italia ed Europa.
- Reputazione di brand e responsabilità sociale d'impresa:L'allineamento agli standard di inclusione digitale rafforza l'immagine aziendale agli occhi di clienti, partner commerciali e stakeholder locali.
- Adeguamento tecnico e tutela nel tempo:L'aggiornamento preventivo del sito mette la struttura al riparo da futuri interventi straordinari, costi di restyling affrettati o adempimenti legati all'evoluzione delle normative europee.
- Posizionamento e leggibilità per i motori di ricerca:L'ottimizzazione della struttura semantica (gestione tag, testi alternativi e gerarchia dei titoli) permette agli spider di Google di indicizzare e comprendere al meglio i contenuti scientifici del sito.
I test automatici non bastano!
Solo il 24% dei problemi trovati in questo audit sarebbe emerso da uno scanner automatico.
76% (19 su 25) richiede revisione del design, test da tastiera o tecnologia assistiva — quello che un audit "solo tool" non copre.
- Test automatico: 6
- Audit del design: 3
- Audit con tastiera: 7
- Audit con tecnologie assistive: 9
Audit scan automatizzato
Problema grave
L'attributo aria-label è dichiarato ma vuoto sulla nav primaria
Criterio WCAG: 4.1.2
Categoria: visiva
Fix: Valorizzare aria-label (es. "Primary navigation") su tutte le nav del sito
Il logo nell'header e nel footer ha alt vuoto e nessun testo visibile accanto — il nome del progetto sparisce completamente per chi naviga con screen reader in quel punto della pagina.
Criterio WCAG: 1.1.1
Categoria: visiva
Fix: Alt testuale descrittivo sul logo o aria-label
Problema grave
ALT mancanti per immagini descrittive
Criterio WCAG: 1.1.1
Categoria: visiva
Fix: Implementare ALT tag
Icone descrittive non hanno aria-hidden
Criterio WCAG: 1.1.1
Categoria: visiva
Fix: Rimuovere attributo aria-hidden dalle icone descrittive.
Problema grave
Contrasto insufficiente #EBC669
Criterio WCAG: 1.4.3
Categoria: visiva
Fix: Portare il contrasto entro i termini previsti 4.5 : 1
Problema grave
I testi del footer (descrizione progetto, copyright, link legali) usavano bianco a opacità ridotta su sfondo primary — sotto soglia 4.5:1.
Criterio WCAG: 1.4.3
Categoria: visiva
Fix: Usare un colore a opacità piena e contrasto corretto.
Audit del design
Problema grave
Nel corpo articolo, i link inline nel testo si distinguono dal testo circostante solo tramite il colore, senza sottolineatura né altro indicatore visivo.
Criterio WCAG: 1.4.1
Categoria: visiva
Fix: Aggiungere text-decoration underline (o altro indicatore non cromatico) ai link dentro i blocchi di testo, a livello di CSS globale.
Problema grave
All'hover, .flex-nav__link passa al colore secondary ( #EBC669, oro) su sfondo bianco dell'header — rapporto di contrasto calcolato ~1.6:1, molto sotto soglia 4.5:1. Non rilevabile da scanner automatico perché richiede simulare lo stato hover.
Criterio WCAG: 1.4.3
Categoria: visiva
Fix: Sostituire il colore hover con una variante più scura
Problema grave
Contrasto insufficiente sui controlli filtro
Criterio WCAG: 1.4.3
Categoria: visiva
Fix: Rispettare i requiti di contrasto per i filtri e i filtri attivi.
Audit con tastiera
Skip link non presente
Criterio WCAG: 2.4.1
Categoria: visiva, motoria
Fix: Implementare skip link per saltare blocco navigazione e blocco contenuto.
Problema grave
Mega menu con Esc-to-close non funzionante
Criterio WCAG: 2.1.1
Categoria: motoria
Fix: Implementare script per chiudere il megamenu con tasto ESC
Problema grave
Focus outline non visibile
Criterio WCAG: 2.4.7
Categoria: visiva, motoria
Fix: Implementare focus visible con CSS
Problema grave
Filtri news non navigabili da tastiera
Criterio WCAG: 2.1.1
Categoria: motoria
Fix: Correggere struttura semantica input
Problema grave
Focus non visibili sui filtri news
Criterio WCAG: 2.4.7
Categoria: visiva, motoria
Fix: Sistemare il focus con CSS
Focus order non coerente
Criterio WCAG: 2.4.3
Categoria: motoria
Fix: Verificare e correggere l'ordine del DOM (o l'uso di tabindex) perché coincida con l'ordine visivo su ogni pagina interessata.
Problema grave
Focus che si perde dopo un'interazione
Criterio WCAG: 2.4.3
Categoria: motoria
Fix: Dopo ogni interazione che cambia lo stato della pagina, spostare programmaticamente il focus su un elemento logico e visibile (es. il trigger dell'azione, o il primo elemento del nuovo contenuto).
Audit codice e tecnologie assistive
Problema grave
"View use case" identico su tutte e 3 le card Use Cases, "Learn more" nell'hero — chi naviga per lista di link sente lo stesso testo ripetuto senza modo di distinguere le destinazioni.
Criterio WCAG: 2.4.4
Categoria: visiva
Fix: Testo del link reso unico e descrittivo per ogni card/sezione.
I link con target blank (es. dropdown Resources) non hanno rel noopener né alcuna indicazione, visiva o per screen reader, che si apra una nuova scheda.
Criterio WCAG: 3.2.5
Categoria: visiva, universale
Fix: aria-label esplicito ("... opens in a new tab") più rel noopener su ogni link esterno del sito, come pattern standard anche per link futuri.
aria-expanded="false" scritto staticamente sul pannello del dropdown invece che sul bottone che lo apre/chiude.
Criterio WCAG: 4.1.2
Categoria: visiva
Fix: Spostare l'attributo sul bottone trigger, non sul contenuto controllato.
Problema grave
L'animazione GSAP scroll-linked del treno non ha nessun controllo sulla preferenza utente per il movimento ridotto — può causare disagio reale in utenti sensibili.
Criterio WCAG: 2.3.3
Categoria: cognitiva
Fix: Media query prefers-reduced-motion che disabilita o riduce drasticamente l'animazione.
Diverse sezioni a griglia di elementi ripetuti (card, statistiche, partner, feature) sono costruite con div consecutivi invece di ul/li
Criterio WCAG: 1.3.1
Categoria: visiva, ai_seo
Fix: Convertire il contenitore in ul e i singoli item in li dove la struttura è effettivamente una collezione, azzerando margini/padding di default via CSS.
Landmark semantici non definiti
Criterio WCAG: 1.3.1
Categoria: visiva
Fix: Inserire landmark semantici <header><nav> <main> <footer>
Icone social senza nome accessibile
Criterio WCAG: 1.1.1
Categoria: visiva
Fix: Implementare nome accessibile tramite aria-label
Problema grave
Filtri news non dentro form nativo
Criterio WCAG: 4.1.2
Categoria:
Fix: Usare struttura semantica adeguata per il form e i suoi elementi children (input)
Problema grave
Nessuna aria-live: risultati e reset non annunciati
Criterio WCAG: 4.1.3
Categoria: visiva
Fix: Implementare gestione annunci per screen reader.