Introduction
Ce rapport accompagne le relevé d’audit effectué sur l’application « Pétange (iOS) ».
L’évaluation pour les applications mobiles consiste à vérifier l’ensemble des critères de la norme européenne d’accessibilité pour les produits et services EN 301 549 (v3.2.1). La méthodologie de test se base sur le Référentiel d’évaluation de l’accessibilité des applications mobiles (RAAM 1).
L’audit a été réalisé à l’aide des technologies d’assistance disponibles, des tests de restitution avec le lecteur d’écran du système d’exploitation (VoiceOver sur iOS, TalkBack sur Android), ainsi que des tests d’adaptation des contenus en fonction des paramètres d’affichage utilisateurs.
- Version iOS lors de l’audit : 17.5.1
Échantillon
L’audit a été réalisé sur la version de l’application suivante :
- iOS : 8.3.25
L’audit a porté sur les écrans et parcours suivants :
| Nº écran | Titre de l’écran |
|---|---|
| E01 | Accueil |
| E02 | Contact |
| E03 | Politique de confidentialité |
| E04 | Mon profil |
| E05 | Notifications |
| E06 | Menu |
| E07 | News (liste) |
| E08 | News (détail) |
| E09 | Agenda |
| E10 | Déchets |
Accessibilité des parcours audités
L’application présente un niveau général d’accessibilité faible.
Le niveau de conformité au RAAM relevé atteint 44,44 % de conformité sur l’ensemble des écrans audités, avec 50 % de conformité au niveau simple A (A) et 25 % de conformité au niveau double A (AA).
L’application est non conforme.
Conformité RAAM de l’application
| Conforme | Non conforme | |
|---|---|---|
| A | 50 % | 50 % |
| AA (légal) | 44,44 % | 55,56 % |
Note sur le calcul de conformité
La conformité globale (Tableau « Conformité RAAM 1 ») est calculée de la manière suivante : C / (C+NC). C est le nombre de critères conformes et NC le nombre de critères non conformes.
C’est ce nombre qui constitue la référence légale. Il représente le taux de conformité de l’échantillon.
Il est normal que le taux de conformité global diffère sensiblement du taux de conformité par écran. En effet, un critère NC (non conforme) sur un écran rend le critère non conforme sur l’ensemble de l’échantillon.
Pour qu’une application soit conforme (100 % des critères applicables sont conformes au niveau AA), il est nécessaire que le taux de conformité par écran équivaille à 100 %.
Conformité pour chaque niveau
| Conforme | Non conforme | |
|---|---|---|
| A | 50 % | 50 % |
| AA | 25 % | 75 % |
Moyenne par écrans
| Nº écran | Titre d’écran | %C |
|---|---|---|
| E01 | Accueil | 47,62 % |
| E02 | Contact | 72,73 % |
| E03 | Politique de confidentialité | 68,75 % |
| E04 | Mon profil | 62,50 % |
| E05 | Notifications | 70,59 % |
| E06 | Menu | 75 % |
| E07 | News (liste) | 69,23 % |
| E08 | News (détail) | 66,67 % |
| E09 | Agenda | 47,06 % |
| E10 | Déchets | 68,75 % |
Moyenne par thématiques
| Thématiques | C |
|---|---|
| Éléments graphiques | 33,33 % |
| Couleurs | 0 % |
| Multimédia | NA |
| Tableaux | NA |
| Composants interactifs | 20 % |
| Éléments obligatoires | 50 % |
| Structuration | 0 % |
| Présentation | 60 % |
| Formulaires | 50 % |
| Navigation | 50 % |
| Consultation | 100 % |
| Documentation et fonctionnalités d’accessibilité | 100 % |
| Services d’assistance | NA |
| Outils d'édition | NA |
| Communication en temps réel | NA |
Impacts utilisateurs
Les principales personnes impactées sont les personnes aveugles et celles qui naviguent au clavier. Les problèmes liés aux scripts, à l’API ARIA et aux formulaires rendent parfois difficile l’utilisation de l’application par ces utilisateurs.
Droit à la compensation
Les dérogations émises notamment pour charge disproportionnée demandent en contrepartie la mise en place d’un moyen de compensation pour les utilisateurs. Pour les documents bureautiques par exemple, vous devez fournir un moyen à l’utilisateur de demander une version accessible d’un document s’il en a besoin. Cela peut être un mail ou un formulaire de contact.
Note sur le relevé des non-conformités
Ne sont cités dans ce rapport que quelques exemples issus du relevé des non-conformités.
De plus, toutes les occurrences d’une non-conformité ne sont pas listées dans le relevé. Par exemple : pour les contrastes de couleur, le relevé mentionne quelques occurrences, mais ne les cite pas toutes.
Avis
L'application est très complexe à utiliser pour les personnes utilisant un lecteur d'écran et est complètement inutilisable pour les personnes navigant au clavier ou autres apparentées
Les non-conformités les plus bloquantes pour les utilisateurs concernent :
- La navigation impossible au clavier
- La mauvaise ou non-restitution des éléments interactifs
- Les contrastes de couleurs des textes parfois insuffisants
Ce sont donc ces points qui devront nécessiter une attention toute particulière et qui demanderont le plus d’efforts.
Annexe technique
Éléments graphiques
Recommandation
Identifier les éléments graphiques de décoration pour qu’ils soient ignorés par les technologies d’assistance. Donner à chaque élément graphique porteur d’information une alternative textuelle pertinente et une description détaillée si nécessaire. Remplacer les éléments graphiques textes par du texte stylé lorsque c’est possible.
Éléments graphiques de décoration
Un élément graphique de décoration ne contient aucune information indispensable à la compréhension du contenu auquel il est associé. Il est important que ces éléments graphiques ne soient pas restitués aux utilisateurs de technologies d’assistance, par exemple les aveugles avec un lecteur d’écran.
Constats dans l’application
Dans l'en-tête de l'application, on trouve une image de décoration qui n'est pas ignorée des technologies d'assistance et est restituée. Ce qui provoque une vocalisation inutile par les technologies d'assistance.
Éléments graphiques porteurs d’information
Un élément graphique est considéré comme porteur d’information lorsqu’il contient une information indispensable à la compréhension du contenu auquel il est associé. Il est indispensable que ces informations soient restituées, par exemple aux utilisateurs aveugles qui se servent d'un lecteur d’écran.
Constats dans l’application
Dans le parcours de bienvenue, l'image "Pétange motivation commune" est ignorée des technologies d'assistance alors que le texte contenu dans celle-ci n'est pas retrouvé dans le contexte.
Couleurs
Recommandation
Ne pas donner l’information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés pour les textes et les composants d’interface et les éléments graphiques.
Contrastes des textes
Plusieurs couleurs présentent un rapport de contraste insuffisant, ce qui peut poser problème aux grands malvoyants et aux déficients visuels qui ont des difficultés à percevoir les couleurs ou les contrastes.
La norme distingue plusieurs tailles de textes à évaluer, chaque taille relevant d’un seuil de contraste. Ces tailles sont évaluées en pixel ou en point. Plus un texte est grand (supérieur à 18,5px avec effet de graisse ou 24px sans effet de graisse) moins le rapport requis est élevé (3:1).
Compte tenu de la difficulté à évaluer les tailles de polices sur mobile, tous les textes devraient être considérés en taille normale sauf pour des textes significativement très grands.
Les textes des applications doivent tous avoir un rapport de contraste de 4.5:1.
Vous pouvez foncer les couleurs pour obtenir le rapport de contraste exigé.
Constats dans l’application
Dans le système de navigation présent en bas des écrans, la couleur grise #E9E9E9 des icônes des écrans inactifs n'est pas assez contrastée avec la couleur de fond blanche #FFFFFF (ratio : 2,7 au lieu de 3).
Contraste des composants d’interface
Les composants d’interface, les illustrations porteuses d’information ou encore les mises en couleurs porteuses d’information doivent être suffisamment contrastés pour être perçus par les utilisateurs ayant des troubles de perception des couleurs. Par exemple, une icône porteuse d’information devra avoir un rapport de contraste avec la couleur de fond de 3. De même, pour un champ de saisie de formulaire, dont la zone active est matérialisée par sa bordure, alors la couleur de cette bordure devra avoir un rapport de contraste de 3 avec la couleur de fond de l’écran.
Constats dans l’application
Sur l'écran d'accueil, on trouve des textes gris #7D7D7D sur fond blanc #FEFFFE qui ont un contraste insuffisant (ratio : 4,1 au lieu de 4,5) et qui ne peuvent être perçu par toutes les personnes utilisant l'application.
Information par la couleur
Lorsqu’une information est donnée par la couleur, il faut qu’elle soit également véhiculée par une autre méthode, par exemple par un texte qui donne la même information, pour être perçue par les utilisateurs aveugles.
Il faut également donner un indice visuel autre que la couleur, afin de répondre aux besoins des personnes déficientes visuelles (les daltoniens par exemple). Il peut s’agir d’un symbole, d’une texture, de chiffres.
Constats dans l’application
Sur l'écran d'accueil, on trouve des carrousels qui contiennent des puces indiquant l'élément actif. Cette information n'est donnée que par la couleur. Il y a une perte d'information pour les personnes navigant avec un lecteur d'écran notamment.
Composants interactifs
Recommandation :
Donner si nécessaire à chaque composant interactif une alternative pertinente. Rendre possible le contrôle de chaque composant interactif au moins par le clavier et la souris et s’assurer de leur compatibilité avec les technologies d’assistance. Identifier les messages de statut lorsque c’est nécessaire.
Rôle inapproprié ou non défini
Pour les aveugles et les grands malvoyants qui utilisent un lecteur d’écran, ce manque de distinction claire sur la nature des composants interactifs peut poser de graves problèmes.
En effet, le rôle du composant est annoncé par le lecteur d’écran, ce qui fournit une information contextuelle importante pour l’utilisateur qui peut déduire certaines actions possibles et s’attendre à certains événements.
Enfin, chaque composant interactif doit avoir un nom accessible défini par l’intermédiaire d’un texte (visible ou non) accessible aux technologies d’assistance).
Constats dans l’application
-
Les éléments interactifs du menu de navigation principal n'ont ni rôle, ni nom accessible présent qui puisse être restitué par les technologies d'assistance.
-
Les carrousels de l'écran d'accueil ne sont pas restitués par les technologies d'assistance, notamment les puces de navigation qui n'ont ni rôle ni nom accessible.
-
Sur l'écran "Déchets", les liens renvoyant vers des pages web externes à l'application sont restitués comme étant des boutons. Ce qui pose des soucis notamment aux personnes navigant avec un lecteur d'écran qui ne peuvent anticiper leur comportement lors de l'activation.
Clavier et dispositifs de pointage
Tous les éléments interactifs doivent être utilisables (atteignables et activables) par différents systèmes de pointage, par exemple : au toucher, avec un clavier externe (raccordement d’un clavier externe bluetooth ou USB et navigation avec les touches tabulation et flèches de direction), à la voix (VoiceControl sur iOS, Voice Access sur Android).
Constats dans l’application
Il n'est pas possible de naviguer dans l'ensemble de l'application à l'aide du clavier
Message de statut
Les messages de statut concernent les messages d’alerte, de confirmation ou d’historisation. Dans tous ces cas, certains utilisateurs, par exemple les personnes aveugles ou les utilisateurs de loupes d’écrans vocalisées, risquent de ne pas prendre connaissance de ces messages si leur restitution n’est pas contrôlée.
Constats dans l’application
Lors de la réception d'une nouvelle notification, l'information n'est pas vocalisée par les technologies d'assistance. Il y a une perte d'information pour les personnes malvoyantes ou aveugles.
Changement de contexte
Un changement de contexte est une situation où un utilisateur ne peut pas anticiper le fonctionnement d’une fonctionnalité lorsque celle-ci ouvre une nouvelle application, valide un formulaire ou ajoute ou modifie du contenu dans l’écran par exemple.
Cela concerne plus spécifiquement les fonctionnalités qui se lancent sans que l’utilisateur puisse les anticiper comme, par exemple, la soumission automatique d’un champ de formulaire sur la sélection d’un item ou lorsque l’utilisateur quitte un champ de saisie.
Constats dans l’application
Dans le parcours de bienvenue, lors du passage d'un écran au suivant, le focus n'est pas replacé correctement en haut de l'écran mais reste sur le bouton permettant d'accéder à l'écran suivant. Ce qui va poser des problèmes d'accès à l'information pour les personnes navigant avec un lecteur d'écran qui peuvent ignorer la présence de texte avant ces boutons.
Éléments obligatoires
Recommandation
Vérifier que chaque écran a une indication de langue par défaut.
Indication de langue
Les lecteurs d’écran utilisent l’indication de langue principale pour vocaliser correctement le contenu. L’application doit avoir déclaré la langue de traitement principal afin qu’elle soit vocalisée correctement par les lecteurs d’écran.
Constats dans l’application
Dans la section "Agenda" lorsque l'on navigue dans la vue en grille avec un lecteur d'écran, les dates notamment les jours de la semaine et les mois sont vocalisés en anglais.
Structuration de l’information
Recommandation
Utiliser des titres, des listes.
Titres
Le titrage des contenus est une étape importante dans la structuration de ces contenus. Cela répond à deux besoins :
- identifier rapidement un contenu recherché ;
- naviguer rapidement dans le contenu en se déplaçant de titre en titre.
Un titrage correct fournit à l’utilisateur d’un lecteur d’écran un plan du document et lui permet de naviguer de titre en titre pour se déplacer plus rapidement dans le contenu.
Constats dans l’application
Dans la section "Politique de confidentialité", les textes numérotés et traités visuellement comme des titres ne sont pas structurés comme tels. Ce qui va poser des soucis de compréhension de la structure de la page et de navigation pour les personnes utilisant un lecteur d'écran.
Listes
La structuration en listes permet aux utilisateurs de lecteurs d’écran de consulter plus rapidement le contenu, grâce à des raccourcis spécifiques. Elle permet également dans le cas d’une succession de liens de distinguer clairement chaque lien.
Constats dans l’application
Dans la section "Contact" de l'application, les listes d'horaires et des services administratifs ne sont pas restitués comme des listes d'élément.
Présentation de l’information
Recommandation
Vérifier la prise en charge des paramètres de taille de police et l’effet de l’agrandissement des tailles des caractères sur la lisibilité. S’assurer que les composants sont correctement identifiables. S’assurer que l’information n’est pas donnée uniquement par la forme ou la position d’un élément.
Agrandissement des textes
Certaines personnes déficientes visuelles, également des personnes ayant des difficultés de lecture comme les personnes dyslexiques, ont besoin d’adapter la taille du texte à l’écran.
L’agrandissement des caractères ne doit pas provoquer de perte d’informations. À 200%, le contenu doit rester lisible et compréhensible, toutes les informations doivent rester présentes.
L’utilisateur spécifie la taille des caractères au niveau de la plateforme, en utilisant les paramètres de présentation système.
Constats dans l’application
Dans la section "News", lors de l'utilisation des fonctions d'agrandissement des textes du système, les contenus sont tronqués et ne sont plus lisibles.
Information donnée par la forme, la taille ou la position
Les utilisateurs qui ne perçoivent pas la mise en forme (utilisateurs aveugles par exemple) n’auront pas accès aux informations véhiculées par la mise en forme la taille (taille du texte pour signifier un degré d’importance par exemple), ou la position (une consigne indiquant de cliquer en haut à droite par exemple). Il est nécessaire de fournir un équivalent textuel qui permette d’offrir la même information aux utilisateurs aveugles.
Constats dans l’application
Dans le menu de navigation principal, l'indication d'écran actif est donnée par un changement de couleur mais également par un changement de forme avec la présence d'une barre rouge au dessus de l'icône concernée. Mais cette information n'est pas disponible pour les technologies d'assistance telles que les lecteurs d'écran.
Formulaires
Recommandation :
Associer pour chaque formulaire chacun de ses champs à son étiquette, grouper les champs dans des blocs d’informations de même nature, donner à chaque bouton un intitulé explicite. Vérifier la présence d’aide à la saisie, s’assurer que le contrôle de saisie est accessible et que l’utilisateur peut contrôler les données à caractère financier, juridique ou personnel.
Étiquettes et champs
Les champs de formulaires doivent tous posséder des étiquettes correctement reliées.
Une étiquette de champ est un texte situé à proximité du champ de formulaire qui permet de connaître la nature, le type ou le format des informations attendues.
De cette manière, lorsqu’un utilisateur entre dans le champ de saisie avec un lecteur d’écran, le lecteur d’écran lit le contenu de l’étiquette. L’utilisateur comprend alors ce qu’il doit saisir.
Sans cela, même si une étiquette est présente visuellement, l’utilisateur entendra « champ de saisie vide » en entrant dans le champ et ne saura donc pas quoi saisir.
Constats dans l’application
Dans le formulaire d'édition de profil, l'ensemble des champs ne sont pas reliés correctement avec leur étiquette empêchant leur restitution par les technologies d'assistance.
Contrôle de saisie et aide à la saisie
Tous les champs obligatoires doivent être identifiés préalablement à toute validation de l’utilisateur.
Pour les champs qui attendent un format de saisie particulier pour être validés, ce format doit être spécifié à l’utilisateur par un passage de texte visible à proximité du champ. De plus, si l’utilisateur commet une erreur sur ce champ, alors le message d’erreur doit présenter un exemple réel de saisie.
Enfin, les messages d’erreur de saisie des champs de formulaire doivent être liés correctement aux champs en erreur.
Constats dans l’application
Dans le formulaire d'édition de profil, un format particulier de saisie est attendu pour le champ "e-mail", mais aucune indication de format attendu n'est présente. De plus le message d'erreur n'est lié correctement à ce champ et ne contient pas d'exemple réel de saisie.
Indication de la nature des saisies
La saisie d’un formulaire peut être particulièrement laborieuse et nécessiter des charges de travail considérables pour certains utilisateurs qui vont utiliser des technologies d’assistance très complexes ou qui ne sont pas capables de comprendre les types de données attendues.
Identifier les champs de saisie pour permettre leur remplissage automatique est bénéfique pour certains utilisateurs.
Ces indications peuvent être utilisées par la plateforme pour proposer des fonctionnalités de remplissage automatique des champs ainsi identifiés et également pour disposer des contrôles adéquats pour remplir les champs (clavier numérique par exemple). Ce dispositif peut être d’une aide considérable pour les utilisateurs. Cela concerne plus spécifiquement les données à caractère personnel.
Constats dans l’application
Aucun champ de saisie concernant les informations personnelles de l'utilisateur n'est identifié afin de permettre son remplissage automatique par des technologies d'assistance.
Navigation
Recommandation :
S’assurer que l’ordre de tabulation est cohérent et que l’écran ne comporte pas de piège au clavier. S’assurer que les raccourcis clavier qui utilisent une seule touche sont contrôlables par l’utilisateur.
Ordre de restitution
L’ordre d’accès aux composants d’interface par le lecteur d’écran peut être différent de l’ordre de navigation à l’aide d’un clavier externe (sans utilisation d’un clavier), bien que parfois, les deux partagent les mêmes comportements.
Constats dans l’application
L'accès à la fenêtre modale contenant le formulaire d'édition de profil se fait par la fin de celle-ci ce qui peut porter à confusion pour les personnes utilisant un lecteur d'écran.