Dichiarazione di Accessibilità — Paolagen.ai

Piattaforma: Paolagen.ai — https://app.paolagen.ai Versione del documento: 1.0 Redatta: marzo 2026 Prossima revisione programmata: settembre 2026

Informazioni sul documento

La presente dichiarazione documenta le misure di accessibilità implementate in Paolagen.ai e il grado di conformità della piattaforma alle Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.1 Livello AA. È redatta in conformità a:

Direttiva sull'accessibilità web dell'UE — Direttiva 2016/2102 del Parlamento europeo e del Consiglio
European Accessibility Act — Direttiva 2019/882, in vigore dal 28 giugno 2025
Decreto Legislativo 10 agosto 2018, n. 106 (recepimento italiano della Direttiva sull'accessibilità web)
Legge 9 gennaio 2004, n. 4 (Legge Stanca, come modificata)

Ambito di applicazione

La presente dichiarazione riguarda l'applicazione web Paolagen.ai accessibile all'indirizzo https://app.paolagen.ai, incluse:

Pagine di autenticazione (login, registrazione, reimpostazione password)
Dashboard e navigazione
Interfaccia di selezione chatbot AI
Area di gestione della classe (vista docente)
Viste delle attività degli studenti
Impostazioni e pagine delle preferenze utente
Flussi di consenso ai cookie e gestione degli errori

Escluso dall'ambito

Area	Motivazione
Widget di chat CAITY (`chat.caity.aidapt.io`)	Componente di terze parti fornito da un fornitore esterno; la conformità all'accessibilità è responsabilità di tale fornitore
Pagine di pagamento Stripe	Servizio di pagamento di terze parti; l'interfaccia di checkout di Stripe è soggetta agli standard di accessibilità propri di Stripe e non è sotto il diretto controllo di Paolagen.ai
Servizi di terze parti collegati (es. video tutorial esterni)	Non sotto il diretto controllo di Paolagen.ai

Stato di conformità

Parzialmente conforme. Paolagen.ai è parzialmente conforme alle WCAG 2.1 Livello AA. Tutte le non conformità ai criteri WCAG identificate durante i test sono state risolte. Un problema visivo minore non correlato ad alcun criterio WCAG è ancora in fase di analisi ed è riportato di seguito.

Specifiche tecniche

La piattaforma è costruita e testata sul seguente stack:

Framework: Next.js 16 (App Router), React 19
Rendering: Server-side rendering (SSR) con idratazione lato client
Stili: Tailwind CSS v4
Libreria di componenti: shadcn/ui su primitive Radix UI
Internazionalizzazione: next-intl — 7 lingue supportate (italiano, inglese, rumeno, spagnolo, francese, albanese, ucraino)
Animazione: Framer Motion

Misure di accessibilità implementate

1. Navigazione da tastiera

Link di salto alla navigazione

Ogni pagina fornisce un link di salto nascosto visivamente come primo elemento focalizzabile. Diventa visibile al focus da tastiera e sposta il focus direttamente al landmark del contenuto principale, consentendo di bypassare la navigazione ripetuta. Presente sia nel layout autenticato dell'app che nel layout di autenticazione.

Ordine di tabulazione e gestione del focus

Tutti gli elementi interattivi sono raggiungibili tramite il tasto Tab in un ordine logico di lettura. tabIndex={0} è impostato esplicitamente sugli elementi interattivi — sia le primitive personalizzate Radix UI / shadcn che i nativi <button> — per garantire la compatibilità con Safari. Su macOS, la navigazione Tab predefinita di Safari salta i nativi <button> a meno che un attributo tabindex esplicito non sia presente nell'HTML (indipendentemente dall'Accesso completo da tastiera). Questo si applica ai pulsanti di abbonamento e azione sulla pagina dei prezzi, ai selettori di tab e ad altri controlli interattivi nell'applicazione.

Contenimento del focus nelle finestre di dialogo

Tutte le finestre di dialogo modali (Informazioni, Feedback, Elimina chat, Impostazioni) mantengono il focus da tastiera mentre sono aperte. Il focus viene restituito all'elemento trigger alla chiusura. Questo è fornito nativamente da Radix UI Dialog e verificato nei nostri test.

Visibilità del focus

