Utiliser Ios Accessibility Inspector pour améliorer la convivialité des applications

Présentation

La création d'applications iOS accessibles n'est pas seulement une bonne pratique, mais une condition fondamentale pour atteindre le plus grand nombre possible d'utilisateurs. Plus d'un milliard de personnes vivent avec une certaine forme de handicap dans le monde, et beaucoup d'entre elles comptent sur des technologies d'assistance telles que VoiceOver, Switch Control et Dynamic Type pour interagir avec des applications mobiles. L'inspecteur d'accessibilité iOS, intégré directement dans Xcode, offre aux développeurs un moyen systématique d'auditer leurs applications pour les problèmes d'accessibilité au début du processus de développement.

Qu'est-ce que l'inspecteur d'accessibilité iOS?

L'Inspecteur d'accessibilité iOS est un outil de test qui expédie avec Xcode, Apple , environnement de développement intégré. Il fournit une interface graphique en temps réel pour examiner les propriétés d'accessibilité de chaque élément d'interface utilisateur dans votre application. Contrairement aux outils de doublage automatisés qui vérifient le code des étiquettes manquantes, l'Inspecteur d'accessibilité vous permet d'interagir avec votre application en direct sur un appareil ou un simulateur tout en inspectant comment les technologies d'assistance comme VoiceOver perçoivent chaque élément.

L'inspecteur utilise des attributs critiques tels que l'étiquette d'accessibilité, le trait, l'indice, la valeur et le cadre. Il indique également si un élément est focalisé par VoiceOver, s'il supporte plusieurs éléments d'accessibilité et s'il est correctement configuré pour la navigation de contrôle de commutation. De plus, l'outil comprend une fonction Audit qui scanne votre écran actuel pour détecter des violations d'accessibilité courantes, comme un contraste insuffisant, des étiquettes manquantes ou des images non marquées.

Apple met continuellement à jour l'inspecteur pour prendre en charge les nouvelles fonctionnalités d'accessibilité iOS, y compris Dynamic Type, réduction du mouvement et préférences en gras. En intégrant l'inspecteur dans votre flux de travail régulier, vous assurez que votre application reste compatible avec les dernières technologies d'assistance et respecte les normes d'accessibilité en évolution comme les Lignes directrices pour l'accessibilité du contenu Web (WCAG) 2.1.

Comment mettre en place et lancer l'inspecteur de l'accessibilité

Pour commencer avec l'inspecteur de l'accessibilité, il faut une machine macOS avec Xcode installée. Suivez ces étapes pour lancer l'outil et préparer les tests :

Ouvrez votre projet dans Xcode et construisez-le sur un appareil iOS ou un simulateur connecté. L'inspecteur fonctionne mieux sur un appareil physique, mais le simulateur fournit une approximation étroite.
Naviguez vers Xcode > Open Developer Tool > Accessibility Inspector. Vous pouvez aussi utiliser le raccourci Cmd + F6 si vous l'avez assigné.
Dans la fenêtre de l'inspecteur d'accessibilité, sélectionnez votre appareil cible ou simulateur dans le menu déroulant de la barre d'outils supérieure. L'inspecteur se connecte automatiquement.
Une fois connecté, vous verrez l'interface principale de l'inspecteur : un instantané en direct (ou une vue en direct) de votre écran d'applications à gauche, et un inspecteur de propriété détaillé à droite.

L'inspecteur fonctionne comme une application autonome, ce qui signifie que vous pouvez la garder ouverte aux côtés de Xcode et de votre application. Lorsque vous naviguez à travers différents écrans, l'inspecteur se met à jour en temps réel, montrant la hiérarchie d'accessibilité de la vue courante. Vous pouvez cliquer sur n'importe quel élément de la vue en direct pour afficher ses propriétés d'accessibilité.

Simulation des paramètres d'accessibilité

Un aspect crucial de l'inspecteur est sa capacité à simuler divers paramètres d'accessibilité que les utilisateurs peuvent activer sur leurs appareils. Cliquez sur l'icône par défaut dans la barre d'outils pour basculer sur VoiceOver, augmenter la contraste, réduire le mouvement, les étiquettes d'ouverture/arrêt, les formes de boutons, etc. Cela vous permet de voir exactement comment votre application s'adapte – ou ne s'adapte pas – à chaque réglage. Par exemple, activer VoiceOver dans le simulateur mettra visuellement en évidence l'élément ciblé et lira son étiquette; vous pouvez vérifier que le texte parlé correspond au contenu à l'écran et que le flux de navigation est logique.

Caractéristiques essentielles de l'inspecteur de l'accessibilité

L'inspecteur est plus qu'un visualisateur de propriété. Il offre plusieurs fonctionnalités distinctes qui vous aident à améliorer systématiquement votre application accessibilité.

1. Inspecteur des éléments

L'inspecteur d'éléments affiche toutes les propriétés d'accessibilité pour l'élément UI actuellement sélectionné. Les champs clés comprennent :

