Linee Guida

Ingrandimento e adattamento dei contenuti

L’ingrandimento dei contenuti e l’adattamento dell’aspetto della pagina web sono fondamentali per garantire che tutti gli utenti possano leggere e utilizzare i contenuti. Quando l’utente ingrandisce il testo o la pagina, i contenuti devono rimanere chiari e leggibili, senza richiedere lo scorrimento orizzontale o causare la perdita di informazioni. Se, con l’ingrandimento, gli elementi si sovrappongono, scompaiono o diventano poco leggibili, l’utilizzo del sito web diventa molto difficile.
Vrsta: Accessibilità digitale
Zahtevnost: Base
Autore: Andreja Bevc
Pubblicato:
Aggiornato:
Deli na:

Smernica pokriva oviranosti:

È inoltre importante che gli utenti possano personalizzare l’aspetto del testo, ad esempio la spaziatura tra le righe, le lettere e i paragrafi. Queste personalizzazioni riducono lo sforzo durante la lettura, migliorano la comprensione dei contenuti e consentono un utilizzo più confortevole del web. Quando il contenuto è adattabile, l’esperienza utente migliora indipendentemente dal modo e dalle condizioni in cui l’utente utilizza il web.

Esempio di contenuto ingrandito al 400% che rimane chiaro e leggibile:

Schermata di un testo che presenta gli orari di un’organizzazione, in cui anche con un ingrandimento molto elevato il contenuto si adatta e rimane leggibile.

Per quali utenti sono particolarmente importanti l’ingrandimento e la personalizzazione dei contenuti?

La possibilità di ingrandire e personalizzare l’aspetto dei contenuti è particolarmente importante per:

  • persone ipovedenti,
  • persone che utilizzano strumenti di ingrandimento dello schermo,
  • persone con dislessia e altre disabilità cognitive,
  • utenti anziani.

Allo stesso tempo, queste personalizzazioni sono utili anche al pubblico più ampio, ad esempio durante l’utilizzo di dispositivi mobili, in condizioni di scarsa illuminazione o durante letture prolungate. Quando il contenuto rimane leggibile, adattabile e stabile anche con l’ingrandimento, il web diventa più facile e piacevole da utilizzare per tutti.

Ingrandimento dei contenuti

La possibilità di ingrandire i contenuti è particolarmente importante per gli utenti ipovedenti, poiché consente loro di leggere più comodamente e comprendere meglio i contenuti web senza ricorrere a strumenti aggiuntivi. Gli utenti spesso ingrandiscono la visualizzazione della pagina direttamente nel browser, pertanto il sito web deve rimanere chiaro e utilizzabile anche con livelli di ingrandimento elevati. Se con l’ingrandimento il layout si altera o alcune parti del contenuto scompaiono, ciò rappresenta una seria barriera all’utilizzo.
È importante che il testo e i contenuti possano essere ingranditi fino al 400% con una larghezza dello schermo di 1280 px, senza perdita di informazioni, funzionalità o comprensibilità della pagina.

Esempio di sovrapposizione dei contenuti durante l’ingrandimento:

Schermata di un testo che, con l’ingrandimento, inizia a sovrapporsi perché l’altezza delle righe è impostata su un valore fisso.

Dove si verificano più frequentemente problemi con l’ingrandimento?

Sovrapposizione del testo

Un problema frequente con livelli di ingrandimento elevati (ad es. 400%) è la sovrapposizione del testo con altri elementi, come menu, icone dei plugin o finestre a comparsa.

Esempio di sovrapposizione del contenuto con un’icona:

Schermata del testo nel piè di pagina che, con l’ingrandimento, inizia a sovrapporsi a un’icona mobile presente nel piè di pagina, rendendo il testo illeggibile.

L’area di visualizzazione è troppo piccola

Può inoltre accadere che, con un livello di ingrandimento elevato, l’area disponibile per la visualizzazione del testo sia troppo piccola, rendendo la lettura ancora più difficile.

Esempio di un’area di visualizzazione del testo troppo piccola:

Schermata in cui l’area di visualizzazione del testo è molto stretta e rende difficile percepire il contenuto.