Gli elementi interattivi mostrano un anello di focus prominente (focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2) al focus da tastiera. Il componente DialogContent di Radix UI usa questo anello anziché sopprimere i contorni, garantendo che gli utenti da tastiera possano vedere quale elemento della finestra di dialogo ha il focus. Le righe delle tabelle utilizzano un indicatore di colore di sfondo (focus-visible:bg-primary/25) poiché box-shadow viene silenziosamente ignorato dai browser sugli elementi <tr>.

2. Supporto ai lettori di schermo

HTML semantico e landmark ARIA

Le pagine utilizzano gli elementi landmark HTML corretti: <main>, <nav>, <header>. Il layout autenticato utilizza un elemento <main> fornito dal componente sidebar SidebarInset. Il layout di autenticazione avvolge il contenuto in un <main id="auth-main"> che riceve il focus quando il link di salto viene attivato. Tutte le route di pagina di primo livello — incluse la pagina 404, la pagina dei prezzi e tutte le pagine del flusso di checkout (successo, annullamento, Carta del Docente) — forniscono un landmark <main> per consentire agli utenti di lettori di schermo di navigare direttamente al contenuto della pagina.

Le liste di navigazione della barra laterale utilizzano i componenti SidebarMenu e SidebarMenuItem, che vengono renderizzati rispettivamente come elementi semantici <ul> e <li>, preservando la struttura corretta delle liste per la navigazione con lettori di schermo.

Etichette e descrizioni ARIA

I controlli di navigazione a scomparsa e della barra laterale portano attributi aria-label descrittivi che cambiano in base allo stato compresso/espanso.
I pulsanti con solo icona includono aria-label; le icone decorative portano aria-hidden="true", inclusi gli SVG inline (es. il logo Google nel pulsante OAuth).
Le intestazioni di colonna nelle tabelle della lista studenti portano aria-sort che riflette la direzione di ordinamento in tempo reale ("ascending", "descending", o "none").
I pulsanti di selezione del periodo nei pannelli delle statistiche di classe portano aria-pressed.
I pulsanti di alternanza vista carosello/griglia includono sia aria-label che aria-pressed.
I pulsanti espandi/comprimi nelle schede chatbot portano aria-expanded per indicare se il pannello dei dettagli è aperto.
I controlli di navigazione del chatbot (pulsanti precedente/successivo e indicatori di posizione) utilizzano valori aria-label localizzati dalla lingua attiva anziché stringhe inglesi hardcoded.
Il selettore di lingua utilizza un pattern ARIA combobox/listbox completo: il pulsante trigger porta aria-haspopup="listbox" e aria-expanded; l'elenco a discesa utilizza role="listbox" con un id stabile; ogni opzione utilizza role="option" con aria-selected.
Il campo di input per l'autenticazione a due fattori è collegato al suo testo di suggerimento tramite aria-describedby.
I controlli combobox <Select> — inclusi i campi di preferenza nella pagina di Personalizzazione — ricevono il loro nome accessibile tramite associazione <label> (id/htmlFor), in modo che i lettori di schermo annuncino correttamente lo scopo del controllo quando è focalizzato.

Regioni live

Le modifiche dinamiche del contenuto vengono annunciate ai lettori di schermo:

Il feedback di invio del modulo (successo/errore) nella finestra di dialogo Feedback utilizza aria-live="polite" con aria-atomic="true".
Le notifiche di errore globali utilizzano aria-live="assertive" con aria-relevant="additions".
La modifica dell'etichetta del pulsante di reimpostazione password durante il caricamento utilizza aria-live="polite" su uno <span> interno.

Accessibilità delle tabelle

Le tabelle della lista studenti utilizzano la struttura corretta <table>, <thead>, <tbody>, <th scope="col">. L'attributo role="link" è intenzionalmente assente dagli elementi <tr> — sovrascrive il role="row" implicito e causa un conteggio errato delle righe della tabella da parte di VoiceOver. L'attivazione della riga tramite tastiera è invece indicata tramite aria-describedby che punta a un suggerimento nascosto visivamente.

Finestra di dialogo del consenso ai cookie

Il componente di consenso ai cookie porta role="dialog", aria-modal="true" e aria-labelledby che fa riferimento al titolo della finestra di dialogo. Il focus viene spostato sul pulsante di azione principale al termine dell'animazione di ingresso. Il tasto Escape chiude la finestra di dialogo.

Link aperti in nuove schede

I link che si aprono in un nuovo contesto di navigazione includono un'etichetta "(apre in una nuova scheda)" nascosta visivamente aggiunta al loro nome accessibile (es. il link Labidee nella finestra di dialogo Informazioni).

