WCAG 1.4.4: Ridimensionare il testo

Cosa Significa Questa Regola

WCAG 1.4.4 Resize Text (Livello AA) stabilisce che il testo deve poter essere ridimensionato fino al 200 percento senza l’uso di tecnologie assistive e senza perdita di contenuto o funzionalità. In termini semplici, quando un utente porta lo zoom del browser al 200% o aumenta la dimensione base del carattere tramite le impostazioni del browser o del sistema operativo, tutto il testo sulla pagina deve rimanere leggibile e tutta la funzionalità deve rimanere intatta.

Il criterio si applica in senso ampio a tutto il testo reso in una pagina web, inclusi il corpo del testo, le intestazioni, le etichette, il testo dei pulsanti, il testo segnaposto all’interno dei campi dei moduli, i link di navigazione, il contenuto delle tabelle e le didascalie. Non si applica al testo che fa parte di un logo o di un nome di marca, né al testo decorativo che non trasmette informazioni ed è presentato esclusivamente come contenuto immagine (come una fotografia scansionata di una nota scritta a mano in cui il testo stesso non è il contenuto accessibile).

Per superare il criterio è necessario che, con zoom al 200% — ottenuto tramite lo zoom di pagina integrato nel browser (Ctrl/Cmd + tasto più o il menu View > Zoom) o tramite l’impostazione della dimensione minima del carattere del browser — siano soddisfatte le seguenti condizioni: nessun testo è tagliato o nascosto dal suo contenitore, nessun testo si sovrappone ad altro testo o a elementi interattivi, non compare alcuna barra di scorrimento orizzontale alla larghezza completa della viewport (tranne per contenuti che richiedono realmente lo scorrimento bidimensionale, come mappe o tabelle di dati) e tutti i controlli interattivi rimangono utilizzabili.

Si registra un fallimento quando valori fissi in pixel bloccano il testo in una dimensione che non può crescere, quando i contenitori usano altezze fisse che tagliano il testo in overflow, quando i meta tag della viewport usano user-scalable=no o maximum-scale=1.0 per bloccare il pinch-to-zoom su mobile, o quando JavaScript intercetta i gesti di zoom per impedire lo scaling. Il criterio è esplicitamente agnostico rispetto alla tecnologia: che l’implementazione usi CSS, testo SVG o testo renderizzato su canvas, ciò che conta è il risultato per l’utente. Si noti che il testo SVG e il testo renderizzato su canvas sono intrinsecamente difficili da ridimensionare e richiedono spesso un’attenzione ingegneristica aggiuntiva.

Perché È Importante

Secondo l’Organizzazione Mondiale della Sanità, circa 2,2 miliardi di persone nel mondo hanno qualche forma di deficit visivo. Tra queste, una quota molto ampia presenta ipovisione — una condizione in cui la vista non può essere completamente corretta con occhiali o lenti a contatto, ma la persona non è completamente cieca. Gli utenti ipovedenti impostano abitualmente lo zoom del browser al 150%, 200% o più, oppure configurano il sistema operativo per visualizzare il testo con una dimensione base maggiore. Quando i siti web bloccano o compromettono questo comportamento, questi utenti vengono completamente esclusi dal contenuto.

Oltre all’ipovisione diagnosticata, fattori situazionali interessano praticamente ogni utente di internet in qualche momento: schermi piccoli, luce solare intensa, affaticamento, vista che invecchia o la lettura in una lingua non familiare possono rendere più difficile interpretare il testo di dimensioni ridotte. Le persone anziane in particolare — una fascia demografica in rapida crescita a livello globale e in Turchia — fanno spesso affidamento sullo zoom come prima forma di accomodamento per l’accessibilità prima di ricorrere a tecnologie assistive specializzate.

