Above the fold: come progettare la parte visibile della pagina

Il cervello umano impiega circa 50 millisecondi per farsi un’opinione su un sito web. Un battito di ciglia. In quella frazione di secondo, l’utente decide se restare a leggere la tua offerta o cliccare il tasto “indietro” e passare al tuo concorrente. Tutta questa brutale selezione naturale avviene in un’area geometrica molto precisa dello schermo: l’Above the Fold.

Per definizione, l’Above the Fold è la porzione di una pagina web visibile immediatamente al caricamento, senza che l’utente debba effettuare alcuno scorrimento verso il basso. È la tua vetrina. Il tuo biglietto da visita. La stretta di mano iniziale.

Progettare questa sezione non significa semplicemente inserire un’immagine accattivante e un testo a effetto. Richiede una calibrazione millimetrica tra psicologia cognitiva, architettura dell’informazione, prestazioni tecniche e design persuasivo. Nelle prossime righe dissezioneremo l’anatomia perfetta di questa prima schermata, analizzando gli errori che bruciano conversioni, l’impatto diretto sul posizionamento organico e le strategie per trasformare i visitatori in clienti paganti.

Cos’è l’Above the Fold e perché è ancora il “Prime Real Estate” del web

Il concetto di “sopra la piega” non nasce con i monitor a cristalli liquidi, ma ha radici profonde nell’editoria cartacea. Fino a qualche decennio fa, i quotidiani venivano esposti nelle edicole piegati esattamente a metà. I direttori dei giornali sapevano perfettamente che le notizie in grado di vendere la copia dovevano risiedere nella metà superiore del foglio. Se il titolo forte e la foto d’impatto non erano visibili “sopra la piega”, il passante non avrebbe mai acquistato il giornale.

Dal giornalismo cartaceo al Web Design

Il web design ha ereditato questo principio psicologico, adattandolo ai pixel. Lo schermo del computer o dello smartphone rappresenta la nuova pagina piegata. L’utente atterra sul tuo sito e, prima ancora di muovere il pollice o la rotellina del mouse, deve ricevere un messaggio inequivocabile. Deve capire esattamente dove si trova, cosa offri e perché dovrebbe importargliene qualcosa.

Il “Prime Real Estate” del web è proprio questo spazio limitato. È il terreno più costoso e prezioso della tua intera infrastruttura digitale, perché è l’unico che ha la garanzia matematica di essere visualizzato dal 100% delle persone che non abbandonano la pagina durante il caricamento.

Il mito dello scroll: gli utenti scrollano ancora?

Esiste una fazione di designer convinta che, data l’abitudine fisica generata dai social network, gli utenti scorrano le pagine web in modo compulsivo e automatico. Questo assunto è pericolosamente parziale. Gli studi di tracciamento oculare condotti dal Nielsen Norman Group (NN/g) hanno dimostrato una realtà ben diversa: gli utenti sono disposti a scrollare, ma dedicano circa l’80% del loro tempo di attenzione agli elementi posizionati nell’Above the Fold.

Lo scroll non è un diritto acquisito. È una ricompensa. L’utente spinge il dito verso l’alto solo se la prima schermata gli ha fornito una motivazione valida per farlo. Se l’Above the Fold è confuso, generico o irrilevante rispetto all’intento di ricerca che lo ha portato lì, la reazione non sarà lo scorrimento, ma l’abbandono immediato della pagina (il famigerato Bounce Rate).

L’impatto dell’Above the Fold su SEO e Core Web Vitals

Progettare la prima schermata non è un’esclusiva competenza dei grafici. L’ingegneria che sta dietro a questa sezione impatta in modo violento sulle metriche tecniche che Google utilizza per posizionare il tuo sito. Un Above the Fold esteticamente perfetto ma tecnicamente disastroso è una zavorra per la SEO.

Largest Contentful Paint (LCP) e First Contentful Paint (FCP)

I Core Web Vitals di Google misurano l’esperienza reale dell’utente. Il parametro LCP (Largest Contentful Paint) calcola il tempo necessario affinché l’elemento visivo più grande della pagina venga renderizzato completamente a schermo. Nella stragrande maggioranza dei casi, questo elemento si trova esattamente nell’Above the Fold: può essere il tag H1, un video in background o la Hero Image.

