Guide pour le redimensionnement du texte mobile

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

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

Fonctionnalités spécifiques à chaque plateforme

iOS - Type dynamique

Le Type dynamique est une fonctionnalité d'accessibilité sur iOS qui permet d'adapter les tailles de police à l'ensemble du dispositif selon les préférences de l'utilisateur. Trouvez cette option dans les paramètres d'accessibilité de l'appareil. En savoir plus sur l'affichage du texte chez Apple ici.

Android - Redimensionnement du texte et de l'affichage

Pour les appareils Android 13 et plus, vous pouvez modifier la taille préférée du texte et du contenu dans les paramètres d'accessibilité. Les utilisateurs peuvent ajuster à la fois la taille de la police et la taille de l'affichage de manière indépendante. En savoir plus sur la modification de ces paramètres dans le guide d'assistance de Google pour les paramètres de texte et d'affichage.

Préparer vos vues

Assurez-vous que le contenu peut défiler

iOS : Lorsque le texte est redimensionné en tailles de police plus grandes, un contenu substantiel peut être poussé hors de l'écran. Implémentez une UIScrollView ou un ScrollView sur tout écran contenant 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 (ou la largeur, pour le défilement horizontal) de l'écran n'est pas remplie.

Exceptions :

Android : Les RecyclerViews n'ont pas besoin d'être intégrés dans un ScrollView. Permettre aux éléments de s'étendre verticalement ou horizontalement.
Android : Les éléments de navigation (barres inférieures, onglets, barres d'outils) doivent être au même niveau que le ScrollView contenant, pas à l'intérieur.

Assurez-vous que le contenu peut s'étendre

iOS : Utilisez contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo et lessThanOrEqualTo pour permettre aux vues de s'étendre. Limitez la définition de hauteurs et largeurs constantes pour les vues contenant du contenu.

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

Considérations spécifiques à la mise en page

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

Android RelativeLayout : Définissez des lignes directrices de début et de fin pour les éléments frères pour garantir que les composants restent à l'écran.

Android LinearLayout : Peut s'adapter aux changements de tailles de contenu s'il se trouve dans un ScrollView et ne pas définir une hauteur match_parent. Utilisez android:minHeight pour des exigences de hauteur spécifiques.

Définir le nombre de lignes

iOS : Définissez la propriété numberOfLines à 0 pour tout texte ayant un potentiel de débordement. Pour UIButton, définissez numberOfLines à 0 sur son titleLabel.

Android : Utilisez SP (pixels indépendants de l'échelle) pour tout le texte, pas DP (pixels indépendants de la densité). Vous pouvez utiliser le linter d'accessibilité d'Android Studio pour détecter les problèmes d'utilisation de SP.

Implémentation

Implémentation iOS

Vues SwiftUI (iOS 14+)

Utilisation des polices par défaut :

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

Utilisation des 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 des 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 Type dynamique :

// 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 programmatique :

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

Testez avec différentes tailles de police pour assurer que le contenu s'affiche comme prévu.
Gardez les titres courts et descriptifs pour une meilleure accessibilité.
Assurez-vous que l'utilisation n'est pas affectée par des contraintes inappropriées.
Vérifiez que tous les contrôles de texte prennent en charge le redimensionnement sans déplacer le contenu hors de l'écran.

Considérations spécifiques à la plateforme

iOS :

Suivez les directives de typographie d'Apple et la documentation pour la prise en charge du type dynamique.
Utilisez les TextStyles appropriés (.body, .title1, .caption1, etc.).
Pour SwiftUI, de nombreuses considérations sont prises en charge par défaut mais doivent être revues.

Android :

Utilisez des titres courts pour les barres d'outils ; évitez le widget Toolbar pour les titres dynamiques.
Fournissez une iconographie distincte avec des descriptions de contenu descriptives pour la navigation inférieure.
Utilisez des vues défilantes pour les onglets, les composants ViewPager et TabList.
Ne limitez pas la hauteur des contrôles.

Points clés

Implémentez toujours des conteneurs défilables pour le contenu pouvant déborder.
Utilisez des unités de redimensionnement appropriées à la plateforme (SP pour Android, TextStyles pour iOS).
Testez minutieusement avec différentes tailles de police et paramètres d'accessibilité.
Permettez aux vues de s'étendre plutôt que de les contraindre à des dimensions fixes.
Suivez les directives de la plateforme pour une expérience utilisateur optimale.