Datrix
Rebuild del sito web di Datrixgroup.com con inclusione della piattaforma Investor in un’unica applicazione web. Design completamente rivisto, stack moderno e professionale.
Il sito del cliente non deve essere conforme all’EAA, Datrix ha deciso di includere l’accessibilità nel rebuilding del sito, in quanto è un valore in linea con i suoi princìpi etici ed essendo un’azienda del settore tech/ai sa bene l’importanza di un’applicazione accessibile per aumentare conversioni e migliorare l’esperienza utente.
Il caso studio include molti interventi di accessibilità già portati a termine e altri che sono inclusi in una roadmap futura, vista la mole di asset e la complessità del business.
Caso studio: tabella dei contenuti
Tipologia progetto
Datrix Group è un ecosistema di tech company italiane specializzate nello sviluppo di soluzioni di Intelligenza Artificiale avanzata, Data Analytics e Machine Learning per accelerare la crescita aziendale e la monetizzazione dei dati. Fondata nel 2016 (anche da ex manager di Google), la società è quotata in Borsa a Milano sul mercato Euronext Growth Milan.
Stack e stato
Stack: Wordpress, Bricks builder, ACSS (framework css), ACF, Polylang, WS form, Perfmatter, Rocket.net (hosting)
Stato: Remediation in progess (roadmap)
Obiettivi progetto
Datrix ha voluto fare un rebuilding completo del suo vecchio sito web, integrando nella nuova versione anche la sua piattaforma Investor (3rd party).
Datrix ha scelto di includere aspetti di accessibilità, non perchè soggetta ad obbligo di legge (non rientra negli obblighi), ma per migliorare l’esperienza dei suoi utenti, l’usabilità della sua applicazione web e allineare il suo sito ai suoi valori etici di inclusione ed accessibilità.
Lavorando nel settore tech/AI, l’azienda riconosce l’importanza e benefici di un web accessibile: raggiungere un bacino più ampio di utenti potenziali, permettere a tutti gli utenti di godere dei suoi contenuti senza barriere, aumentare il tempo speso sul sito e rendere la sua web app più crawler e ai-crawler friendly.
Impatto potenziale
- Aumento del traffico potenziale Un sito accessibile è navigabile da circa il 20% in più di utenti che avrebbero difficoltà con barriere di accessibilità
- Bounce rate ridottoUn sito accessibile non viene abbandonato dagli utenti che di solito incontrano barriere di accessibilità. Il 69-71% dei consumatori con disabilità abbandona un sito che trova difficile da usare.
- Più tempo per sessioneUna migliore usabilità garantisce un aumento del tempo trascorso sul sito dagli utenti
- Miglioramento dei parametri del sitoCore web vitals e velocità percepita sono aumentati (performance mobile da 48 a 89)
- Più azioni chiave compiute dagli utentiSenza blocchi è più facile per gli utenti leggere articoli, mandare email, compilare form, ecc
- Maggiore fidelizzazioneL'83% delle persone con esigenze di accesso limita gli acquisti ai soli siti che sa essere accessibili
- Vantaggio competitivo e forza del brandDati più recenti lato business: il 42% delle aziende che hanno dato priorità all'accessibilità riporta un aumento del traffico sul sito, e il 61% dei business leader ritiene che l'accessibilità dia un vantaggio competitivo al brand.
- AI-readabilityUn sito con markup semantico debole è difficile da leggere anche per gli assistenti AI — incoerente per un'azienda che vende infrastrutture di intelligenza artificiale.
- Employer branding coerente con la GEPUn sito accessibile completa l'impegno DEI già pubblico nel Gender Equality Plan

I test automatici non bastano!
Solo il 23% dei problemi trovati in questo audit sarebbe emerso da uno scanner automatico.
77% (10 su 13) richiede revisione del design, test da tastiera o tecnologia assistiva — quello che un audit "solo tool" non copre.
- Test automatico: 3
- Audit del design: 1
- Audit con tastiera: 4
- Audit con tecnologie assistive: 5
Audit scan automatizzato
Problema grave
Alt vuoto sui loghi dei brand
Criterio WCAG: 1.1.1
Categoria: visiva
Fix: Aggiunto alt descrittivo su ciascun logo
Link esterni senza avviso
Criterio WCAG: 3.2.2
Categoria: visiva
Fix: aggiunto aria-label che segnala link esterno + nuova scheda
Problema grave
Sidebar: aria-current non sincronizzato con la sezione attiva

Criterio WCAG: 2.4.1
Categoria: visiva
Fix: script aggiornato per spostare aria-current="page" in sincrono con is-active a ogni click
Audit del design
Link "Privacy Policy" distinguibile solo dal colore

Criterio WCAG: 1.4.1
Categoria: visiva
Fix: aggiunto underline sul link, ora distinguibile anche senza percezione del colore
Audit con tastiera
Problema grave
Focus non visibile sul pannello tab (Brand)

Criterio WCAG: 2.4.7
Categoria: motoria
Fix: border: 2px solid var(--danger) su .da-tab__tab-panel:focus — funziona perché il bordo fa parte del box e non viene tagliato dall'overflow
Problema grave
Focus non visibile su input e checkbox del form newsletter

Criterio WCAG: 2.4.7
Categoria: motoria
Fix: aggiunto outline visibile (colore danger) su input e checkbox
Problema grave
Form: Focus visibile sul submit button

Criterio WCAG: 2.4.7
Categoria: motoria
Fix: bordo visibile su :focus/:hover del bottone di submit
Criterio WCAG: 1.1.1
Categoria:
Fix:
Audit codice e tecnologie assistive
Testo placeholder nascosto identico sui toggle accordion
Criterio WCAG: 2.4.6
Categoria: visiva
Fix: Rimosso testo placeholder
Problema grave
Tab brand: aria-selected statico e non via via JS (non viene annunciata tab selezionata)
Criterio WCAG: 4.1.2
Categoria: visiva
Fix: Aggiunto script per rendere attributo dinamico
Problema grave
Help text generico sul campo Email, senza formato atteso

Criterio WCAG: 3.3.2
Categoria: visiva
Fix: help text aggiornato con il formato atteso ("Enter your email address format name@mail.com"), collegato al campo e letto correttamente dallo screen reader
Problema grave
Multilingua: Testo dei toggle accordion duplicato e non pertinente

Criterio WCAG: 2.4.6
Categoria: visiva
Fix: sostituire il testo statico placeholder con il titolo effettivo del tab corrispondente
Problema grave
aria-expanded="false" sul toggle-1 anche se il suo pannello è quello attualmente visibile
Criterio WCAG: 4.1.2
Categoria: visiva
Fix: sincronizzare aria-expanded con lo stato reale del pannello (true quando il pannello è x-tabs_panel-current/visibile, false altrimenti)