Se inserisci un’immagine non compressa da 3 Megabyte come sfondo della tua prima schermata, il tuo LCP schizzerà oltre i 2.5 secondi considerati ottimali da Google. Il risultato? Tempi di caricamento biblici, un First Contentful Paint (FCP) ritardato e una penalizzazione in termini di ranking. L’ottimizzazione richiede l’uso di formati di nuova generazione (come WebP o AVIF), il precaricamento (preload) della risorsa visiva principale e l’esclusione della Hero Image dalle logiche di lazy loading.

Cumulative Layout Shift (CLS) nella prima schermata

Hai mai aperto una pagina web da smartphone, hai fatto per cliccare un pulsante e, un millisecondo prima del tap, l’intero contenuto è slittato verso il basso facendoti cliccare su un banner pubblicitario? Questa frustrazione si chiama Cumulative Layout Shift (CLS) e misura la stabilità visiva della pagina.

L’Above the Fold è il terreno più fertile per i problemi di CLS. Font personalizzati che si caricano in ritardo cambiando le dimensioni del testo, banner di accettazione cookie non dimensionati correttamente o immagini prive degli attributi di altezza e larghezza fisse nel codice HTML, causano continui salti del layout. Un CLS elevato nella prima schermata distrugge l’esperienza utente nei primi secondi di navigazione, segnalando a Google un sito di bassa qualità strutturale.

L’Anatomia perfetta: i 5 elementi chiave dell’Above the Fold

Esiste una formula esatta per costruire una prima schermata che converte? Non in termini stilistici, ma sicuramente a livello architettonico. Una Hero Section ad alte prestazioni deve contenere cinque elementi specifici, orchestrati per guidare l’utente verso l’azione senza generare frizioni cognitive.

1. Headline (H1) e Unique Value Proposition (UVP)

Il titolo principale deve rispondere a una singola, spietata domanda nella mente dell’utente: “Cosa c’è qui per me?”. Hai tre secondi per formulare la risposta. La chiarezza vince sempre sulla creatività fine a se stessa. A questo proposito, la scelta tipografica è cruciale: scopri come scegliere i font giusti per il web design per massimizzare la leggibilità della tua headline. I giochi di parole o i claim astratti confondono il pubblico.

Un copywriter inesperto scriverebbe: “Sblocca il tuo potenziale finanziario verso nuovi orizzonti”. Un copywriter orientato alla conversione scriverebbe: “Software di fatturazione automatica per Freelance e PMI”. Il titolo deve comunicare immediatamente la Unique Value Proposition (UVP), ovvero il beneficio concreto e differenziante che offri rispetto al mercato.

2. Sottotitolo descrittivo (Sub-headline)

Se l’H1 attira l’attenzione, il sottotitolo ha il compito di trattenerla. La sub-headline è un paragrafo breve, solitamente di due o tre righe, posizionato immediatamente sotto il titolo principale. Il suo scopo è ampliare la promessa fatta nell’H1, scendendo nel dettaglio operativo o risolvendo preventivamente l’obiezione principale del potenziale cliente.

Riprendendo l’esempio precedente, la sub-headline potrebbe recitare: “Crea, invia e traccia le tue fatture elettroniche in meno di 60 secondi. Nessuna competenza contabile richiesta. Prova gratuita di 14 giorni, senza carta di credito”. Concretezza, velocità e abbattimento del rischio.

3. Call to Action (CTA) primaria e secondaria

L’utente ha capito cosa fai. Ora devi dirgli esattamente cosa deve fare lui. La Call to Action (CTA) primaria è il fulcro della conversione. A livello visivo, il pulsante deve staccarsi nettamente dal resto della pagina utilizzando colori contrastanti. Se il sito è prevalentemente blu, un pulsante arancione o giallo guiderà l’occhio in modo naturale verso il clic.

Spesso è utile affiancare una CTA secondaria per intercettare gli utenti che non sono ancora pronti all’acquisto. Se la CTA primaria è un aggressivo “Acquista ora” (sfondo pieno), la secondaria può essere un “Scopri come funziona” o “Guarda il video” (solitamente stilizzata come pulsante ghost, con solo il contorno visibile). Questa gerarchia cromatica indica chiaramente all’utente quale azione ritieni prioritaria.

4. Hero Image, Video o Elementi Grafici

Il cervello processa le immagini migliaia di volte più velocemente del testo. La componente visiva dell’Above the Fold non ha una funzione decorativa, ma esplicativa. L’errore più comune è riempire questo spazio con foto stock di persone sorridenti in giacca e cravatta che stringono mani: immagini vuote, che non aggiungono alcuna informazione.

