Dichiarazione di Accessibilità

BiotechProject è profondamente impegnato a garantire che il proprio sito web sia accessibile a tutte le persone, inclusi utenti con disabilità visive, uditive, motorie, cognitive o neurodiverse. L’accessibilità non è un semplice requisito tecnico, ma un principio fondante del nostro design, sviluppo e comunicazione scientifica. Crediamo che la scienza debba essere aperta, inclusiva e fruibile da chiunque — indipendentemente dalle sue capacità sensoriali, cognitive o tecnologiche.

Conformità agli standard

Le pagine principali del sito BiotechProject sono conformi alle Linee guida per l’accessibilità dei contenuti web (WCAG) 2.1 Livello AA, conformemente al Decreto Legislativo 10 agosto 2018, n. 106, che recepisce la Direttiva (UE) 2016/2102.

La conformità è stata verificata attraverso un approccio combinato:

Audit tecnici con strumenti automatici (axe, WAVE, Lighthouse)
Test manuali di navigazione da tastiera, screen reader (NVDA, VoiceOver) e dispositivi mobili
Verifica del rispetto delle preferenze utente (riduzione del movimento, alto contrasto, zoom fino al 200%)
Validazione del codice HTML e CSS presso i validatori del W3C

Ultima verifica effettuata il: 8 settembre 2025.

Caratteristiche di accessibilità implementate

Il sito è stato progettato con un approccio “accessibilità fin dall’origine” (accessibility by design). Tra le principali funzionalità:

Navigazione da tastiera completa: Tutte le funzionalità sono accessibili tramite tastiera. Un pulsante dedicato attiva un’evidenziazione avanzata per chi usa la navigazione da tastiera.
Supporto avanzato ai menu: I menu a tendina sono navigabili con frecce, Home, End e Esc, con gestione corretta del focus.
Compatibilità con screen reader: Struttura HTML semantica, uso corretto di ARIA e gestione dinamica dello stato.
Contrasto sufficiente: Tutti i testi rispettano il rapporto minimo 4.5:1 (testo normale) e 3:1 per elementi UI, in conformità a WCAG 1.4.3 e 1.4.11.
Testo ridimensionabile: Il contenuto rimane leggibile e funzionale anche con zoom fino al 200%, senza perdita di informazioni, sovrapposizioni o necessità di scorrere lateralmente, in conformità a WCAG 1.4.4 (Resize Text) e 1.4.10 (Reflow).
Controllo delle animazioni: Tutte le animazioni non essenziali (menu, pulsanti, effetti visivi) sono disattivate automaticamente se l’utente ha impostato prefers-reduced-motion: reduce. Abbiamo inoltre implementato un’opzione manuale per disattivarle completamente tramite il pulsante “Comfort”, che disabilita anche elementi decorativi come le particelle di fondo e l’animazione del DNA.
Supporto al contrasto elevato: Il sito rispetta la preferenza utente prefers-contrast: high. In questi casi, viene applicato automaticamente un tema ad alto contrasto (blu profondo) per migliorare la leggibilità, in conformità a WCAG 1.4.12 (Text Spacing, livello AAA).
Tema visivo dinamico: È disponibile un selettore di colori nel menu Service che permette di scegliere tra cinque varianti cromatiche (Verde, Ciano, Viola, Arancione, Blu Profondo), progettate per supportare diverse condizioni visive, inclusi vari tipi di daltonismo.
Persistenza delle preferenze: La scelta del tema e lo stato della navigazione da tastiera vengono salvati in localStorage e ripristinati alla successiva visita, garantendo un’esperienza coerente.
Popup accessibili: Le finestre popup sono aperte in modo centrato, con gestione del focus all’apertura e chiusura tramite tasto Esc o pulsante accessibile da tastiera (tasto Enter). Il focus è trappolato durante l’uso e ripristinato correttamente alla chiusura, in conformità ai criteri WCAG 2.1 2.1.1 (Keyboard) e 2.4.3 (Focus Order). Il pulsante di chiusura è posizionato in alto a destra ed è navigabile con Tab, garantendo un'esperienza accessibile e prevedibile. Il contenitore del popup include role="dialog" e aria-modal="true" per garantire una corretta percezione da parte delle tecnologie assistive.
Lazy loading sicuro: Le immagini vengono caricate in modo differito tramite IntersectionObserver, con fallback per browser vecchi. Il testo alternativo (alt) è sempre presente prima del caricamento.
Orologi e contatori accessibili: L’orologio e il conto alla rovescia sono aggiornati dinamicamente e contrassegnati con aria-live="polite" per annunciare i cambiamenti agli screen reader.
Design resiliente: Nessuna dipendenza da framework esterni. JavaScript vanilla, CSS moderno ma retrocompatibile, e HTML semantico assicurano robustezza, prestazioni e accessibilità a lungo termine.
Pagine semplificate: Per ogni pagina principale, è disponibile una versione semplificata del contenuto, scritta con linguaggio chiaro, frasi brevi e supporto visivo. Questa funzionalità supporta utenti con dislessia, difficoltà cognitive o livelli diversi di alfabetizzazione, in conformità con WCAG 3.1.5 (Reading Level, Livello AA) e come passo verso il livello AAA.
Accessibilità dei dati visivi: I grafici e i cerchi di progresso sono accompagnati da tabelle nascoste (visually-hidden) e testi alternativi strutturati, per garantire che i dati siano accessibili a screen reader e strumenti assistivi.
Esportazione dati: È possibile esportare i dati di performance e accessibilità in formato JSON o CSV, promuovendo trasparenza e audit indipendenti.
Comfort visivo automatico (QRedshift): Il sito applica automaticamente un filtro di temperatura colore più caldo la sera (basato sull’ora locale) per ridurre l’affaticamento oculare e supportare i ritmi circadiani. Questa funzionalità può essere disattivata manualmente in qualsiasi momento. Nei contesti senza menu integrato, un'icona focusabile in alto a destra funge da controllo di fallback, con supporto completo a tastiera e screen reader.
Supporto alla pronuncia e comprensione: Il tag <ruby> è utilizzato per fornire definizioni contestuali di termini scientifici complessi (es. mitocondri, epigenetica), migliorando la comprensione per studenti, persone con difficoltà cognitive e non esperti. Questa implementazione è conforme a WCAG 3.1.3 (Unusual Words) e 3.1.5 (Reading Level).
Video accessibile: I video sono privi di autoplay, attivabili manualmente tramite un’anteprima navigabile da tastiera. Include controlli personalizzati con aria-label, descrizione testuale della scena e supporto a Enter/Spazio per l’attivazione.