Il contenuto non si adatta alla larghezza

Quando l’adattamento non è adeguato, con l’ingrandimento compare spesso anche una barra di scorrimento orizzontale, poiché il contenuto non si adatta alla larghezza dello schermo. Ciò richiede continui spostamenti verso sinistra e verso destra, affaticando rapidamente l’utente e rendendo più difficile seguire il contenuto.

Esempio in cui il contenuto non si adatta alla larghezza e compare una barra di scorrimento orizzontale:

Esempio di schermata in cui, con l’ingrandimento, compare anche una barra di scorrimento orizzontale che deve essere utilizzata per poter visualizzare l’intero contenuto.

Come verificare il funzionamento del sito web con l’ingrandimento?

La leggibilità e il funzionamento del sito web con l’ingrandimento possono essere verificati facilmente aumentando nel browser la visualizzazione fino al 200% con una larghezza di 1280 px. Il testo, il layout e le funzionalità devono rimanere chiaramente visibili, utilizzabili e completamente gestibili. Con questo livello di ingrandimento, nella maggior parte delle pagine il menu standard viene sostituito dal cosiddetto “menu hamburger”, che deve essere testato separatamente.

Successivamente aumentiamo l’ingrandimento fino al 400%, livello al quale le funzionalità devono rimanere disponibili e il contenuto deve essere percepibile senza la necessità di scorrimento orizzontale (la barra di scorrimento non dovrebbe comparire se lo scorrimento non è necessario per leggere l’intero contenuto). Lo scorrimento orizzontale è consentito nel caso di immagini ingrandite e tabelle di dati.

Personalizzazione della spaziatura

La possibilità di modificare la spaziatura tra le righe, le lettere e i paragrafi ha un impatto significativo sulla leggibilità del testo. Ciò è particolarmente importante per gli utenti con dislessia, ipovisione o disabilità cognitive. Una spaziatura adeguata riduce il sovraccarico visivo e facilita la lettura del testo.
Se gli spazi sono troppo ridotti, la lettura diventa faticosa, soprattutto nei testi più lunghi. Il contenuto web deve quindi essere progettato in modo da consentire la personalizzazione della spaziatura in conformità con le linee guida per l’accessibilità, senza sovrapposizioni dei contenuti o perdita di funzionalità.

Esempio in cui, modificando la spaziatura, i contenuti iniziano a sovrapporsi:

Schermata in cui, con l’ingrandimento, il testo si sovrappone al modulo, rendendo più difficile la lettura e la percezione del contenuto.

Adattamento ai diversi orientamenti dello schermo

Il sito web deve essere utilizzabile indipendentemente dal fatto che lo schermo sia orientato verticalmente (portrait) o orizzontalmente (landscape). Il contenuto deve adattarsi correttamente a entrambi gli orientamenti, poiché gli utenti accedono ai contenuti web utilizzando dispositivi molto diversi.

Questo aspetto è particolarmente importante per gli utenti con disabilità motorie, che possono utilizzare dispositivi montati su sedie a rotelle, tablet fissati o particolari sistemi di supporto che non consentono di ruotare lo schermo. Lo stesso vale per gli utenti di schermi più grandi o fissi, per i quali modificare l’orientamento non è pratico o possibile.

Collegamento con le linee guida per l’accessibilità (WCAG)

L’ambito relativo all’ingrandimento dei contenuti e alla personalizzazione dell’aspetto delle pagine web riguarda i seguenti criteri di successo WCAG:

  • 1.4.4 Ridimensionamento del testo
  • 1.4.10 Ricalcolo del flusso
  • 1.4.12 Spaziatura del testo
  • 1.3.4 Orientamento


Questi criteri garantiscono che il testo possa essere ingrandito e personalizzato senza perdita di contenuto o funzionalità e senza la necessità di scorrimento orizzontale. Consentono alle pagine web di rimanere leggibili, chiare e utilizzabili anche con livelli di ingrandimento elevati o con una spaziatura modificata, un aspetto fondamentale per gli utenti ipovedenti, le persone con disabilità cognitive e tutti coloro che necessitano di una visualizzazione adattabile dei contenuti.