Guide de prise en charge du Dynamic Type
Les applications iOS doivent mettre à l'échelle le contenu pour garantir l'absence de perte d'informations ou de fonctionnalités pour les utilisateurs nécessitant des tailles de police plus grandes pour se conformer à WCAG 1.4.4 Redimensionner le texte. L’information doit être accessible à tous. Ce guide couvrira les méthodes recommandées pour prendre en charge Dynamic Type afin de garantir que l'expérience utilisateur soit adaptée à tous.
Dynamic Type est une fonctionnalité d'accessibilité d'iOS qui permet d'adapter les tailles de police à l'échelle de l'appareil en fonction des préférences de l'utilisateur. Vous pouvez ajuster les paramètres de Dynamic Type sous Paramètres d'accessibilité sur votre appareil. Pour en savoir plus sur l’affichage de texte d’Apple, cliquez ici.
Préparez votre View
Avant d'implémenter Dynamic Type, les views de votre application doivent être prêtes. Lisez les considérations ci-dessous avant la mise en œuvre.
Pour les vues dans SwiftUI, certaines des considérations ci-dessous sont fournies par défaut. Vérifiez chacune pour vous assurer qu’elle se comporte comme indiqué.
S’assurer que le contenu peut défiler
Un paradigme de conception de plate-forme populaire maintient le contenu et les éléments disponibles dans la vue principale sans qu'il soit nécessaire de faire défiler. Bien qu’il soit idéal pour un contenu facile à comprendre et pour garder une UI minimale, il est important de souligner que ces conceptions ne doivent pas défiler sous les paramètres par défaut, non pas qu’elles ne peuvent pas défiler.
Pour aider correctement vos clients à utiliser des technologies d'assistance telles que des tailles de police plus grandes, il est important d'implémenter systématiquement un UIScrollView ou ScrollView sur n'importe quel écran contenant du contenu. Une fois le contenu adapté à des tailles de police plus grandes, une quantité substantielle de contenu pourrait être poussé hors de l'écran. Si quelqu'un utilisant Dynamic Type charge votre application et qu'elle ne contient pas de vue défilante, les informations ne seront pas lisibles.
S’assurer que le contenu peut s'étendre
Lorsque vous utilisez des contraintes, gardez à l’esprit que les vues parentes devront également s'agrandir pour s’adapter à des tailles de police plus grandes dans les éléments de texte. Utilisez les contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo et lessThanOrEqualTo pour permettre à vos vues de s'étendre selon vos besoins. Il faut limiter la définition d’une hauteur et d’une largeur constantes pour une vue contenant du contenu.
Assurez-vous que l'ergonomie n’est pas affectée
Des contraintes inappropriées peuvent réorganiser des vues et des contrôles importants, ce qui a un impact négatif sur l'ergonomie. Testez différentes tailles de police pour vous assurer que les vues de contenu s’affichent comme prévu.
Assurez-vous que les contrôles de texte prennent en charge le Dynamic Type
Tout contrôle qui inclut du texte peut prendre en charge le Dynamic Type. Vérifiez que chaque contrôle peut s’étendre pour s’adapter à différentes tailles de police sans pousser le contenu hors de l’écran.
Déterminez le nombre de lignes
Tout texte présentant un risque de débordement doit avoir l'attribut numberOfLines défini sur 0. Cet attribut permettra à la vue de s'étendre sur n'importe quel nombre de lignes nécessaires. Pour un UIButton, définissez l'attribut numberOfLines sur 0 sur son titleLabel ; cela permettra au contrôle de s'étendre verticalement.
En l’absence d’un contrôle d'expansion pour le texte en expansion, des points de suspension remplaceront une partie ou la totalité du texte.
Gardez les titres courts et concis
Les titres sont extrêmement utiles pour la navigation VoiceOver. Ils doivent être suffisamment descriptifs pour fournir un contexte, mais suffisamment courts pour rester sur une seule ligne lors du redimensionnement du texte.
Suivez les directives d’Apple
Apple a créé plusieurs directives pour aider les développeurs à prendre en charge le Dynamic Type.
Prise en charge du type dynamique
Vues SwiftUI
Dans iOS 14 ou version ultérieure, vous pouvez prendre en charge Dynamic Type de deux manières.
Utilisation de polices personnalisées
Lorsque vous utilisez une police personnalisée, définissez la propriété .font sur .custom(_:size:relativeTo:) pour garantir que les polices s'adapteront relativement au style de police de l'élément de texte.
Utilisation des polices par défaut
Lorsque vous utilisez une police par défaut par taille, le texte sera mis à l'échelle automatiquement. Cependant, si aucun style de texte n'est défini, les éléments de texte ne seront pas mis à l'échelle en fonction de leur style. Par exemple, le texte qui fonctionne comme un titre sera mis à l'échelle différemment du texte qui fonctionne comme un corps de texte : à mesure que le texte devient plus grand, le texte du titre sera toujours plus grand que le corps du texte.
Pour une expérience optimale, assurez-vous de spécifier le style de police correspondant au comportement attendu de l'élément. En utilisant un modificateur tel que : .font(.system(.largeTitle, design: .rounded)), vous pouvez vous attendre à ce que le texte soit le plus grand texte de la page et serve de titre approprié.
Vues UIKit
Lors de la création de vues UIKit, il existe actuellement quatre manières de prendre en charge Dynamic Type. Chacune des méthodes ci-dessous entraînera un comportement similaire pour l’utilisateur final.
Utilisation des polices par défaut
Utiliser la police par défaut d'iOS est le moyen le plus simple de supporter le Dynamic Type ; c'est la seule qui est supportée dans les storyboards et le code.
Cet article d’Apple couvre la configuration de Dynamic Type dans un storyboard.
Pour utiliser les polices par défaut par programmation, suivez les étapes ci-dessous.
Définir la police de l'étiquette sur un style de texte spécifique
Apple propose TextStyles, un moyen de catégoriser le texte dans votre application, de sorte que chaque style présente des différences visibles. Par exemple, le TextStyle « Titre 1 » sera plus grand que le TextStyle « Titre 2 », et ces deux TextStyles seront plus grands que le TextStyle « body ». L'utilisation d'une police personnalisée est abordée plus loin dans Utiliser les mesures de police avec la mise à l'échelle automatique des polices.
Pour définir la police d'une étiquette sur un certain style de texte, utilisez la fonction preferredFont(forTextStyle: ...) :
label.font = UIFont.preferredFont(forTextStyle: .body)Étant donné que chaque TextStyle est associé à des tailles et des styles de police différents, il sera mis à l'échelle différemment. Vous trouverez plus d'informations sur chaque TextStyle dans la documentation d'Apple.
Définir adjustsFontForContentSizeCategory
Bien que la police puisse être mise à l'échelle, cela ne signifie pas qu'elle sera automatiquement mise à l'échelle automatiquement. Utiliser adjustsFontForContentSizeCategory sur tous les éléments de texte pour prendre en charge la modification des paramètres de type dynamique :
label.adjustsFontForContentSizeCategory = trueUtilisation de polices personnalisées
Vous trouverez ci-dessous trois façons de prendre en charge Dynamic Type avec des polices personnalisées.
Métriques de police avec mise à l’échelle automatique des polices
Si la police personnalisée prend en charge la mise à l’échelle, UIFontMetrics permet au système d’exploitation de faire tout le travail !
label.font = UIFont(name: <fontNameHere>, size: UILabel.defaultFontSize)Avec UIFontMetrics, vous pouvez attacher une police personnalisée avec un style de texte spécifique. Les directives de conception d'Apple mentionnent l'utilisation de tailles de points différentes pour chaque TextStyle. Plutôt que de définir manuellement la taille en points pour chaque paramètre de Dynamic Type (affiché plus tard), utilisez les tailles de police TextStyle fournies et liez la police personnalisée au TextStyle associé. Par exemple, une police pour toutes les légendes de l'application peut être définie avec le TextStyle « légende 1 » :
guard let font = UIFont(name: <fontNameHere>, size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = trueAssurez-vous de définir adjustsFontForContentSizeCategory sur vrai afin que la police puisse répondre automatiquement à un changement de taille de police !
Répondre aux Notifications de Taille de Type Dynamique et Surcharge de TraitCollectionDidChange sont utiles si une police personnalisée ne s'adapte pas bien ou si les tailles de points de chaque TextStyle ne sont pas appropriées pour la police utilisée.
Réponse aux notifications de taille de texte dynamique
Les observateurs de notification d'origine continuent d'être pris en charge (y compris le code Objective-C). Créer un écouteur pour la notification :
NotificationCenter.default.addObserver(self,
selector: #selector(changeTextSize),
name: UIContentSizeCategory.didChangeNotification,
object: nil)Ensuite, définissez le sélecteur. Un exemple est écrit ci-dessous :
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)
}Remplacer TraitCollectionDidChange
La surcharge TraitCollectionDidChange est similaire à la réponse à la notification de taille de type dynamique, mais sans l'écouteur de notification.
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)
}