Guide du support de la mise à l'échelle du texte

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 Android doivent redimensionner 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 Redimensionnement du texte. L’information doit être accessible à tous. Ce guide couvrira les méthodes recommandées pour prendre en charge la mise à l'échelle du texte afin de garantir que l'expérience utilisateur soit adaptée à tous.

Pour les appareils Android version 13 et ultérieures, il existe un paramètre d'accessibilité permettant de modifier la taille préférée du texte et du contenu. Pour en savoir plus sur la modification de ces paramètres, consultez le guide d'assistance de Google pour les paramètres de texte et d'affichage

Préparez votre View

Avant de prendre en charge le texte à échelle modifiable, les vues de votre application doivent être prêtes. Lisez les considérations ci-dessous avant la mise en œuvre.

ScrollView

Chaque fois qu'il y a du texte à l'écran, il doit être conforme aux paramètres de texte et d'affichage préférés de l'utilisateur. Pour une police plus grande, il ne faut pas grand-chose pour que le texte déborde hors de l'écran. C'est là qu'il est impératif d'avoir un élément ScrollView comme conteneur pour l'élément de mise en page (ConstraintLayout, LinearLayout, RelativeLayout) pour rendre le texte disponible au-delà des limites de l'écran. Notez que les ScrollViewéléments ne défileront pas tant que la hauteur de l'écran (ou la largeur pour le défilement horizontal) ne sera pas remplie.

Exceptions :

  • Les RecyclerViews éléments n'ont pas besoin d'être intégrés dans un ScrollViewconteneur. Au lieu de cela, laissez les éléments s'étendre verticalement ou horizontalement dans leur hauteur/largeur pour permettre au texte de s'adapter.
  • Les éléments de navigation dans les barres inférieures, les onglets, les barres d'outils, etc., doivent être au même niveau que le contenant ScrollView, et non à l'intérieur du ScrollView. Il est recommandé d'utiliser une seule vue statique à la fois pour ne pas trop restreindre la fenêtre d'affichage.
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/custom_toolbar"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:background="@color/cauldron_main_bg">
            <TextView...>
            <TextView...>
            <androidx.constraintlayout.widget.Guideline...>
            <androidx.constraintlayout.widget.Guideline...>
            <androidx.constraintlayout.widget.Guideline...>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout

ConstraintLayouts sont parfaits pour l'évolutivité du texte en raison des capacités flexibles et des guides que vous pouvez définir. La plupart des problèmes de redimensionnement de texte peuvent être résolus en ne limitant pas la hauteur ou la largeur d'une vue. En permettant à un TextView de s'étendre avec des contraintes définies, la vue comprend comment grandir avec la vue texte, et en tant que tel, le texte est toujours disponible pour l'utilisateur final et n'est pas tronqué ou hors écran.

Une pratique courante consiste à définir la largeur de la vue pour qu'elle corresponde au parent, tandis que la hauteur est définie pour "wrap content". Cela permet à la vue de rester à la largeur définie, mais la hauteur peut s'ajuster à tout contenu à l'intérieur qui peut changer de taille ou de longueur (considérez le texte changeant en fonction de l'état.) Une autre option serait de définir android:layout_width sur 0dp permettant au composant de remplir l'espace entre les contraintes de début et de fin. Vérifiez toujours que les composants peuvent s'étendre verticalement pour s'adapter à la croissance du texte dans ce scénario.

<Button
    andriod:id="@+id/logIn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="24dp"
    android:text="Login"
    app:layout_constraintEnd_toEndOf="@+id/right"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toBottomOf="@+id/password" />

RelativeLayout

RelativeLayoutsont un peu moins flexibles que ConstraintLayout. Assurez-vous de définir les lignes directrices de début et de fin pour les éléments frères afin que les composants soient à l'écran et lisibles.

LinearLayout

LinearLayoutpeut s'adapter aux changements de taille de contenu s'ils se trouvent dans un ScrollView et ne définit pas de match_parent hauteur en lui-même, ou dans un enfant LinearLayout. Si une hauteur spécifique est nécessaire, utilisez l'attribut android:minHeight comme taille par défaut.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:minHeight="30dp">

Modification du contenu

Les sections ci-dessous mettent en évidence certains des paramètres Android disponibles pour modifier la taille du contenu de différentes manières. Assurez-vous que vos vues répondent au contenu croissant pour que le contenu reste disponible à l'écran et exempt de toute ellipse ou troncature.

Mise à l'échelle du texte

Deux captures d'écran affichant l'écran des paramètres de police Android. La première capture d'écran montre la taille du texte par défaut. La deuxième capture d'écran montre la plus grande taille de texte.

Une taille de police plus grande peut être utile pour de nombreux utilisateurs malvoyants. Vous devez toujours respecter les préférences de l'utilisateur lorsqu'il s'agit de définir la taille de la police dans votre application.

Taille de l’écran

La taille d'affichage modifie la taille globale des éléments à l'écran, ce qui profite aux utilisateurs ayant une fonction motrice réduite et/ou aux utilisateurs ayant une déficience visuelle.

Deux captures d'écran montrant les différences de la taille d'affichage dans un exemple d'application avec un petit texte et un texte plus grand. Le contenu principal est plus masqué sur la deuxième capture d'écran avec un texte plus grand.

Taille du texte

Lorsqu'il s'agit de dimensionner les widgets, vous trouverez dans Android deux unités de mesure : DP ou DIP pour les pixels indépendants de la densité et SP ou SIP pour les pixels indépendants de l'échelle de texte. Tout texte doit utiliser SP pour maintenir la cohérence entre les appareils et prendre en charge la mise à l'échelle des polices. Utilisez le linter d'accessibilité d'Android Studio pour afficher un avertissement si SP n'a pas été utilisé sur TextView.

Vous pouvez rencontrer des scénarios où une modification partielle du texte est nécessaire, un lien intégré par exemple. Pour les TextViews, vous pouvez utiliser SpannableStringBuilder pour modifier le texte directement ou modifier la taille du texte avec AbsoluteSpanSize. Évitez les tailles codées en dur pour prendre en charge la mise à l'échelle.

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(size: 70, dip: true), start:15, end:18, Spannded.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Considérations sur les widgets

Quelques conseils pour utiliser les composants natifs d'Android et garantir une bonne expérience d'accessibilité.

  • Toolbar : Si vous utilisez une barre d'outils, nous vous recommandons d'utiliser un titre court pour fournir un contexte. Si vous utilisez un titre dynamique, nous vous recommandons de ne pas utiliser le Toolbar widget.
  • BottomNavBar : Une iconographie distincte avec des descriptions de contenu descriptives aidera à fournir le contexte indispensable à la navigation sans risque de chevauchement des étiquettes.
  • Tabs, ViewPager, TabList, et plus encore : utilisez une vue défilable, si nécessaire, afin qu'un utilisateur puisse interagir avec l'application avec le contexte complet des informations à sa disposition. Ne limitez pas la hauteur d’un contrôle.