Si consideri uno scenario concreto: un paziente sulla sessantina sta cercando di leggere sul proprio smartphone la conferma online dell’appuntamento da un portale ospedaliero. Il foglio di stile mobile dell’ospedale imposta la dimensione del carattere del corpo a 12px usando un valore fisso in pixel e il meta tag della viewport include maximum-scale=1.0. Il paziente prova a usare il pinch-zoom ma l’interfaccia si blocca. Non riesce a leggere la data o il nome del reparto con sufficiente chiarezza da sentirsi sicuro. Chiama l’helpdesk dell’ospedale, consumando tempo del personale e creando ansia per il paziente — un esito completamente evitabile se il criterio fosse stato rispettato.

Da un punto di vista puramente commerciale, una dimensione del testo accessibile è correlata a miglioramenti più ampi dell’usabilità che avvantaggiano tutti gli utenti. I motori di ricerca premiano anche i siti che rendono il testo leggibile a dimensioni normali e ingrandite, perché Googlebot valuta i segnali di leggibilità come parte dei Core Web Vitals e dei fattori di ranking relativi all’esperienza di pagina. Correggere i problemi di ridimensionamento migliora quindi simultaneamente la SEO, riduce il carico sul supporto e amplia il pubblico potenziale.

Regole Axe-core Correlate

WCAG 1.4.4 è principalmente un criterio di test manuale. Gli strumenti automatici possono segnalare un insieme ristretto di condizioni note per impedire il ridimensionamento del testo, ma non possono simulare ed esaminare in modo affidabile tutti gli esiti di layout al 200% di zoom. Le seguenti condizioni sono ciò che gli strumenti automatici tentano di rilevare e che richiede un follow-up manuale:

• meta tag viewport che blocca lo zoom (controllo manuale richiesto): Axe-core include la regola meta-viewport, che segnala qualsiasi tag <meta name='viewport'> che imposti user-scalable=no o maximum-scale a un valore pari o inferiore a 1.0. Questo è l’unico scenario in cui è possibile un rilevamento completamente automatico, perché la violazione è dichiarativa e non dipende dall’esito del layout. Tuttavia, anche questa regola non può determinare se un sito utilizza JavaScript per impedire programmaticamente lo zoom, quindi è sempre necessaria una verifica manuale.
• Dimensioni dei font fisse in pixel (controllo manuale richiesto): Gli strumenti automatici possono segnalare quando i valori CSS di font-size sono impostati in unità assolute in pixel (px) anziché in unità relative (em, rem, % o unità relative alla viewport). Tuttavia, i browser moderni ignorano le dimensioni dei font in pixel assoluti quando l’utente modifica la dimensione predefinita del carattere del browser, quindi un valore in pixel da solo non costituisce un fallimento garantito — dipende dal comportamento del browser e dal fatto che il sito rispetti l’ereditarietà di font-size. Per confermare un effettivo fallimento sono necessarie l’ispezione manuale degli stili calcolati e la verifica visiva.
• Overflow e clipping del contenuto al 200% di zoom (solo manuale): Nessuno strumento automatico può rendere in modo affidabile una pagina al 200% e valutare se tutto il testo rimane visibile e tutti gli elementi interattivi rimangono utilizzabili. È necessario che un tester umano imposti il livello di zoom del browser, scorra la pagina e verifichi ogni area di contenuto. Gli strumenti automatici non hanno accesso allo stato renderizzato dopo lo zoom.
• Testo nelle immagini e nel canvas (solo manuale): Il testo incorporato in immagini raster (<img> che contengono screenshot di testo) o renderizzato su un elemento <canvas> non può essere ridimensionato dal browser. Gli strumenti automatici possono segnalare la presenza di elementi canvas per una revisione manuale, ma non possono determinare se tali elementi canvas contengano testo significativo che l’utente deve leggere.

Come Testare

