Guida al supporto del Dynamic Type
Le applicazioni iOS devono ridimensionare i contenuti per garantire che non vi siano perdite di informazioni o funzionalità per gli utenti che necessitano di dimensioni di carattere maggiori per conformarsi allo standard WCAG 1.4.4 Ridimensiona testo. Le informazioni dovrebbero essere rese disponibili a tutti. Questa guida illustrerà i metodi consigliati per supportare Dynamic Type, in modo da garantire che l'esperienza utente sia adatta a tutti.
Dynamic Type è una funzionalità di accessibilità di iOS che consente di adattare le dimensioni dei caratteri all'intero dispositivo in base alle preferenze dell'utente. Puoi regolare le impostazioni del tipo dinamico nelle Impostazioni di accessibilità del tuo dispositivo. Per saperne di più su Text Display, leggi qui.
Prepara la tua View
Prima di implementare Dynamic Type, le Views della tua applicazione devono essere pronte. Prima dell'implementazione, leggere le considerazioni seguenti.
Per le visualizzazioni in SwiftUI, alcune delle considerazioni seguenti sono fornite di default. Rivedi ciascuna per assicurarti che gli elementi del testo si comportino come indicato.
Assicurati che il contenuto possa scorrere
Un paradigma di progettazione della piattaforma molto diffuso prevede che i contenuti e gli elementi siano disponibili nella vista principale, senza dover scorrere. Sebbene sia ottimo per contenuti facilmente assimilabili e per mantenere un'interfaccia utente minimalista, è importante sottolineare che questi design non dovrebbero scorrere con le impostazioni predefinite, non che non possano scorrere.
Per supportare adeguatamente i tuoi clienti utilizzando tecnologie assistive, come caratteri di dimensioni maggiori, è importante implementare costantemente un UIScrollView o ScrollView su qualsiasi schermata con contenuto. Una volta che il contenuto viene ridimensionato a caratteri di dimensioni maggiori, una quantità considerevole di contenuti potrebbe essere spostata fuori dallo schermo. Se qualcuno carica la tua app utilizzando Dynamic Type e questa non contiene una vista scorrevole, le informazioni non saranno leggibili.
Assicurarsi che i contenuti possano espandersi
Quando si utilizzano i vincoli, tenere presente che anche le visualizzazioni padre dovranno espandersi per adattarsi a dimensioni di carattere maggiori negli elementi di testo. Utilizza contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo e lessThanOrEqualTo per ampliare le tue viste in base alle tue esigenze. Limita l'impostazione di un'altezza e una larghezza costanti per una visualizzazione contenente contenuto.
Assicuratevi che l'usabilità non sia compromessa
Vincoli impropri possono riorganizzare viste e controlli importanti, con un impatto negativo sull'usabilità. Eseguire test con varie dimensioni dei caratteri per garantire che i contenuti siano visualizzati come previsto.
Assicurarsi che i controlli di testo supportino il tipo dinamico
Qualsiasi controllo che includa testo può supportare il tipo dinamico. Verificare che ogni controllo possa espandersi per adattarsi a varie dimensioni di carattere senza spingere il contenuto fuori dallo schermo.
Imposta il numero di righe
Qualsiasi testo con possibilità di overflow dovrebbe avere la proprietà numberOfLines impostata su 0. Questa proprietà consentirà alla vista di espandersi per qualsiasi numero di righe necessarie. Per un UIButton, imposta la proprietà numberOfLines su 0 sul suo titleLabel; questo consentirà al controllo di espandersi verticalmente.
Senza un controllo che si espande per l'aumento del testo, i puntini di sospensione sostituiranno parte o tutto il testo.
Mantieni le intestazioni brevi e concise
Le intestazioni sono estremamente utili per la navigazione di VoiceOver. Dovrebbero essere sufficientemente descrittivi da fornire un contesto, ma abbastanza brevi da rimanere su una sola riga durante il ridimensionamento del testo.
Segui le linee guida di Apple
Apple ha creato diverse linee guida per aiutare gli sviluppatori a supportare Dynamic Type.
Supporto per Dynamic Type
Viste SwiftUI
In iOS 14 o versioni successive, è possibile supportare Dynamic Type in due modi.
Uso di caratteri personalizzati
Quando si utilizza un font personalizzato, per garantire che i font si adattino relativamente allo stile del font dell'elemento di testo, impostare la proprietà .font su .custom(_:size:relativeTo:) .
Utilizzo del carattere predefinito
Quando si utilizza un carattere predefinito in base alla dimensione, il testo verrà ridimensionato automaticamente; tuttavia, se non è impostato alcuno stile di carattere, gli elementi del 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.
Viste UIKit
Quando si creano viste UIKit, attualmente ci sono quattro modi per supportare il Dynamic Type. Ognuno dei metodi descritti di seguito produrrà un comportamento simile per l'utente finale.
Utilizzo del carattere predefinito
Utilizzare il font predefinito di iOS è il modo più semplice per supportare Dynamic Type; è l'unico supportato negli storyboard e nel codice.
Questo articolo di Apple riguarda l'impostazione del Dynamic Type in uno storyboard.
Per utilizzare i font predefiniti a livello di programmazione, seguire i passaggi indicati di seguito.
Imposta il carattere dell'etichetta su uno stile di testo specifico
Apple fornisce TextStyles, un modo per categorizzare il testo nella tua applicazione, in modo che ogni stile presenti differenze visibili. Ad esempio, il TextStyle "Title 1" sarà più grande del TextStyle "Title 2" ed entrambi i TextStyle saranno più grandi del TextStyle "body". L'utilizzo di un font personalizzato è trattato più avanti in Uso delle Metriche dei Font con Ridimensionamento Automatico del Font.
Per impostare il font di un'etichetta su un determinato TextStyle, utilizzare la preferredFont(forTextStyle: ...) funzione:
label.font = UIFont.preferredFont(forTextStyle: .body)Poiché ogni TextStyle è associato a stili e dimensioni di carattere diversi, la sua scala sarà diversa. Ulteriori informazioni su ogni TextStyle sono disponibili nella documentazione Apple.
Imposta adjustsFontForContentSizeCategory
Anche se il font può scalare, ciò non significa che ciò avverrà automaticamente. Utilizzare adjustsFontForContentSizeCategory su tutti gli elementi di testo per supportare la modifica delle impostazioni di tipo dinamico:
label.adjustsFontForContentSizeCategory = trueUso di caratteri personalizzati
Di seguito sono riportati tre modi per supportare Dynamic Type con font personalizzati.
Metriche dei caratteri con il ridimensionamento automatico dei caratteri
Se il font personalizzato supporta il ridimensionamento, UIFontMetrics consente al sistema operativo di svolgere tutto il lavoro!
label.font = UIFont(name: <fontNameHere>, size: UILabel.defaultFontSize)Con UIFontMetrics puoi allegare un font personalizzato con uno specifico stile di testo (TextStyle). Linee guida di progettazione di Apple, menzionano l'utilizzo di diverse dimensioni del corpo per ogni TextStyle. Invece di impostare manualmente la dimensione del corpo per ogni impostazione di Dynamic Type (mostrata più avanti), utilizzare le dimensioni del carattere TextStyle fornite e collegare il carattere personalizzato al TextStyle correlato. Ad esempio, è possibile impostare un font per tutte le didascalie all'interno dell'applicazione con il TextStyle "caption 1":
guard let font = UIFont(name: <fontNameHere>, size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = trueAssicurati di impostare adjustsFontForContentSizeCategory su true in modo che il font possa rispondere automaticamente a una modifica della dimensione del carattere!
Responding to Dynamic Type Size Notifications and Overriding TraitCollectionDidChange sono utili se un font personalizzato non si ridimensiona bene o se le dimensioni in punti per ogni TextStyle non sono appropriate per il font utilizzato.
Risposta alle notifiche della dimensione del Dynamic Type
Gli osservatori di notifica originali continuano a essere supportati (incluso il codice Objective-C). Crea un ascoltatore per la notifica:
NotificationCenter.default.addObserver(self,
selector: #selector(changeTextSize),
name: UIContentSizeCategory.didChangeNotification,
object: nil)Quindi, definisci il selettore. Di seguito è riportato un esempio:
func changeTextSize() {
let newFontSize: CGFloat
switch self.traitCollection.preferredContentSizeCategory {
case .extraSmall: newFontSize = 14
case .small: newFontSize = 15
case .medium: newFontSize = 16
case .large: newFontSize = 17
case .extraLarge: newFontSize = 19
case .extraExtraLarge: newFontSize = 21
case .extraExtraExtraLarge: newFontSize = 23
case .accessibilityMedium: newFontSize = 28
case .accessibilityLarge: newFontSize = 33
case .accessibilityExtraLarge: newFontSize = 40
case .accessibilityExtraExtraLarge: newFontSize = 47
case .accessibilityExtraExtraExtraLarge: newFontSize = 53
default: break
}
guard let font = UIFont(name: "Arial", size: UIFont.labelFontSize) else {
self.font = UIFont.preferredFont(forTextStyle: .body)
return
}
self.font = font.withSize(newFontSize)
}Sovrascrittura TraitCollectionDidChange
La sovrascrittura TraitCollectionDidChange è simile alla risposta alla notifica delle dimensioni del tipo dinamico, ma senza l'ascoltatore delle notifiche.
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
let newFontSize: CGFloat
switch self.traitCollection.preferredContentSizeCategory {
case .extraSmall: newFontSize = 14
case .small: newFontSize = 15
case .medium: newFontSize = 16
case .large: newFontSize = 17
case .extraLarge: newFontSize = 19
case .extraExtraLarge: newFontSize = 21
case .extraExtraExtraLarge: newFontSize = 23
case .accessibilityMedium: newFontSize = 28
case .accessibilityLarge: newFontSize = 33
case .accessibilityExtraLarge: newFontSize = 40
case .accessibilityExtraExtraLarge: newFontSize = 47
case .accessibilityExtraExtraExtraLarge: newFontSize = 53
default: break
}
guard let font = UIFont(name: "Arial", size: UIFont.labelFontSize) else {
self.font = UIFont.preferredFont(forTextStyle: .body)
return
}
self.font = font.withSize(newFontSize)
}