L’immagine o il video perfetti mostrano il “Context of use” (il prodotto mentre viene utilizzato) o il risultato finale desiderato. Se vendi un software, mostra una dashboard pulita e intuitiva. Se vendi scarpe da corsa, mostra l’ammortizzazione in azione. Attenzione ai video in autoplay: se decidi di usarli, assicurati che siano muti di default, compressi severamente e che non affossino il parametro LCP discusso in precedenza.

5. Trust Signals (Riprova Sociale)

La fiducia è la valuta principale di internet. Inserire segnali di affidabilità direttamente nell’Above the Fold riduce drasticamente l’ansia da conversione dell’utente. Non costringere le persone a scrollare fino al footer per capire se sei un’azienda legittima.

Elementi di riprova sociale altamente efficaci includono una fascia con i loghi dei clienti più noti (“Scelto dai team di…”), il widget con le stelline e il punteggio di Trustpilot, badge di sicurezza per i pagamenti o menzioni della stampa (“Come visto su…”). Posizionare questi Trust Signals nelle immediate vicinanze della Call to Action primaria aumenta sistematicamente il Conversion Rate.

Best Practices di UX/UI per progettare l’Above the Fold

Definiti i contenuti, bisogna strutturarli. Il design dell’interfaccia utente (UI) e l’esperienza utente (UX) devono lavorare in sinergia per manipolare l’attenzione del visitatore, guidandolo fluidamente lungo un percorso prestabilito.

Progettare per il “Viewport” e il Responsive Design

Parlare di “linea della piega” oggi è tecnicamente inesatto. Non esiste un singolo fold. Esistono migliaia di risoluzioni differenti: dai monitor ultrawide da 34 pollici agli schermi frammentati degli smartphone pieghevoli. Il Viewport è l’area visibile del dispositivo in uso.

Per garantire che l’Above the Fold sia perfetto ovunque, i web designer devono abbandonare le misurazioni in pixel statici e abbracciare unità di misura relative, come le Viewport Heights (vh) in CSS. Impostare una sezione hero con un’altezza minima di `100vh` assicura che occupi esattamente l’intero schermo del dispositivo, a prescindere dalle sue dimensioni. L’approccio Mobile-First è un obbligo: progetta la disposizione degli elementi prima per lo schermo stretto dello smartphone, e solo successivamente espandi il layout per il desktop.

Evitare l’effetto “False Bottom” (Falso Fondo)

Questo è uno degli errori di design più subdoli e distruttivi in assoluto. Il “False Bottom” si verifica quando la progettazione dell’Above the Fold è così geometricamente chiusa e perfetta da sembrare la fine dell’intera pagina. Non ci sono elementi grafici che sbordano, non c’è testo tagliato. L’utente pensa di aver visto tutto e non scrolla.

La soluzione richiede l’inserimento di indizi visivi intenzionali. Lasciare che la parte superiore di un’immagine, o il titolo della sezione successiva, appaiano leggermente tagliati sul fondo dello schermo comunica in modo istintivo che c’è altro contenuto da esplorare. L’uso di frecce direzionali animate che puntano verso il basso o indicatori di scorrimento (“Scroll down”) rompe l’illusione del falso fondo e incoraggia l’esplorazione verticale.

Gerarchia Visiva (Visual Hierarchy) e Spazio Bianco

L’occhio umano non legge le pagine web, le scansiona. La Visual Hierarchy utilizza le dimensioni, il peso dei font e i colori per stabilire l’ordine esatto in cui le informazioni devono essere assimilate. Il percorso visivo tipico nei mercati occidentali segue un Pattern a F (per pagine ricche di testo) o un Pattern a Z (ideale per le landing page).

Il collante che tiene insieme questa gerarchia è lo Spazio Bianco, o Negative Space. Non inteso letteralmente come colore bianco, ma come spazio vuoto tra gli elementi. Rimuovere il rumore visivo e lasciare “respirare” l’H1 e la CTA riduce il carico cognitivo. Meno elementi ci sono a competere per l’attenzione, più potente diventa il messaggio centrale.

I 4 Errori fatali da evitare nella Hero Section

Sapere cosa inserire è vitale, ma sapere cosa omettere salva i fatturati. Esistono pattern di design obsoleti che continuano a infestare il web, abbassando i tassi di conversione e frustrando gli utenti. Elimina immediatamente questi quattro elementi dalla tua prima schermata.