1. Esegui prima una scansione automatizzata. Apri la pagina in Chrome o Firefox ed esegui axe DevTools (estensione del browser) o Lighthouse (Chrome DevTools, scheda Lighthouse). Cerca in particolare la violazione della regola meta-viewport. Se viene segnalata, annotala come fallimento critico. Controlla anche l’audit CSS per eventuali dichiarazioni di font-size in unità px che compaiono negli avvisi di best practice di axe.
2. Controlla il meta tag viewport nel sorgente. Apri DevTools (F12), vai alla scheda Elements e cerca meta name='viewport'. Leggi attentamente l’attributo content. Se contiene user-scalable=no, user-scalable=0 o maximum-scale=1 (o qualsiasi valore inferiore a 2), si tratta di un fallimento diretto del criterio 1.4.4.
3. Imposta lo zoom del browser al 200%. In Chrome o Firefox, premi ripetutamente Ctrl + Più (Windows/Linux) o Cmd + Più (macOS) finché l’indicatore di zoom del browser non mostra 200%. In alternativa, vai su View > Zoom In. Su Safari per macOS, usa View > Zoom In. Non utilizzare lo scaling del display a livello di sistema operativo per questo test — usa specificamente lo zoom del browser.
4. Scorri tutte le sezioni della pagina al 200% di zoom. Scorri sistematicamente dall’alto verso il basso. Cerca: testo tagliato o nascosto dal suo contenitore, testo che esce dalla sua casella e si sovrappone al contenuto adiacente, etichette dei moduli che scompaiono dietro i relativi campi di input, pulsanti il cui testo è troncato, menu a discesa che si estendono fuori dallo schermo e non possono essere portati in vista con lo scorrimento, e finestre modali che superano la viewport e non possono essere scrollate.
5. Testa tutta la funzionalità interattiva al 200% di zoom. Attiva ogni menu di navigazione, apri ogni modale, invia i moduli, attiva tooltip e popover e interagisci con eventuali caroselli o fisarmoniche (accordion). Verifica che tutti questi elementi rimangano pienamente utilizzabili — non solo visivamente presenti.
6. Testa con NVDA + Firefox (Windows). Abilita NVDA e apri Firefox con zoom al 200%. Naviga usando il tasto Tab e i tasti freccia. Conferma che gli elementi focalizzabili ricevano il focus, che gli indicatori di focus siano visibili (sovrapposizione con WCAG 2.4.7, ma utile da controllare) e che l’ordine di lettura corrisponda all’ordine visivo alla dimensione ingrandita.
7. Testa con VoiceOver + Safari (macOS/iOS). Abilita VoiceOver. Su iOS, vai su Settings > Accessibility > Display & Text Size e abilita Larger Text. Naviga sulla stessa pagina e verifica l’integrità del contenuto. Usa anche il gesto di pinch-to-zoom per confermare che non sia bloccato.
8. Testa l’impostazione della dimensione minima del carattere del browser. In Firefox, vai su Settings > General > Fonts and Colors e imposta la dimensione minima del carattere a 24px. Ricarica la pagina e verifica che tutto il testo rispetti questo minimo e che il layout non si rompa. Questo testa un vettore diverso dello stesso criterio.
9. Testa con JAWS + Chrome (Windows). Apri la pagina in Chrome con zoom al 200% e JAWS attivo. Usa i comandi di lettura di JAWS (Insert + Freccia giù per leggere dal cursore) per confermare che tutto il contenuto testuale venga annunciato e che nessun contenuto venga saltato perché nascosto da clipping in overflow.

Come Correggere

Meta tag viewport che blocca lo zoom — Errato

<!-- WRONG: user-scalable=no prevents pinch-to-zoom on mobile,
     directly violating WCAG 1.4.4 -->
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

Meta tag viewport che blocca lo zoom — Corretto

<!-- CORRECT: Remove user-scalable=no and do not cap maximum-scale below 2.
     Allowing zoom to at least 2 (200%) satisfies WCAG 1.4.4. -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Dimensioni dei font fisse in pixel — Errato

<!-- WRONG: font-size in px ignores the user's browser font-size preference.
     If the user sets a larger default, px values override that preference. -->
<style>
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  .caption {
    font-size: 11px;
  }
</style>
<p>Your appointment is confirmed.</p>

Dimensioni dei font fisse in pixel — Corretto

<!-- CORRECT: Use rem units relative to the root font size (typically 16px browser default).
     1rem = 16px by default, but scales with user preference.
     Setting font-size on :root in % rather than px also respects user settings. -->
