Supporta il Tipo Dinamico

axe.configuration.optInToSupportsDynamicType = true

Controlli Eseguiti

Gli elementi di testo dovrebbero avere le proprietà necessarie per supportare il Tipo Dinamico e ridimensionarsi in base alla preferenza di dimensione del carattere del dispositivo dell'utente.

Questa regola applica una Best Practice di Deque. Puoi disattivare questa regola dalla Dashboard Mobile o ignorare la regola in test scritti per iOS.

Scopri come disattivare le regole dalla Dashboard Mobile.

Esempio Non Corretto ❌

Gli elementi di testo utilizzano caratteri fissi che non rispondono all'impostazione del Tipo Dinamico dell'utente

Dopo aver aumentato l'impostazione del Tipo Dinamico alla dimensione più grande, il testo remains unchanged — non cresce per riflettere la preferenza dell'utente

Esempio Corretto ✅

Gli elementi di testo utilizzano caratteri scalabili che rispondono all'impostazione del Tipo Dinamico dell'utente

Dopo aver aumentato l'impostazione del Tipo Dinamico alla dimensione più grande, il testo scales up accordingly per corrispondere alla preferenza del dispositivo dell'utente

In Sintesi

• Questa regola ha un impatto critico sugli utenti con problemi di vista che si affidano a testi di dimensioni maggiori
• Gli elementi di testo devono supportare il Tipo Dinamico affinché si ridimensionino quando l'utente modifica la dimensione del carattere del dispositivo

Impatto sugli Utenti

Le persone con problemi di vista sono le più colpite dai testi che non possono ridimensionarsi. Il Tipo Dinamico è una funzione di iOS che permette agli utenti di impostare una dimensione del carattere preferita su tutto il dispositivo, e le app devono rispettare tale preferenza. Quando gli elementi di testo non supportano il Tipo Dinamico, gli utenti che necessitano di testi più grandi devono sforzarsi per leggere contenuti che non si adattano alle loro impostazioni.

Conferma Problema Supporto al Tipo Dinamico

1. Vai alla schermata che contiene il testo e osserva la dimensione attuale del carattere e il suo layout
2. Ingrandisci la dimensione del carattere modificando l'impostazione del Tipo Dinamico:
   • Se stai usando un simulatore:
     1. Apri Ispettore di Accessibilità
     2. Nell'angolo in alto a sinistra dell'ispettore, cambia il dispositivo dal tuo Mac al simulatore iOS
     3. Seleziona il pulsante Impostazioni nell'angolo in alto a destra dell'ispettore
     4. Sotto Dimensione del Carattere, sposta il cursore su un'impostazione più grande
   • Se stai usando un dispositivo con iOS 13.0+:
     1. Apri Impostazioni
     2. Seleziona Accessibilità
     3. Seleziona Schermo e Dimensioni del Testo
     4. Seleziona Testo più Grande
     5. Muovi il cursore in fondo alla pagina verso un'impostazione più grande
3. Torna alla tua app e osserva quanto segue sulla stessa schermata:
   • Inaccessibile: Il testo non ha cambiato dimensione dopo l'aggiornamento dell'impostazione del Tipo Dinamico
   • Accessibile: Il testo ha cambiato dimensione

Correggere i problemi

Per risolvere un problema con il Supporto del Dynamic Type, configura gli elementi di testo per usare font scalabili che rispondono all'impostazione del Dynamic Type dell'utente.

UIKit

Imposta adjustsFontForContentSizeCategory = true su qualsiasi elemento di testo in modo che si aggiorni quando l'utente cambia l'impostazione del Dynamic Type. Usa UIFont.preferredFont(forTextStyle:) per i font di sistema, o UIFontMetrics per scalare un font personalizzato in relazione a uno stile di testo:

// System font — scales automatically to the user's Dynamic Type setting
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// Custom font — scaled relative to a text style using UIFontMetrics
let customFont = UIFont(name: "Georgia", size: 17)!
label.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true

SwiftUI

In iOS 14 o versioni successive, puoi supportare il Dynamic Type in due modi:

• Quando usi un font personalizzato, imposta la proprietà .font su .custom(_:size:relativeTo:) per garantire che i font si scalino in relazione allo stile del testo dell'elemento.
• Quando si utilizza un font predefinito per dimensione, il testo verrà scalato automaticamente. Tuttavia, se non viene impostato alcuno stile di font, gli elementi di testo non verranno scalati secondo il loro stile. Ad esempio, il testo che funziona da titolo verrà scalato in modo diverso rispetto al testo che funziona da corpo. Per la migliore esperienza, specifica lo stile del font per far corrispondere il comportamento atteso dell'elemento. Utilizzando un modificatore come .font(.system(.largeTitle, design: .rounded)), puoi aspettarti che il testo sia il più grande sulla pagina e funzioni come un vero titolo.

React Native

Imposta allowFontScaling={true} su ogni elemento Text per permettergli di scalare secondo le preferenze del dispositivo dell'utente:

<Text style={{ color: 'black', fontSize: 18 }} allowFontScaling={true}> This text allows font scaling. </Text>

Posso ignorare questa regola?

Il supporto del Dynamic Type ha un Impatto critico per gli utenti con problemi di vista. Poiché questa è una regola di Best Practice, può essere disattivata dal Mobile Dashboard o soppressa in test individuali. Tuttavia, raccomandiamo fortemente di supportare il Dynamic Type in tutta l'app piuttosto che ignorare la regola in generale. Scopri di più su ignorare le regole.

Risorse

Pagine dei corsi di Deque University

• Criterio di successo 1.4.4 - Ridimensionare il testo (AA)
• 1.4.4 Ridimensionare il testo (AA)

Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre risorse

• Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.1, Raccomandazione W3C
  • Criterio di successo 1.4.4 - Ridimensionare il testo
• Documentazione per sviluppatori Apple
  • Scalare automaticamente i font
  • Dynamic Type in SwiftUI