Supporta il tipo dinamico

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

note

Questa è una regola sperimentale e pertanto i suoi risultati sono considerati in fase di beta testing. Scopri di più sulle regole sperimentali e su come puoi contribuire a migliorarle.

L'esecuzione di questa regola comporterà un aumento dei tempi di scansione.

important

Questa regola sarà disponibile per il framework XCUI con la versione 2.6.0. Sarà disponibile solo su richiesta per un periodo di tempo limitato per raccogliere feedback. Provatelo e fateci sapere cosa ne pensate.

Dopo aver inizializzato l'oggetto AxeDevTools per iniziare il test, attiva la regola utilizzando la configurazione:

axe.configuration.optInToSupportsDynamicType = true

il quale axe si riferisce all' AxeDevTools oggetto inizializzato durante l'accesso.

Gli elementi di testo devono avere le proprietà richieste per supportare Dynamic Type e ridimensionare il testo in base alle preferenze del dispositivo dell'utente.

Questa regola impone una buona pratica di Deque. Puoi disattivare questa regola dalla Dashboard Mobile o ignorando la regola nei test scritti per iOS.

Scopri come disattivare le regole dalla dashboard mobile.

Impatto

Le persone ipovedenti sono maggiormente colpite dal testo che non può essere ridimensionato. Dynamic Type è una tecnologia assistiva che consente all'utente finale di modificare la dimensione del carattere sull'intero dispositivo per facilitare la lettura.

Conferma

Navigare alla schermata contenente il testo e osservare la dimensione corrente del carattere e il suo layout
Aumentare la dimensione del carattere modificando l'impostazione Tipo dinamico:
- Se si utilizza un simulatore:
  1. Apri Accessibility Inspector
  2. Nell'angolo in alto a sinistra dell'ispettore, cambia il dispositivo dal tuo Mac al simulatore iOS
  3. Selezionare il pulsante "Impostazioni" nell'angolo in alto a destra dell'ispettore
  4. In "Dimensione carattere", sposta il cursore su un'impostazione più grande
- Se si utilizza un dispositivo iOS 13.0+:
  1. Apri Impostazioni
  2. Seleziona "Accessibilità"
  3. Seleziona "Visualizzazione & Dimensioni testo"
  4. Seleziona "Testo più grande"
  5. Sposta il cursore in fondo alla pagina su un'impostazione più grande
Torna alla tua app e osserva la stessa schermata
- Inaccessibile: il testo non ha cambiato dimensione dopo l'aggiornamento dell'impostazione Dynamic Type.
- Accessibile: il testo ha cambiato dimensione.

Come risolvere

Un problema riscontrato da questa regola si verifica quando le viste non supportano le impostazioni Dynamic Type.

UIKit

Per saperne di più sul supportare il Dynamic Type in UIKit qui.

SwiftUI

In iOS 14 o versioni successive, puoi supportare Dynamic Type:

Quando si utilizza un font personalizzato, impostare la proprietà .font su .custom(_:size:relativeTo:) per garantire che i font si adattino relativamente allo stile del font dell'elemento di testo.
Quando si utilizza un font predefinito per dimensione, il testo verrà ridimensionato automaticamente; tuttavia, se non è impostato alcuno stile di font, gli elementi di testo non verranno ridimensionati in base al loro stile. Ad esempio, il testo che funge da titolo verrà ridimensionato in modo diverso rispetto al testo che funge da testo del corpo: man mano che il testo diventa più grande, il testo del titolo sarà sempre più grande del testo del corpo. Per un'esperienza ottimale, assicurati di specificare uno stile di carattere che corrisponda al comportamento previsto dell'elemento. Utilizzando un modificatore di accesso come: .font(.system(.largeTitle, design: .rounded)), puoi aspettarti che il testo sia il più grande della pagina e che serva come titolo appropriato.

React Native

Assicurati che la proprietà di ogni elemento di testo allowFontScaling sia impostata su true per consentire al testo di adattarsi alle impostazioni del dispositivo preferito dall'utente.

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