Dans ScrollView

Le texte doit être dans une vue défilante pour garantir que tous les éléments sont visibles sur toutes les tailles d'écran.

Impact

Les personnes utilisant Dynamic Type sur iOS sont les plus touchées. Lorsque le Dynamic Type est activé, les tailles de texte peuvent être augmentées et peuvent se déplacer hors de l'écran. Si le texte ne se trouve pas dans une vue défilante, les informations ne seront pas disponibles pour l'utilisateur final. Les vues de défilement sont un excellent moyen de prendre en charge différentes tailles d'écran, garantissant que tout le contenu est accessible.

Confirmation

1. Si le contenu de la page occupe moins d'un écran, agrandissez tout le texte avec Dynamic Type :
   • Si vous utilisez un simulateur :
     1. Ouvrir l'inspecteur d'accessibilité
     2. Dans le coin supérieur gauche de l'inspecteur, changez le simulateur iOS de votre Mac à l'appareil
     3. Sélectionnez le bouton « Paramètres » dans le coin supérieur droit de l'inspecteur
     4. Sous « Taille de la police », déplacez le curseur vers un réglage plus grand
   • Si vous utilisez un appareil iOS 13.0+ :
     1. Ouvrez les paramètres
     2. Sélectionnez « Accessibilité »
     3. Sélectionnez « Affichage et taille du texte »
     4. Sélectionnez « Texte plus grand »
     5. Déplacez le curseur en bas de la page vers un réglage plus grand
2. Tenter de faire défiler jusqu'à l'élément de texte
   • Inaccessible : vous n'avez pas pu faire défiler l'élément de texte.
   • Accessible : vous avez pu faire défiler jusqu'à l'élément de texte.

Comment corriger

Un problème détecté par cette règle est causé par la non-utilisation d'un UIScrollView ou ScrollView dans votre application pour les éléments de texte.

Remarque : si le texte fait partie d'un élément épinglé, tel que UINavigationBar, UITabBar, etc., UILargeContentViewer doit être utilisé à la place.

UIKit

Ajoutez un UIScrollView comme vue parent des éléments de votre écran. Ce tutoriel de Ray Wenderlich offre un excellent guide.

SwiftUI

Ajout de texte dans un ScrollView :

     var body: some View {
        ScrollView {
            VStack  {
                HStack {
                    Text("This text is in a scroll view")
                        .padding()
                }
            }
        }
    }

React Native

Les éléments de texte doivent être dans un élément ScrollView . L'élément ScrollView doit être dans un SafeAreaView pour garantir que le contenu reste dans les limites de la fenêtre pendant le défilement.

<SafeAreaView style={{ flex: 1 }}>
   <ScrollView>
     <View>
       <Text> Make sure each screen has a ScrollView! </Text>
     </View>
   </ScrollView>
</SafeAreaView>