<style>
  :root {
    font-size: 100%; /* inherits browser default, typically 16px */
  }
  body {
    font-size: 0.875rem; /* ~14px at default, but scales with user preference */
  }
  h1 {
    font-size: 1.5rem; /* ~24px at default */
  }
  .caption {
    font-size: 0.75rem; /* ~12px at default — still scalable */
  }
</style>
<p>Your appointment is confirmed.</p>

Contenitori a altezza fissa che tagliano il testo — Errato

<!-- WRONG: A fixed height with overflow:hidden will clip enlarged text.
     At 200% zoom, the text grows but the box does not, hiding content. -->
<style>
  .card {
    height: 120px;
    overflow: hidden;
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Contenitori a altezza fissa che tagliano il testo — Corretto

<!-- CORRECT: Use min-height instead of height so the container grows
     with the content when text is enlarged. -->
<style>
  .card {
    min-height: 7.5rem; /* sets a minimum but allows growth */
    overflow: visible; /* or remove overflow:hidden entirely */
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Testo incorporato nelle immagini — Errato

<!-- WRONG: A banner image containing text cannot be resized by the browser.
     Even with alt text, the visual text is inaccessible at high zoom levels. -->
<img src='promo-banner-with-text.jpg' alt='50% indirim — sadece bu hafta sonu'>

Testo incorporato nelle immagini — Corretto

<!-- CORRECT: Use real HTML text over a background image so the browser
     can resize it. The image is decorative background; text is live HTML. -->
<div class='promo-banner' role='region' aria-label='Promosyon'>
  <p class='promo-text'>50% İndirim &mdash; Sadece Bu Hafta Sonu</p>
</div>
<!-- CSS sets the background image on .promo-banner, while .promo-text
     uses rem font-size and contrasts safely against the background. -->

Errori Comuni

• Aggiungere user-scalable=no al meta tag viewport per prevenire la “rottura del layout” su mobile — questa è una violazione diretta e verificabile del criterio 1.4.4 e non deve mai essere usata. Correggi il layout invece di sopprimere la possibilità dell’utente di effettuare lo zoom.
• Impostare maximum-scale=1.0 o qualsiasi valore inferiore a 2.0 — anche senza user-scalable=no, limitare lo zoom a 1.0 o 1.5 impedisce agli utenti di raggiungere il 200% e fa fallire il criterio.
• Usare listener di eventi JavaScript per chiamare event.preventDefault() su eventi di pinch-zoom o della rotellina del mouse — bloccare lo zoom nativo in modo programmatico è funzionalmente equivalente all’approccio con il meta tag viewport e viola lo stesso criterio.
• Impostare font-size in pixel sull’elemento <html> o <body> e poi usare unità em per tutto il resto — se la dimensione del carattere radice è fissata in px, tutti i discendenti em/rem sono di fatto fissi e non risponderanno alla preferenza di dimensione del carattere del browser impostata dall’utente.
• Usare height invece di min-height su componenti card, sidebar o corpi di modali — al 200% di zoom, il testo ingrandito fuoriesce dalle caselle a altezza fissa e viene tagliato da overflow: hidden, nascondendo contenuti critici.
• Collocare testo importante esclusivamente all’interno di elementi <canvas> — il testo renderizzato su canvas è un bitmap rasterizzato e non può essere scalato dai meccanismi di ridimensionamento del testo o di zoom del browser. Qualsiasi testo significativo che un utente deve leggere deve essere disponibile come vero testo HTML o almeno come testo alternativo accessibile.
• Usare elementi SVG <text> con coordinate assolute e senza scaling tramite viewBox — il testo SVG può essere scalabile quando l’SVG usa un viewBox ed è dimensionato con unità relative, ma il testo SVG con attributi x, y, font-size fissati in pixel all’interno di un SVG con width e height fissi non si ridimensiona con lo zoom del browser in tutti i browser.
• Dare per scontato che lo zoom del browser gestisca automaticamente il criterio e saltare i test manuali — lo zoom del browser scala l’intera pagina, incluse immagini e layout, ma il testo che era già troppo piccolo, tagliato o sovrapposto al 100% diventa un problema peggiore al 200%. È sempre necessaria una verifica manuale al livello di zoom.
• Dimenticare di testare i widget incorporati di terze parti — widget di chat, iframe di pagamento, banner per il consenso ai cookie e overlay di analytics sono spesso sviluppati da terze parti usando dimensioni fisse in px e possono bloccare lo zoom. Anche se il codice è di terze parti, il criterio si applica all’intera pagina così come viene consegnata all’utente.
• Correggere il layout desktop per lo zoom ma trascurare il breakpoint mobile — molti team testano lo zoom su desktop e dichiarano il successo, ma le viewport mobile al 200% di zoom presentano una serie separata di sfide di layout, in particolare per i menu di navigazione, le intestazioni fisse e le barre di navigazione inferiori che dipendono da altezze fisse in pixel.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025, stabilisce requisiti obbligatori di accessibilità web e mobile per un insieme definito di organizzazioni che operano in Turchia. La circolare fa riferimento a standard di accessibilità riconosciuti a livello internazionale — allineando di fatto i requisiti turchi a WCAG 2.1 e WCAG 2.2 Livello AA come parametro di riferimento per la conformità.

WCAG 1.4.4 Resize Text è un criterio di Livello AA, e la conformità al Livello AA è la soglia richiesta per ottenere il Logo di Accessibilità (Erişilebilirlik Logosu) rilasciato dal Ministero della Famiglia e dei Servizi Sociali (Aile ve Sosyal Hizmetler Bakanlığı). Il Logo di Accessibilità è sia un segnale di fiducia pubblica sia un punto di controllo normativo — le organizzazioni soggette alla circolare che desiderano esporre il logo o dimostrare la conformità agli auditor devono soddisfare tutti i criteri di Livello AA, incluso 1.4.4.

Le categorie di soggetti coperti dalla Circolare Presidenziale 2025/10 includono: istituzioni e agenzie pubbliche a tutti i livelli di governo; piattaforme di e-commerce e marketplace online; banche e fornitori di servizi finanziari regolati dall’Autorità di Regolamentazione e Vigilanza Bancaria (BDDK); ospedali, centri sanitari e altre organizzazioni sanitarie con servizi digitali rivolti ai pazienti; operatori di telecomunicazioni con 200,000 o più abbonati; agenzie di viaggio e piattaforme di viaggio online; compagnie di trasporto private che offrono servizi digitali di biglietteria o prenotazione; e scuole private e istituzioni educative autorizzate dal Ministero dell’Istruzione Nazionale (Millî Eğitim Bakanlığı, MoNE).

Per ciascuna di queste tipologie di soggetti, l’implicazione pratica del criterio 1.4.4 è significativa. Il portale di home banking di una banca che blocca il pinch-to-zoom su mobile non è solo un fallimento di usabilità — è una non conformità normativa che può comportare rilievi in sede di audit o l’esclusione dal programma del Logo di Accessibilità. Un sistema di prenotazione degli appuntamenti di un ospedale che utilizza dimensioni dei font fisse in pixel all’interno di contenitori che tagliano il contenuto non serve adeguatamente i pazienti ipovedenti e allo stesso tempo non rispetta gli obblighi previsti dalla circolare. Una piattaforma di iscrizione di una scuola privata che incorpora il testo nelle immagini invece di usare testo HTML scalabile è analogamente non conforme.

Le organizzazioni dovrebbero considerare WCAG 1.4.4 non come una casella tecnica da spuntare in modo ristretto, ma come un’aspettativa di base di rispetto per gli utenti con disabilità visive — un’aspettativa su cui convergono la legge turca, le migliori pratiche internazionali e la normale usabilità. L’SDK di overlay di Accsible supporta la conformità al ridimensionamento del testo fornendo controlli configurabili di scaling dei font che consentono agli utenti finali di aumentare la dimensione del testo indipendentemente dallo zoom del browser, offrendo un ulteriore livello di accomodamento oltre ai requisiti di base che i siti stessi devono implementare.