3. Design visivo e colore

Link distinguibili senza fare affidamento sul colore

I link inline presenti nel testo del corpo (es. Termini e condizioni, riferimenti all'Informativa sulla privacy nei flussi di registrazione e prezzi) sono visivamente distinti dal testo circostante da una sottolineatura permanente, soddisfacendo il Criterio di successo WCAG 2.1 1.4.1 (Uso del colore). Gli stati hover mantengono la sottolineatura. I pulsanti link interattivi che sono visivamente distinti dal testo del corpo per contesto e posizione sono esenti da questo requisito.

Contrasto cromatico

Il testo principale e gli elementi interattivi mirano a un rapporto di contrasto minimo di 4,5:1 rispetto allo sfondo (WCAG 2.1 AA, Criterio di successo 1.4.3). La piattaforma utilizza per impostazione predefinita la modalità scura, con un colore di primo piano bianco perla chiaro (#F5F0E8) su sfondo scuro.

È stato condotto un audit sistematico pagina per pagina su tutti i principali percorsi di pagina e su entrambe le varianti del tema Alto contrasto (chiaro e scuro). Tutti i problemi di contrasto identificati sono stati risolti, inclusi:

Token base text-muted-foreground reso globalmente più scuro per superare 4,5:1 sullo sfondo bianco perla in tutti i temi non scuri
Alto contrasto chiaro e scuro: token distruttivi, smeraldo e badge di stato regolati per superare 4,5:1 sui rispettivi sfondi
Correzioni a livello di componente per iniziali avatar, card sessioni, badge abbonamento e testo breadcrumb negli stati del tema interessati

Modalità alto contrasto

Un interruttore Alto contrasto controllato dall'utente è disponibile nel menu Aspetto della barra laterale e in Impostazioni utente → Preferenze. Se abilitato, applica una classe CSS alla radice del documento che aumenta i rapporti di contrasto nell'interfaccia. La preferenza persiste in localStorage e viene applicata in modo sincrono prima del primo rendering del browser per evitare un flash di contenuto non stilizzato.

Ridimensionamento del testo

Il layout dell'interfaccia è costruito con unità relative e risponde correttamente quando la dimensione del testo del browser viene aumentata fino al 200% senza perdita di contenuto o funzionalità (WCAG 1.4.4).

Reflow

L'interfaccia è completamente responsive fino a una larghezza del viewport di 320 px. Il contenuto si ridispone su una singola colonna; non è richiesto lo scorrimento orizzontale al 400% di zoom (WCAG 1.4.10).

4. Movimento e animazione

Rispetta prefers-reduced-motion

La piattaforma rispetta la preferenza prefers-reduced-motion: reduce a livello di sistema operativo tramite il supporto integrato reducedMotion di Framer Motion. Le animazioni CSS (es. animate-pulse) vengono soppresse tramite la media query corrispondente nel foglio di stile globale.

Interruttore riduci movimento controllato dall'utente

Oltre alla preferenza del sistema operativo, un interruttore Riduci movimento è disponibile nel menu Aspetto della barra laterale e in Impostazioni utente → Preferenze. Se abilitato, tutte le animazioni di Framer Motion vengono sostituite da transizioni istantanee. La preferenza persiste in localStorage e viene applicata prima del primo rendering.

5. Moduli e gestione degli errori

Etichette dei moduli

Tutti i campi del modulo hanno un'etichetta associata programmaticamente. Dove il design usa il testo segnaposto come etichetta visiva, viene comunque fornito un elemento <label> esplicito (eventualmente nascosto visivamente). Il textarea della finestra di dialogo Feedback porta un <label> visibile collegato tramite htmlFor/id, garantendo che lo scopo del campo venga annunciato dai lettori di schermo senza affidarsi solo ad aria-label.

Identificazione degli errori

Gli errori di validazione del modulo vengono visualizzati adiacenti al campo di input pertinente e descritti in testo (non solo colore). Il messaggio di errore è collegato all'input tramite aria-describedby.

Scopo dell'input

I moduli di login, registrazione e profilo utilizzano valori standard dell'attributo HTML autocomplete (email, current-password, new-password, given-name, family-name) per supportare il riempimento automatico (WCAG 1.3.5).

Notifiche di errore globali

La piattaforma mostra gli errori in uno stack di banner di notifica in posizione fissa. Questo componente è completamente accessibile da tastiera:

Quando appare un nuovo banner di errore, il focus viene automaticamente spostato al primo elemento azionabile al suo interno (usando un doppio requestAnimationFrame per garantire la disponibilità del DOM). Il focus torna all'elemento precedentemente focalizzato quando tutti i banner vengono chiusi.
Il focus è contenuto nello stack dei banner mentre è visibile, impedendo agli utenti da tastiera di interagire inavvertitamente con il contenuto dietro l'overlay.
Ogni banner utilizza role="alert" (per errori e avvisi) o role="status" (per messaggi di successo e informativi) in modo che i lettori di schermo annuncino la notifica al livello di urgenza appropriato.
I pulsanti Riprova, Invia segnalazione e Chiudi portano tutti tabIndex={0} per un focus affidabile tramite Tab in Safari.
L'attivazione di Riprova chiude immediatamente il banner corrente e tenta nuovamente l'operazione fallita. Se il nuovo tentativo fallisce, viene mostrato un nuovo banner; se ha successo, il banner rimane chiuso.
Gli stati di errore inline all'interno delle sezioni della pagina (es. "Errore nel caricamento delle chat" nella barra laterale, "Errore nel caricamento dei Setup" nella vista chat) utilizzano role="alert" sul contenitore della card in modo che i lettori di schermo li annuncino alla comparsa, e includono un pulsante Riprova focalizzabile da tastiera.

6. Lingua e internazionalizzazione

La piattaforma dichiara la lingua primaria corretta sull'attributo <html lang="">, impostato dinamicamente da next-intl in base alla lingua attiva. Questo consente ai lettori di schermo di utilizzare le regole di pronuncia corrette. Sono supportate sette lingue: italiano (it), inglese (en), rumeno (ro), spagnolo (es), francese (fr), albanese (sq), ucraino (uk).

Problemi noti e limitazioni

ID	Area	Problema	Criterio WCAG	Gravità	Rimedio pianificato
A-01	Pop animazione (Safari/Firefox)	Lo stato `initial` degli elementi Framer Motion non è pre-applicato all'HTML renderizzato lato server; causa un flash di un fotogramma sui browser non Chromium prima dell'idratazione	— (rifinitura visiva)	Minore	In fase di indagine

Metodologia di test

I test sono stati condotti utilizzando i seguenti strumenti e tecnologie assistive:

Strumento / AT	Versione / Note
VoiceOver	macOS 26.3, Safari 26.3
Navigazione solo tastiera	Chrome, Firefox, Safari su macOS
Estensione browser axe DevTools	Utilizzata per la scansione WCAG automatizzata
Analizzatore di contrasto cromatico	Verifiche manuali sui componenti UI principali

I test sono stati eseguiti sull'intero percorso utente autenticato, inclusi login, autenticazione a due fattori, dashboard, chat AI, gestione della classe, impostazioni e flussi di consenso ai cookie.

Feedback e contatti

Accogliamo con favore i feedback sull'accessibilità di Paolagen.ai. In caso di barriere o contenuti non accessibili, inclusi problemi di contrasto cromatico in specifiche configurazioni del tema o contesti di pagina, è possibile contattarci:

In-app: Utilizzare il pulsante Feedback disponibile su ogni pagina della piattaforma.
Email: [email protected]

Ci impegniamo a rispondere ai feedback relativi all'accessibilità entro 5 giorni lavorativi.

In caso di insoddisfazione con la nostra risposta, è possibile contattare l'organismo di vigilanza nazionale italiano:

AGID — Agenzia per l'Italia Digitale Via Liszt 21, 00144 Roma https://www.agid.gov.it

Base giuridica

La presente dichiarazione di accessibilità è redatta in conformità a:

Direttiva (UE) 2016/2102 del Parlamento europeo e del Consiglio sull'accessibilità dei siti web e delle applicazioni mobili degli enti pubblici
Direttiva (UE) 2019/882 (European Accessibility Act), applicabile ai servizi digitali del settore privato a partire dal 28 giugno 2025
D.Lgs. 10 agosto 2018, n. 106, recepimento italiano della Direttiva 2016/2102
Legge 9 gennaio 2004, n. 4 (Legge Stanca), come modificata dal D.Lgs. 106/2018

Cronologia del documento

Data	Versione	Note
Marzo 2026	1.0	Prima pubblicazione