1. L’uso dei Caroselli (Image Sliders)

Gli slider di immagini nella Hero Section sono il male assoluto del web design moderno. Spesso vengono scelti per accontentare diversi reparti aziendali che vogliono il proprio messaggio in prima pagina. I dati sono impietosi: le statistiche dimostrano che i caroselli generano un tasso di clic (CTR) inferiore all’1%, e quasi tutti i clic si concentrano sulla prima slide. Inoltre, appesantiscono enormemente la pagina, distruggono le performance SEO e causano “banner blindness” (cecità da banner) perché il movimento li fa assomigliare a inserzioni pubblicitarie.

2. Sovraccarico cognitivo

Vendere tutto significa non vendere nulla. L’Above the Fold non è il posto dove spiegare la storia dell’azienda, elencare tutte e 24 le funzionalità del prodotto e chiedere all’utente di iscriversi alla newsletter, scaricare l’app e comprare il servizio premium contemporaneamente. Troppo testo, animazioni frenetiche e CTA in competizione tra loro paralizzano il processo decisionale. Scegli un obiettivo singolo per la pagina e subordina tutto il resto a quell’azione.

3. Navigazione (Menu) troppo invadente

L’header del sito è necessario, ma non deve cannibalizzare l’Above the Fold. Mega-menu giganteschi, decine di link di navigazione e barre di ricerca sproporzionate rubano spazio verticale prezioso alla tua Value Proposition. Nelle landing page destinate a campagne di advertising a pagamento, la best practice impone addirittura di rimuovere completamente il menu di navigazione, chiudendo l’utente in un “imbuto” dove l’unica via d’uscita è il clic sulla Call to Action.

4. Nascondere la CTA sotto la piega

A meno che tu non stia vendendo un prodotto ad altissimo costo (High-Ticket) che richiede un lungo processo di educazione e persuasione testuale prima di chiedere l’azione, la Call to Action deve risiedere nell’Above the Fold. Obbligare l’utente a cercare il pulsante di acquisto o il modulo di contatto significa creare attrito. Rendi l’azione immediata e accessibile nei primi tre secondi di navigazione.

Esempi di Above the Fold ad alta conversione (Casi Studio)

La teoria è fondamentale, ma l’analisi visiva di casi reali permette di comprendere appieno come i grandi brand strutturano la loro prima schermata. Analizziamo le strategie vincenti in diversi settori competitivi.

Settore SaaS (Software as a Service)

Nel mercato del software, la chiarezza batte sempre la creatività. L’utente deve capire immediatamente cosa fa il tool e come può semplificargli la vita.

Caso Studio: Slack

• Cosa funziona: L’headline è un concentrato di benefici (‘Un posto per lavorare con chiunque, ovunque’). La CTA primaria (‘Prova gratuitamente’) è in forte contrasto cromatico, affiancata da una secondaria (‘Parla con il team vendite’).
• Il visual: Utilizzano illustrazioni o screenshot puliti dell’interfaccia che mostrano il contesto d’uso reale dell’applicazione.

Caso Studio: Notion

• Cosa funziona: Minimalismo estremo. Un H1 audace, un sottotitolo che spiega la versatilità del prodotto e una singola CTA chiara. Lo spazio bianco abbonda, guidando l’occhio esattamente dove serve.

Settore E-commerce

Per gli store online, l’Above the Fold deve bilanciare la promozione delle offerte con una navigazione intuitiva verso le categorie di prodotto.

Caso Studio: Zalando

• Cosa funziona: La gerarchia visiva è impeccabile. La Hero Image stagionale cattura l’attenzione, ma non sovrasta la barra di navigazione e la funzione di ricerca, che rimangono i veri protagonisti per l’intento transazionale.

Caso Studio: Amazon.it

• Cosa funziona: Amazon sacrifica l’estetica per l’efficienza. L’Above the Fold è un trionfo di personalizzazione, mostrando immediatamente caroselli statici basati sulla cronologia di navigazione dell’utente e offerte lampo.

Settore Servizi / Lead Generation

Quando l’obiettivo è acquisire contatti, la fiducia (trust) e l’abbattimento del rischio sono gli elementi centrali della Hero Section.

Caso Studio: HubSpot

