Dans ScrollView

Ce que nous vérifions

Le texte doit être contenu dans des zones défilables pour s'assurer que tout le contenu est visible, même lorsque le texte est redimensionné.

Remarque: Cette règle ne redimensionne pas le texte et ne vérifie pas qu'il peut évoluer. Elle vérifie que le texte reste accessible à l'utilisateur si il est redimensionné ou s'il s'allonge en raison de la localisation.

Exemple d'échec ❌

L'élément contenant est un UIView.

Le texte redimensionné est coupé et cannot be reached by scrolling.

Exemple de succès ✅

L'élément contenant est un UIScrollView.

Le texte redimensionné est coupé, mais can be accessed by using the scroll bars.

En un coup d'œil

• Cette règle a un impact sérieux pour les utilisateurs
• Lorsque les utilisateurs activent des tailles de texte plus grandes, le contenu peut déborder ou être tronqué et devenir inaccessible s'ils ne peuvent pas faire défiler
• Cette règle signale les éléments de texte qui ne sont pas enveloppés dans UIScrollView, ScrollView, ou des conteneurs défilables similaires
• Les en-têtes, le texte principal, les boutons avec des libellés de texte, et les éléments de formulaire ont tous besoin d'un support de défilement

Impact sur les utilisateurs

Les personnes qui utilisent le type dynamique pour faire évoluer les tailles de texte sur iOS sont les plus impactées par les violations de cette règle. Lorsque le type dynamique est activé, le texte peut sortir de l'écran - ou être tronqué - à mesure que la taille augmente, rendant potentiellement les informations indisponibles. Les vues défilables sont un excellent moyen de prendre en charge divers tailles d'écran, garantissant que tout le contenu est accessible.

Confirmer le problème dans ScrollView

1. Si le contenu de la page occupe moins d'un écran, agrandissez tout le texte avec le type dynamique :
   • Si vous utilisez un simulateur :
     1. Ouvrir Inspecteur d'accessibilité
     2. Dans le coin supérieur gauche de l'inspecteur, changez l'appareil de votre Mac au simulateur iOS
     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 de texte
     4. Sélectionnez Texte plus grand
     5. Déplacez le curseur en bas de la page vers un réglage plus grand
2. Essayez de faire défiler jusqu'à l'élément de texte
   • Inaccessible : Une partie du texte disparaît de l'écran et vous ne pouvez pas faire défiler pour l'atteindre
   • Accessible : Tout le contenu reste accessible en faisant défiler, même aux plus grandes tailles de texte

Corriger les problèmes

Pour résoudre les problèmes dans ScrollView, ajoutez UIScrollView ou ScrollView comme conteneur parent pour les éléments de texte de votre application.

UIKit

Ajoutez un UIScrollView comme conteneur parent pour tous les éléments interactifs et statiques de votre écran.

class MyViewController: UIViewController {
    override func viewDidLoad() {
      super.viewDidLoad()
      
      let scrollView = UIScrollView()
      let contentView = UIView()
      
      view.addSubview(scrollView) /* Add the scroll view to the main view first */
      scrollView.addSubview(contentView)  /* Add any content to the scroll view */ 
      
      /* Add your text and buttons to contentView instead of view */
      let label = UILabel()
      label.text = "This content can overflow when resized, so put it inside of a scrollView!"
      label.numberOfLines = 0
      contentView.addSubview(label)
      
      /* Set up basic constraints */
      scrollView.setConstraintsFillParentView()
      contentView.setConstraintsFillParentView()
  }
}

SwiftUI

Ajoutez du texte dans une ScrollView :

     var body: some View {
        ScrollView {
            VStack  {
                HStack {
                    Text("This text can grow, and users can scroll so they can still see all of it!")
                        .padding()
                }
            }
        }
    }

React Native

Nichez des éléments texte 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 lors du défilement.

<SafeAreaView style={{ flex: 1 }}>
   <ScrollView>
     <View>
       <Text> Make sure each screen has a ScrollView so users can access all of your content! </Text>
     </View>
   </ScrollView>
</SafeAreaView>

Flutter

Enveloppez le contenu de l'écran dans un SingleChildScrollView pour que le texte reste accessible lorsque les utilisateurs augmentent leur taille de police préférée.

Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Padding(                                                         
        padding: EdgeInsets.all(12.0),
        child: Column(                                                        
          children: [                                                       
            Text('This text can grow when users increase their font size, and they can scroll to see all of it!'),
          ],                                                                  
        ),
      ),                                                                      
    ),                                                                      
  ),
)

Questions fréquemment posées

Y a-t-il des limitations connues avec cette règle ?\

Oui.

• Cette règle peut signaler soit « Échec » soit « Nécessite une révision » pour les éléments collants/flottants.
• Si le texte fait partie d'un élément fixe à l'écran - un élément qui reste au même endroit même lorsque l'écran est défilé, comme un UINavigationBar ou un UITabBar - utilisez un élément UILargeContentViewer au lieu d'un ScrollView.
• Veuillez noter que notre règle ne peut pas détecter si UILargeContentViewer est implémenté pour ces éléments et signalera toujours une erreur de In ScrollView même si vous avez mis en place une expérience accessible.

Puis-je ignorer cette règle ?

Cette règle a un impact sérieux pour les utilisateurs et vous devriez corriger tous les problèmes identifiés par cette règle, à l'exception des limitations connues listées ci-dessus. Dans ce type de cas, vous pouvez choisir d'ignorer la règle. En savoir plus sur ignorer les règles.

Ressources

Pages de Cours de Deque University

• Critère de Succès 1.4.4 - Redimensionner le texte

  Note : Un abonnement est requis pour avoir un accès complet aux ressources de Deque University.

Autres Ressources

• Lignes Directrices pour l'Accessibilité du Contenu Web 2.2, Comprendre les Documents
  • Comprendre le Critère de Succès 1.4.4 - Redimensionner le texte
• Tutoriel UIScrollView