Guide pour la mise à l'échelle du texte sur mobile

Les applications mobiles doivent se conformer à la norme WCAG 1.4.4 « Redimensionner le texte » et ajuster le contenu afin d'assurer qu'aucune information ou fonctionnalité ne soit perdue pour les utilisateurs nécessitant des tailles de police plus grandes. Ce guide présente les méthodes recommandées pour prendre en charge la mise à l'échelle du texte sur les plateformes iOS et Android.

Fonctionnalités spécifiques aux plateformes

iOS – Type dynamique

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 trouverez cette option dans les paramètres d'accessibilité de votre appareil. En savoir plus sur l'affichage du texte auprès d'Apple ici.

Android - Mise à l'échelle du texte et de l'affichage

Pour les appareils Android à partir de la version 13, vous pouvez modifier la taille du texte et de l'affichage dans les paramètres d'accessibilité. Les utilisateurs peuvent ajuster indépendamment la taille de la police et la taille d'affichage. Pour en savoir plus sur la modification de ces paramètres, consultez le guide d'assistance Google sur les paramètres de texte et d'affichage.

Préparer vos vues

S’assurer que le contenu peut défiler

iOS : Lorsque le texte est mis à l’échelle pour des tailles de police plus grandes, une partie importante du contenu peut être repoussée hors de l’écran. Implémentez un UIScrollView ou un ScrollView sur tout écran comportant du contenu.

Android : Utilisez un élément ScrollView comme conteneur pour les éléments de mise en page (contrainte, linéaire, relatif). Les ScrollViews ne défileront pas tant que la hauteur de l'écran (ou la largeur, pour un défilement horizontal) n'est pas remplie.

Exceptions :

• Android : RecyclerViews n'ont pas besoin d'être intégrés dans un(e) ScrollView. Permettre aux éléments de s'étendre verticalement ou horizontalement.
• Android : Les éléments de navigation (barres du bas, onglets, barres d’outils) doivent être au même niveau que le conteneur ScrollView, et non à l’intérieur de celui-ci.

S’assurer que le contenu peut s'étendre

iOS : Utilisez contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo et lessThanOrEqualTo pour permettre aux vues de s'agrandir. Éviter de définir une hauteur et une largeur fixes pour les vues contenant du contenu.

Android : La plupart des problèmes de redimensionnement du texte peuvent être résolus en ne limitant pas la hauteur ou la largeur d'une vue. Autoriser TextView à s'étendre avec des contraintes appliquées. Utilisez wrap_content pour la hauteur et soit match_parent soit 0dp pour la largeur.

Considérations relatives à la mise en page

Android ConstraintLayout : définissez la largeur de la vue à match_parent et la hauteur à wrap_content, ou utilisez la largeur 0dp pour remplir l’espace entre les contraintes. Assurez-vous que les composants puissent toujours s'étendre verticalement.

Android RelativeLayout : Définissez des repères de début et de fin pour les éléments adjacents afin de garantir que les composants restent à l’écran.

Android LinearLayout : Peut s'adapter aux modifications de la taille du contenu lorsqu'il est dans un ScrollView et que vous ne définissez pas la hauteur match_parent. Utilisez android:minHeight pour des besoins spécifiques de hauteur.

Définir le nombre de lignes

iOS : Définissez la propriété numberOfLines sur 0 pour tout texte pouvant déborder. Pour UIButton, définissez numberOfLines à 0 sur son titleLabel.

Android : Utilisez les SP (pixels indépendants de l'échelle) pour tout texte, et non les DP (pixels indépendants de la densité). Vous pouvez utiliser le linter d'accessibilité d'Android Studio pour repérer les erreurs d'utilisation de SP.

Mise en œuvre

Implémentation iOS

SwiftUI Views (iOS 14+)

Utilisation des polices par défaut :

.font(.system(.largeTitle, design: .rounded))

Utilisation de polices personnalisées :

.font(.custom("FontName", size: 16, relativeTo: .body))

Vues UIKit

Utilisation des polices par défaut :

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Utilisation de polices personnalisées avec UIFontMetrics :

guard let font = UIFont(name: "CustomFont", size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true

Gestion manuelle du Dynamic Type :

// Via Notification Observer
NotificationCenter.default.addObserver(self,
                                       selector: #selector(changeTextSize),
                                       name: UIContentSizeCategory.didChangeNotification,
                                       object: nil)

// Via TraitCollection Override
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // Handle font size changes based on preferredContentSizeCategory
}

Implémentation Android

Configuration de base :

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp" />

Exemple de ConstraintLayout :

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button Text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Modification de texte par programme :

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(70, true), 15, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Tests et meilleures pratiques

Directives générales

• Effectuer des tests avec différentes tailles de police pour s'assurer que le contenu s'affiche correctement.
• Veillez à utiliser des titres courts et descriptifs pour une meilleure accessibilité.

Veillez à ce que l'utilisabilité ne soit pas affectée par des contraintes inappropriées. Vérifiez que tous les contrôles de texte prennent en charge la mise à l'échelle sans que le contenu ne soit déplacé hors de l'écran.

Considérations spécifiques à la plateforme

iOS:

• Suivez les consignes typographiques d'Apple et la documentation relative aux types dynamiques.
• Utilisez les TextStyles appropriés (.body, .title1, .caption1, etc.).
• Pour SwiftUI, de nombreuses considérations sont fournies par défaut, mais doivent être examinées.

Android: Préférez des titres courts pour la barre d'outils ; évitez d'utiliser le widget Toolbar pour les titres dynamiques.

• Fournissez des icônes distinctes avec des descriptions accessibles pour la navigation en bas de l'écran.
• Utilisez des vues défilantes pour les onglets, ViewPager et TabList.
• Ne limitez pas la hauteur des commandes.

Points clés

1. Implémentez toujours des conteneurs défilables pour le contenu susceptible de déborder.
2. Utilisez des unités d'échelle appropriées à la plateforme (SP pour Android, TextStyles pour iOS).
3. Testez minutieusement avec différentes tailles de police et paramètres d'accessibilité.
4. Autoriser l'expansion des vues au lieu de les contraindre à des dimensions fixes.
5. Suivez les directives de la plateforme pour une expérience utilisateur optimale.