• Cosa funziona: Sottotitolo estremamente concreto che quantifica il valore. La presenza massiccia di Trust Signals (‘Oltre 167.000 clienti’) posizionati strategicamente vicino al pulsante di iscrizione rassicura l’utente.

Settore Alberghiero / Hospitality

Nel settore travel, l’emozione visiva deve fondersi con l’usabilità tecnica del motore di prenotazione.

Caso Studio: Booking.com

• Cosa funziona: Il form di ricerca (destinazione, date, ospiti) domina incontrastato il centro della pagina. L’immagine di sfondo è evocativa ma scura, garantendo il perfetto contrasto con i campi di input bianchi e la CTA gialla brillante.

Come testare e ottimizzare la tua prima schermata

Il design basato sull’istinto produce risultati mediocri. Le Hero Section che convertono sono il frutto di un processo iterativo basato sui dati. Ecco come misurare e migliorare le performance del tuo Above the Fold.

Heatmap e Scrollmap

Strumenti come Hotjar, Crazy Egg o il gratuito Microsoft Clarity sono essenziali per capire come gli utenti interagiscono con la pagina. Le Heatmap (mappe di calore) ti mostrano esattamente dove cliccano i visitatori: le zone rosse indicano alta interazione, quelle blu vengono ignorate. Se la tua CTA principale si trova in una zona fredda, hai un problema di gerarchia visiva. Le Scrollmap, invece, ti indicano la percentuale esatta di utenti che supera la linea della piega, aiutandoti a capire se stai generando l’effetto ‘falso fondo’.

A/B Testing

Non indovinare, testa. L’A/B testing consiste nel mostrare due varianti della stessa pagina a segmenti di traffico diversi per vedere quale performa meglio. Utilizza strumenti come VWO, Optimizely o plugin nativi per WordPress come Nelio. Testa un elemento alla volta: inizia dalla headline, poi passa alla CTA e infine alla Hero Image. Esempio pratico: testa il tuo H1 attuale contro una versione che include un beneficio numerico specifico (da ‘Trasforma il tuo business’ a ‘Aumenta le conversioni del 35%’). Ricorda che servono almeno 1000 visitatori per ottenere una significatività statistica affidabile.

Intelligenza Artificiale e generazione automatica di Hero Section

L’Intelligenza Artificiale sta rivoluzionando anche il web design. Strumenti avanzati come Framer AI, Relume o EmbedSocial AI Builder permettono di generare layout completi per l’Above the Fold in pochi secondi. Inoltre, tool come ChatGPT o Jasper sono eccellenti alleati per generare decine di varianti di headline per i tuoi A/B test. Tuttavia, c’è un caveat: l’AI tende a produrre layout standardizzati e generici. La personalizzazione strategica, la comprensione psicologica del tuo target e l’allineamento con il brand richiedono ancora la sensibilità e la competenza di un copywriter e di un designer umano.

KPI da monitorare per l’Above the Fold

Per valutare il successo della tua prima schermata, tieni sotto controllo questi indicatori chiave di prestazione:

• Bounce Rate: la percentuale di utenti che abbandona la pagina senza interagire. Un tasso alto indica che l’ATF non risponde all’intento di ricerca.
• Scroll Depth: la percentuale di visitatori che scorre oltre il fold. L’obiettivo è spingere questo dato oltre il 60%.
• Click-Through Rate (CTR) della CTA: quanti utenti cliccano sul pulsante primario rispetto al totale dei visitatori.
• Time to First Click: quanto tempo impiega l’utente a compiere la prima azione. Minore è il tempo, maggiore è la chiarezza del layout.
• LCP (da Google Search Console): il tempo di caricamento dell’elemento più grande. Deve restare rigorosamente sotto i 2.5 secondi.

Above the Fold nell’Email Marketing e nel Display Advertising

Il concetto di ‘sopra la piega’ non si limita ai siti web, ma si estende a tutti i canali digitali. Nell’email marketing, l’Above the Fold corrisponde al pannello di anteprima (preview panel) dei client di posta, che mostra solo i primi 300-500 pixel del messaggio. Per massimizzare i clic, è vitale ottimizzare il preheader text, posizionare la CTA primaria ben visibile nell’anteprima ed evitare immagini enormi in apertura (poiché molti client le bloccano di default).

Lo stesso principio si applica al Display Advertising: i dati IAB (Interactive Advertising Bureau) dimostrano che i banner pubblicitari posizionati nell’Above the Fold registrano un Click-Through Rate dalle 2 alle 3 volte superiore rispetto a quelli relegati nel Below the Fold.