Tecnologie utilizzate

Il sito è costruito con tecnologie moderne, leggere e accessibili:

HTML5 semantico
CSS3 con Custom Properties e media query per preferenze utente
JavaScript vanilla (zero framework, massima accessibilità e prestazioni)
ARIA 1.2 per interazioni dinamiche e gestione dello stato
Media query: prefers-reduced-motion, prefers-contrast
Persistenza: localStorage per tema e stato della navigazione
Ottimizzazioni: IntersectionObserver (lazy loading), MutationObserver (integrazione dinamica)
Immagini: AVIF e WebP per prestazioni e qualità

Conformità in corso verso il livello AAA

Stiamo implementando ulteriori caratteristiche per avvicinarci al livello AAA delle WCAG 2.1:

Pronuncia di termini tecnici: Espansione dell’uso del tag <ruby> per includere la guida alla pronuncia (es. con sillabazione o IPA) di parole come "CRISPR", "epigenetica", "plasmide".
Spiegazione di acronimi: Implementazione progressiva di <abbr title="..."> per espandere sigle come "PCR", "ATP", "DNA" al primo utilizzo nel testo.
Link con testo descrittivo: Verifica continua che tutti i link abbiano un testo comprensibile anche fuori contesto (WCAG 2.4.9 – Link Purpose).
Migrazione da popup a modali accessibili: Sostituzione progressiva delle finestre window.open() con modali interni dotati di role="dialog", trapping del focus, gestione completa da tastiera e supporto a Esc.

Non conformità parziali o eccezioni

Nonostante il forte impegno verso l’inclusività, alcune parti del sito non soddisfano pienamente tutti i criteri WCAG 2.1, per motivi tecnici, contestuali o di retrocompatibilità. Tali casi sono documentati e in fase di miglioramento:

Uso di role="menu" nei dropdown di navigazione: Attualmente, i menu a tendina utilizzano role="menu" e role="menuitem" per garantire un comportamento avanzato con tastiera (frecce, Home/End, Esc). Tuttavia, questo pattern è tecnicamente riservato a componenti simili a barre dei menu applicativi. Stiamo valutando una transizione a un modello semantico più semplice — basato su <button> e <a> — per migliorare la compatibilità con screen reader, mantenendo comunque la piena funzionalità da tastiera.
Popup basati su window.open(): Alcuni link aprono finestre esterne per garantire retrocompatibilità con sistemi clienti legacy. Stiamo migrando attivamente verso modali interni accessibili per offrire un’esperienza più inclusiva e controllata.

Feedback e segnalazioni

Il tuo feedback è fondamentale per migliorare l’accessibilità del nostro progetto. Se riscontri barriere nell’accesso ai contenuti, difficoltà nell’uso delle funzionalità o hai suggerimenti per renderlo più inclusivo, ti invitiamo a contattarci.

Data dell’ultima verifica

15 Ottobre 2025

Aggiornamenti futuri

Questa dichiarazione sarà aggiornata regolarmente per riflettere i miglioramenti implementati. I prossimi aggiornamenti includeranno:

Migrazione completa a modali interni al posto di window.open().
Valutazione di un pattern ARIA più semplice per i menu, per maggiore conformità con le aspettative degli screen reader.
Ottimizzazione del contrasto in modalità notturna (QRedshift) per garantire un rapporto minimo di 4.5:1 anche con il filtro attivo.
Integrazione di trascrizioni complete e sottotitoli per tutti i video futuri.

“BiotechProject non è solo scienza: è inclusione. Ogni linea di codice è progettata per essere accessibile, resiliente e umana.”

BiotechProject. Un progetto per un web più inclusivo.

🔗 Segui Biotech Project su LinkedIn