Points de vue conflictuels
Assurez-vous que les éléments de l'interface utilisateur à l'écran ne se chevauchent pas visuellement
Découvrez comment nous utilisons l'intelligence artificielle pour cette règle !
Ce que nous vérifions
Un(e) vue est tout élément d'interface utilisateur visible à l'écran, tel qu'une étiquette de texte, une image ou un bouton. Les vues contenant des informations ne doivent pas s'intersecter avec une autre vue, ni partiellement ni entièrement. Les vues qui se chevauchent peuvent rendre le contenu illisible ou complètement caché, surtout lorsque la taille du texte augmente avec le type dynamique.
Cette règle impose une pratique recommandée par les Lignes directrices pour l'interface humaine d'Apple. Vous pouvez désactiver cette règle depuis le Tableau de bord mobile ou en ignorer la règle dans les tests écrits pour iOS.
Exemple d'échec ❌
Texte agrandi overlaps another element on screen
Le texte chevauchant l'image devient partiellement ou complètement illisible
Cela peut se produire avec les tailles de texte par défaut, ou apparaître seulement après qu'un utilisateur augmente la taille de son type dynamique dans les paramètres
Exemple réussi ✅
Tous les éléments à l'écran sont spaced so their bounds do not intersect
Le texte est lisible aussi bien avec les tailles par défaut qu'avec les tailles plus grandes de type dynamique
Les contraintes de mise en page appropriées garantissent que les éléments conservent un espacement adéquat même si le texte augmente
En un coup d'œil
- Cette règle a un impact mineur pour les utilisateurs
- Les vues (éléments d'interface utilisateur visibles comme les étiquettes de texte et les images) ne devraient pas se chevaucher
- Le type dynamique peut augmenter la taille du texte lors de l'exécution, provoquant la collision d'éléments auparavant séparés
Impact sur les utilisateurs
Les utilisateurs voyants sont les plus impactés, en particulier ceux qui utilisent des réglages de type dynamique plus grands. Lorsque les vues informatives se chevauchent, le contenu peut devenir partiellement ou complètement illisible. Les utilisateurs qui s'appuient sur des tailles de texte plus grandes sont plus susceptibles de rencontrer ce problème, même si la mise en page semble correcte aux tailles par défaut.
Confirmer le problème des vues conflictuelles
- Examinez les limites de chaque vue informative à l'écran.
- L'un des cas suivants s'applique :
- Inaccessible : Les limites d'une vue s'intersectent avec celles d'une autre vue.
- Accessible : Aucune vue informative n'a de limites qui se chevauchent.
- Si l'écran contient des éléments de texte, augmentez la taille du type dynamique dans les paramètres et répétez la vérification pour confirmer que les vues ne commencent pas à se chevaucher à des tailles plus grandes.
Corriger les problèmes
Les vues conflictuelles sont le plus souvent causées par des contraintes de mise en page manquantes ou insuffisantes qui ne tiennent pas compte du type dynamique. La correction exacte varie en fonction de la mise en page, mais l'objectif est de s'assurer que les éléments informatifs disposent toujours de suffisamment d'espace entre eux.
UIKit
Assurez-vous que les contraintes entre les éléments informatifs voisins fournissent un espacement adéquat. Si aucune contrainte n'existe entre deux éléments qui sont proches, ajoutez-en une pour qu'ils ne puissent pas se chevaucher lorsque le type dynamique augmente leur taille.
SwiftUI
Assurez-vous que chaque vue a des modificateurs de mise en page qui empêchent ses limites de se chevaucher avec celles des vues voisines. Utilisez HStack et VStack comme conteneurs parents pour que le système de mise en page gère automatiquement l'espacement. Évitez d'utiliser ZStack comme parent pour les vues contenant du texte, car cela superpose les éléments les uns sur les autres.
React Native
Assurez-vous que les vues contenant du texte ou d'autres contenus extensibles n'ont pas de maxHeight défini, ce qui pourrait faire que le contenu soit coupé ou poussé dans des éléments adjacents à mesure que la taille du texte augmente. Lorsque vous utilisez la mise en page flexible, envisagez d'ajouter une valeur pour la propriété gap afin de maintenir un espacement cohérent entre les éléments.
Puis-je ignorer cette règle ?
Points de vue conflictuels ont un Impact mineur pour les utilisateurs et appliquent une bonne pratique Apple plutôt qu'une exigence stricte des WCAG. Vous pouvez désactiver complètement cette règle depuis le Tableau de bord mobile, ou ignorer des constats individuels dans vos tests iOS. En savoir plus sur ignorer les règles.
Ressources
- Lignes directrices pour l'interface humaine d'Apple