Il verdetto sui tuoi primi 50 millisecondi

L’Above the Fold è il momento della verità della tua presenza online. Deve caricarsi alla velocità della luce, dichiarare senza mezzi termini quale problema risolvi e fornire una rampa di lancio priva di attriti verso l’azione successiva. Ogni pixel mal posizionato o parola superflua in quest’area ti costa denaro reale, ogni singolo giorno.

Prendi il tuo smartphone in questo preciso istante. Apri il tuo sito web. Fissa la prima schermata per tre secondi netti e poi distogli lo sguardo. Hai capito esattamente perché un cliente dovrebbe darti i suoi soldi anziché darli a un tuo concorrente? Se la risposta è accompagnata da esitazioni, la tua interfaccia sta sabotando il tuo business. Contattaci per un audit UX/UI approfondito e trasformiamo quei 50 millisecondi di dubbio in conversioni misurabili.

Above the Fold vs Below the Fold: differenze e quando conta davvero

Mentre l’Above the Fold cattura l’attenzione iniziale, il Below the Fold (tutto ciò che è visibile solo dopo lo scorrimento) ha il compito di approfondire e convincere. Secondo i dati del Nielsen Norman Group, gli utenti trascorrono circa l’80% del loro tempo nella prima schermata, ma questo non rende inutile il resto della pagina.

Il vero obiettivo della tua Hero Section non è sostituire lo scroll, ma motivarlo. Il below the fold diventa cruciale per pagine di contenuto lungo, articoli di blog o schede prodotto e-commerce che richiedono specifiche tecniche dettagliate. Ecco un confronto diretto tra le due aree:

Quanto è grande l’Above the Fold? Dimensioni e Viewport per dispositivo

Una delle domande più frequenti tra i web designer è: quanti pixel misura esattamente l’above the fold? La risposta è che non esiste una dimensione fissa. Il viewport (l’area visibile dello schermo) varia drasticamente in base al dispositivo, alla risoluzione e persino all’interfaccia del browser utilizzato dall’utente.

Per progettare in modo efficace, dobbiamo basarci sulle risoluzioni più comuni. Ecco una stima delle dimensioni dell’above the fold nel 2026, tenendo conto dello spazio occupato dalle barre di navigazione dei browser:

Per verificare come appare la tua prima schermata, puoi utilizzare i DevTools di Google Chrome. Premi F12, clicca sull’icona ‘Toggle device toolbar’ e seleziona i vari dispositivi per simulare esattamente dove cade la linea della piega per i tuoi utenti.

Accessibilità nell’Above the Fold: progettare per tutti gli utenti

Una Hero Section ad alte prestazioni non deve essere solo bella e veloce, ma anche inclusiva. L’accessibilità web è ormai un fattore di qualità imprescindibile, premiato anche dai motori di ricerca. Ecco come ottimizzare la prima schermata per tutti gli utenti.

Contrasto colori e leggibilità del testo

Le linee guida WCAG 2.1 AA impongono un rapporto di contrasto minimo di 4.5:1 per il testo normale e 3:1 per il testo grande. Un errore frequente è posizionare testo bianco direttamente su un’immagine di sfondo fotografica, rendendolo illeggibile. Per risolvere, applica un overlay scuro semi-trasparente sull’immagine, utilizza gradienti strategici o aggiungi un leggero text-shadow per far risaltare la tipografia.

Navigazione da tastiera e screen reader

Molti utenti navigano utilizzando esclusivamente la tastiera o tecnologie assistive. Assicurati che il focus iniziale atterri su un elemento significativo e che la tua CTA principale sia facilmente raggiungibile premendo il tasto Tab. Inoltre, gli screen reader devono poter leggere un tag H1 semantico e testuale; evita di inserire il titolo principale all’interno di immagini o file SVG senza gli adeguati attributi ARIA.

Riduzione del motion e animazioni

Animazioni complesse o video in background possono causare problemi agli utenti con disturbi vestibolari. È fondamentale rispettare la media query CSS prefers-reduced-motion, disabilitando le animazioni non essenziali per chi ne fa richiesta a livello di sistema operativo. Se utilizzi video in autoplay, assicurati che siano muti di default e fornisci sempre un pulsante visibile per metterli in pausa.

Domande Frequenti (FAQ) sull’Above the Fold