Label: Une courte chaîne descriptive lue par VoiceOver. Doit correspondre à l'étiquette visible lorsque c'est possible.
Valeur: L'état actuel d'un contrôle (p. ex., -50% de , pour un curseur de volume).
Traitement: Décrit le comportement de l'élément (par exemple, -Button, -Header, -Header, -Header Adjustable, -Chercher Field).
Conseil: Instructions supplémentaires (p. ex., --Double-tap pour ouvrir le menu). Utilisez des conseils parcimonieusement; comptez d'abord sur des étiquettes et des traits clairs.
Frame: Le rectangle de l'élément, qui vous aide à vérifier les cibles tactiles sont assez grands (au moins 44×44 points).
Accessibilité activée[ : Indique si l'élément peut être ciblé par des technologies d'assistance.

L'inspecteur met également en évidence des éléments mal configurés[ avec des badges rouges. Par exemple, une image sans étiquette accessible montrera -Label de visite.

2. Vérification des comptes

La fonction d'audit effectue une analyse statique de l'écran actuel et énumère toutes les violations d'accessibilité détectées.

Étiquettes manquantes ou non descriptives sur les images et les boutons.
Contraste de couleur insuffisant entre le texte et l'arrière-plan.
Éléments trop petits pour pouvoir être tapé confortablement.
Caractères d'accessibilité non pris en charge.
Éléments qui sont mal marqués comme éléments d'accessibilité ou qui sont cachés des technologies d'assistance.

Chaque numéro comprend un niveau de gravité (Info, Avertissement ou Erreur) et un lien vers l'élément pertinent. En exécutant une vérification après chaque changement majeur d'assurance-chômage, vous prenez des régressions rapidement.

3. Simulation de paramètres

Nous avons abordé ce sujet plus tôt, mais il mérite une mention dédiée. Le panneau Paramètres vous permet de basculer:

VoiceOver – simule la navigation des lecteurs d'écran.
Switch Control – met en évidence l'ordre des balayages et les zones de sélection.
Augmentation du contraste[ – teste la lisibilité avec une transparence réduite.
Reduce Motion – désactive la parallaxe et les animations.
Les étiquettes en marche/arrêt – assure l'affichage du texte aux commandes de commutation aux côtés de la couleur.
Formes de bouton – souligne les boutons de texte pour les rendre plus visibles.
Texte gras – teste la robustesse de la disposition avec des polices plus lourdes.

Passage pratique : Test d'un écran d'échantillonnage

Let , suppose que vous avez un écran de connexion avec un champ de texte d'utilisateur, un champ de texte de mot de passe, un bouton -Sign In et un lien -- Forgot Password ? - , ici comment utiliser l'inspecteur pour vérifier l'accessibilité :

Lancez l'application dans le simulateur et ouvrez l'écran de connexion.
Ouvrez l'inspecteur d'accessibilité et sélectionnez votre simulateur.
Cliquez sur le champ texte du nom d'utilisateur dans la vue en direct. L'inspecteur doit afficher son étiquette comme -Nom d'utilisateur. - Si l'étiquette est manquante ou dit autre chose (par exemple, -Champ texte), vous devez définir le dans Interface Builder ou dans le code.
Pour un champ texte, le caractère doit être Chercher le champ ou simplement laissé par défaut. Pour le bouton Sign In, le caractère doit être Button.
Sélectionnez le lien ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Exécutez la vérification en cliquant sur le bouton Audit[ (icône de coche). L'inspecteur scannera l'écran et signalera les problèmes. Les constatations courantes comprennent des étiquettes manquantes sur les icônes ou un contraste insuffisant pour le texte du détenteur de place.
Réparez les problèmes de votre code, recompilez et revérifiez jusqu'à ce que l'écran passe avec zéro erreur.
Enfin, activez les paramètres de VoiceOver dans l'inspecteur et naviguez à travers l'écran en utilisant le clavier (onglet pour se concentrer, espace pour activer). Vérifiez que VoiceOver lit les champs dans un ordre logique et que les conseils, s'il y en a, sont utiles.

Questions communes d'accessibilité et comment les résoudre

Grâce à l'utilisation constante de l'inspecteur de l'accessibilité, vous rencontrerez des modèles récurrents. Ci-dessous sont quelques-unes des questions les plus courantes et leurs remèdes.

Étiquettes manquantes ou trompeuses

Les images, les boutons et les commandes personnalisées manquent souvent d'étiquette descriptive. Toujours définir sur les éléments interactifs. Pour les images décoratives, les marquer comme ou décocher -Accessibilité Activé - dans Interface Builder. Pour les images non décoratives, l'étiquette doit transmettre le but, et non pas seulement le nom du fichier.

Mauvais caractères

Si un bouton n'a pas le caractère Button[, VoiceOver ne peut pas l'annoncer comme tapable. De même, une rangée de table devrait avoir le caractère Button[ ou Statical Text[ selon que le tapotage effectué une action. Utilisez l'inspecteur pour confirmer tous les éléments interactifs portent le trait correct. Pour les curseurs, utilisez Adjustable[ et implémentez et ou . La fonction de vérification affiche spécifiquement les cibles en dessous de la taille recommandée.

Mauvais contraste de couleur

L'inspecteur , Audit peut détecter un contraste insuffisant entre le texte et le fond. Cependant, il s'appuie sur le calcul du rapport de contraste défini dans WCAG 2.1. Pour le texte inférieur à 18 points, le rapport de contraste minimal est de 4.5:1; pour le texte plus grand, 3:1 est acceptable. Utilisez l'inspecteur , avertissement de contraste comme guide, puis ajuster vos couleurs en conséquence.

La hiérarchie des éléments de l'inspecteur indique l'ordre dans lequel VoiceOver passe à travers les éléments. Assurez-vous que l'ordre suit la disposition visuelle (de gauche à droite, de haut à bas). Si l'ordre est incorrect, ajustez le tableau ou modifiez les éléments pour guider VoiceOver. Vous pouvez également définir sur les vues des conteneurs pour améliorer la navigation.

Intégrer les tests d'accessibilité à votre flux de travail

L'utilisation manuelle de l'inspecteur de l'accessibilité est efficace, mais pour obtenir une qualité uniforme, vous devriez intégrer les vérifications d'accessibilité dans votre pipeline de développement.

Tests humains

Les outils automatisés ne peuvent pas reproduire l'expérience nuancée d'un utilisateur réel. Planifiez des sessions périodiques où les membres de l'équipe avec ou sans déficience testent l'application en utilisant VoiceOver, Switch Control et d'autres technologies d'assistance. L'inspecteur de l'accessibilité vous aide à vous préparer à ces séances en faisant face aux problèmes évidents en premier.

Essais automatisés avec XCTest et XCUITest

La fonction Audit Accessibility Inspector , peut être invoquée programmatiquement dans vos tests d'interface utilisateur. Apple fournit le (dans les API privées), mais vous pouvez également utiliser XCUITest pour interroger les éléments d'accessibilité et affirmer leurs propriétés.

let button = app.buttons["Sign In"]
XCTAssertTrue(button.exists)
XCTAssertEqual(button.label, "Sign In")

Cela garantit que l'étiquette d'accessibilité est correctement définie entre les constructions. Combinez ces assertions avec des tests de régression visuelle pour maintenir des normes élevées.

Intégration CI/CD

Vous pouvez exécuter l'Inspecteur d'accessibilité , Audit dans le cadre d'un outil en ligne de commande en utilisant la sous-commande dans (disponible dans Xcode 14+). Ajoutez une étape dans votre script Intégration continue qui échoue à la compilation si les erreurs d'audit dépassent un seuil. Par exemple :

xcodebuild -project MyApp.xcodeproj -scheme MyApp -destination 'name=iPhone 14' test-without-building accessibility:audit

Cela maintient la qualité d'accessibilité fermée avant de fusionner les demandes de tirage.

Au-delà de l'inspecteur: outils complémentaires

L'inspecteur de l'accessibilité est votre principal outil, mais il fonctionne mieux avec les autres :

VoiceOver gestual simulateur – pratiquez des rotations à deux doigts et des robinets à trois doigts.
Xcode Accessibility Verifier (déprécié) – remplacé par l'inspecteur .
Analyseur de contraste de couleur – une application macOS autonome pour vérifier plus précisément les rapports de contraste.
Aperçu du type dynamique – accessible via Xcode=2 Environnement Excédents pour tester toutes les tailles de texte.

Apples La documentation d'accessibilité[ fournit des guides détaillés et un code d'exemple. De plus, les lignes directrices WCAG 2.1 offrent un cadre complet pour l'accessibilité numérique qui s'applique également aux applications mobiles.

Avantages de faire de l'accessibilité une priorité

Investir dans l'accessibilité permet de produire des rendements directs pour les utilisateurs et votre entreprise :

Base d'utilisateurs élargie: Environ 15 % de la population mondiale connaît une forme quelconque de handicap.
Amélioration de la facilité d'utilisation pour tout le monde[: Des caractéristiques comme des étiquettes claires, de grandes cibles de robinetterie et un bon contraste profitent à tous les utilisateurs, en particulier dans des contextes difficiles comme la lumière du soleil ou l'utilisation à la main.
Conformité juridique[: De nombreux pays ont adopté des lois exigeant l'accessibilité numérique (par exemple, la loi américaine sur les personnes handicapées, la loi européenne sur l'accessibilité).
Better App Store Commentaires: Les utilisateurs qui comptent sur les technologies d'assistance sont vocaux au sujet des applications qui fonctionnent—ou ne font pas.
Efficacité du développement[: La correction des problèmes d'accessibilité pendant le développement est exponentiellement moins coûteuse que leur modernisation après le lancement.

Conclusion

L'inspecteur d'accessibilité iOS est un outil puissant mais sous-utilisé que chaque développeur iOS devrait intégrer dans son flux de travail quotidien. En utilisant l'inspecteur d'éléments, en exécutant des audits réguliers et en simulant les paramètres de la technologie d'assistance, vous pouvez identifier et résoudre les obstacles qui empêchent des millions d'utilisateurs de s'engager pleinement avec votre application. L'accessibilité n'est pas une liste de contrôle à remplir avant la publication – c'est un engagement continu à l'inclusion et à la qualité.