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)