1. Parti da un momento difficile da leggere
Immagina un titolo bianco sopra una lampada che ruota: quando il paralume chiaro passa dietro il testo, alcune parole si confondono. È un esempio sintetico. Fermare l’animazione nel momento più favorevole nasconderebbe il problema.
Prepara un elenco dei blocchi essenziali: titolo, spiegazione, caratteristiche, comandi e richiesta informazioni. Osserva cosa passa dietro ciascuno durante rotazione e scorrimento. Ripeti sul telefono: righe e oggetti possono sovrapporsi diversamente rispetto al desktop.
2. Scegli una protezione adatta al contenuto
Per una descrizione lunga, una superficie stabile dietro il testo è una soluzione da valutare. Per un titolo breve può bastare un gradiente locale, purché protegga tutte le righe e gli stati previsti. Spostare il testo fuori dalla traiettoria dell’oggetto è un’altra possibilità.
Chiedi un confronto sul contenuto definitivo. Un’ombra decorativa può separare visivamente il titolo senza risolvere i punti più difficili. Se il gradiente termina prima dell’ultima riga, allunga la protezione o cambia disposizione invece di ridurre il testo per farlo entrare.
3. Verifica il contrasto effettivo
Il criterio WCAG 2.2 sul contrasto minimo richiede generalmente 4,5:1 per il testo ordinario e 3:1 per il testo grande, definito anche in base al peso del carattere. Esistono eccezioni specifiche. Un titolo non rientra automaticamente nella categoria grande.
Confronta testo e sfondo effettivo, considerando trasparenze e stati della scena. Il colore di sfondo dichiarato nella pagina non descrive necessariamente quello dietro le lettere. Evita di basare la misura sui bordi sfumati dei caratteri. Se lo sfondo rimane imprevedibile, rendi stabile la superficie locale prima di ripetere la verifica.
4. Valuta il movimento separatamente
Mettere in pausa la scena e leggere il testo sono due verifiche diverse. Un fermo immagine può ancora avere contrasto insufficiente. Definisci anche quale presentazione usare quando il visitatore preferisce movimento ridotto e controlla che non scompaiano informazioni.
Il controllo pausa deve essere riconoscibile e raggiungibile. Prova poi il percorso con la tastiera: il focus deve permettere di capire dove ti trovi. Non dare per approvata tutta la pagina perché il titolo è leggibile; pulsanti, campi ed eventuali messaggi richiedono attenzione.
5. Usa una scheda per ogni punto critico
Registra il problema con pagina, larghezza della finestra, testo interessato e stato della scena. Una schermata è utile per ritrovare il punto; la verifica successiva deve includere anche il movimento.
| Punto da controllare | Prova concreta |
|---|---|
| Titolo su sfondo variabile | Osservare il passaggio dell’oggetto più chiaro. |
| Descrizione su telefono | Verificare tutte le righe con testo ingrandito. |
| Pulsante di contatto | Controllare etichetta, focus e attivazione. |
| Scena ferma | Leggere informazioni e raggiungere il contatto. |
| Messaggio del modulo | Controllare leggibilità anche con testo più lungo. |
6. Cosa concordare con chi realizza il sito
Porta alla revisione esempi di contenuti lunghi, nomi prodotto e messaggi reali. Il risultato da chiedere è una lettura chiara nelle condizioni concordate, non la conservazione di un effetto a ogni costo.
- Blocchi che devono restare leggibili durante tutta la scena.
- Dispositivi, larghezze e stati da verificare.
- Soluzione prevista per pausa e movimento ridotto.
- Problemi rilevati, correzioni e nuove prove sugli stessi punti.
- Ulteriori controlli necessari: il contrasto da solo non prova l’accessibilità complessiva.
Esplora un esempio
Nella homepage Ospivia puoi osservare la relazione tra testi e scena 3D e provare il controllo di pausa. Usala come riferimento per discutere composizione e movimento nel tuo progetto.
Osserva la homepage Ospivia ↗Prepara il brief del tuo progetto
Un modello di testo riutilizzabile: obiettivi, utenti, funzioni, materiali e criteri di accettazione. Scaricalo senza registrazione e compilalo con il tuo team.
Scarica il brief di progetto (.txt) ↓Riferimenti tecnici
Pubblicato da Ospivia Studio, preparato con supporto AI e verificato rispetto alle fonti tecniche collegate. Gli esempi sono illustrativi e non rappresentano risultati di clienti.