Introduction

Ce rapport accompagne le relevé d’audit effectué sur l’application «CityMap VDL.LU».Il a été mis à jour à la suite de la réunion de restitution de l’audit pour tenir compte des retours techniques et corrections apportées.

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.

Échantillon

L’audit a été réalisé sur la version de l’application suivante :

L’audit a porté sur les écrans et parcours suivants :

Échantillon de l’audit
Nº écran Titre de l’écran
E01 Accueil
E02 Mentions légales (webview)
E03 Parcours 1: Contact 1/2 (demander)
E04 Parcours 1: Contact 2/2 (formulaire)
E05 Parcours 2 : Point d'intérêt 1/2 (choix commerce)
E06 Parcours 2 : Point d'intérêt 2/2 (informations commerce)
E07 Parcours 3 : Mobilité 1/2 (choix arrêt de bus)
E08 Parcours 3 : Mobilité 2/2 (informations arrêt de bus)
E09 Parcours 4 : Service - Calendrier des déchets 1/2 (choix adresse)
E10 Parcours 4 : Service - Calendrier des déchets 2/2 (informations)

Accessibilité des parcours audités

L’application présente un niveau général d’accessibilité moyen.

Le niveau de conformité au RAAM relevé atteint 59,09 % de conformité sur l’ensemble des écrans audités (précédemment 31,82%), avec 65,71 % de conformité au niveau simple A (A) et 33,33 % de conformité au niveau double A (AA). (Contre 34,29 % et 22,22% précédemment).

L’application est non conforme.

Conformité RAAM de l’application

Conformité RAAM
Conforme Non conforme
59,09 % 40,91 %

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

Conformité pour chaque niveau
Conforme Non conforme
A 65,71 % 34,29 %
AA 33,33 % 66,67 %

Moyenne par écrans

Nº écran Titre d’écran %C
E01 Accueil 75 %
E02 Mentions légales (webview) 58,33 %
E03 Parcours 1: Contact 1/2 (demander) 75 %
E04 Parcours 1: Contact 2/2 (formulaire) 78,13 %
E05 Parcours 2 : Point d'intérêt 1/2 (choix commerce) 71,43 %
E06 Parcours 2 : Point d'intérêt 2/2 (informatiosn commerce) 75 %
E07 Parcours 3 : Mobilité 1/2 (choix arrêt de bus) 76,19%
E08 Parcours 3 : Mobilité 2/2 (informations arrêt de bus) 80 %
E09 Parcours 4 : Service - Calendrier des déchets 1/2 (choix adresse) 80,95 %
E10 Parcours 4 : Service - Calendrier des déchets 2/2 (informations) 73,68 %

Moyenne par thématiques

Thématiques C
Éléments graphiques 66,67 %
Couleurs 66,67 %
Multimédia NA
Tableaux NA
Composants interactifs 60 %
Éléments obligatoires 100 %
Structuration 50 %
Présentation 71,43 %
Formulaires 50 %
Navigation 66,67 %
Consultation 50 %
Documentation et fonctionnalités d’accessibilité 33,33 %
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.

Contenus dérogés

La dérogation est un moyen d’exclure du champ d’application du référentiel des contenus particuliers. Les cas de dérogations sont très encadrés, vous en trouverez le détail dans le guide des dérogations.

Dérogations pour charge disproportionnée

La correction des critère 8.2 concernant l’utilisation de fonctions d’agrandissement et critère 11.9 concernant l’orientation de l’écran sont dérogés pour charge disproportionnée. La correction de ces critères entraine une charge trop importante pour la version actuelle de l’application. Ceux-ci seront corrigés lors de la prochaine refonte majeure de l’application.

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 non conformités concernant les contrastes de textes et éléments graphiques, le relevé mentionne quelques occurrences, mais ne les cite pas toutes.

Avis

L'application a un niveau d'accessibilité moyen

Les non-conformités les plus bloquantes pour les utilisateurs concernent :

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

Sur l'écran de détail d'un commerce, on trouve des éléments graphiques de décoration qui ne sont pas ignorés par les technologies d'assistance. Par exemple dans la section "adresse", l'icône "localisation" ou l'icône "flèche vers la droite" dans la section "Labels"

É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

Sur l'écran de détail d'un commerce, dans la section "Parkings à proximité" on trouve une indication d'affluence qui est donnée par une icône de flèche qui change entemps réel. Mais cette icône de flèche a une alternative en anglais qui n'est pas pertinente. Par exemple, lorsque l'affluence est en baisse, l'interface affiche une flèche pointant vers le bas dont l'alternative est "arrow down". Ce qui poser poser des problèmes de compréhension de l'information

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

De très nombreux contrastes de texte sont insuffisant dans l'application et l'utilisation de la fonctionnalité de "Contrastes renforcés" du système ne permet pas de rendre ces contrastes conformes.

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 la page d'accueil, les éléments interractifs "Paramètres" (rouage) et "Aller vers la carte (flèche vers le bas) ont une icône blanche #FFFFFF sur fonf gris #9B9DAA (ratio : 2,7 au lieu de 3)".

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 la page "Choix d'un commerce", la puce indiquant l'état "ouvert" ou "fermé" n'est donné que par la couleur, l'information n'est pas restituée par les technologies d'assistance.

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

Dans la section "Services", dans la section "Besoin d'aide ?", les trois éléments interractifs "Signaler", "suggérer" et "demander" n'ont pas de rôle restitué permettant de comprendre que ces éléments sont interactifs

Intitulé absent ou non pertinent

Pour chaque composant interactif, deux éléments sont à prendre en compte :

Le nom accessible est le nom effectivement restitué par les technologies d’assistance comme le lecteur d’écran. Ce nom accessible est différent du nom visible dans les cas où l’application emploie certaines propriétés (comme les propriétés de nommage d’accessibilité des plateformes, dont le contenu n’est pas visible, mais est restitué par les lecteurs d’écran).

Constats dans l’application

Dans le carrousel de l'écran d'accueil, les liens vers les différents éléments ont un nom accessible qui ne reprend pas tout le texte visible, notamment la catégorie par exemple "Politique et administration" ou "Sport et loisirs"

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

Dans le formulaire de contact, il n'est pas possible d'atteindre et d'activer le champ de saisie "Décrivez votre demande."

Lecteur d’écran

Les composants interactifs doivent tous être accessibles au lecteur d’écran. Sous iOS il s’agit de VoiceOver.

Certains composants des interfaces de l’application ne sont pas atteignables avec le lecteur d’écran et d’autres sont atteignables, mais pas activables.

Constats dans l’application

Dans le formulaire de contact, le champ de saisie "Décrivez votre demande" n'a pas de role restitué et n'est pas activable à l'aide du lecteur d'écran

État des composants interactifs

Certains composants peuvent avoir un état, visuellement perceptible, mais non accessible aux utilisateurs aveugles. Par exemple, un bouton sélectionné/non sélectionné, ou un accordéon déplié/replié.

Constats dans l’application

Dans le détail d'un commerce, on trouve des composants "Lire plus" qui affichent et masquent des zones de contenus dont l'état n'est pas restitué par les technologies d'assistance et dont le positionnement après le contenu dévoilé, pose problème pour les personnes qui utilisent un lecteur d'écran

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

Sur le formulaire de contact le message de succès après la validation du formulaire n'est pas restitué par les technologies d'assistance.

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 présent au premier lancement de l'application, lors du passage d'un écran au suivant, le focus n'est pas replacé en haut de l'écran suivant, mais reste sur le bouton "Continuer"

Éléments obligatoires

Recommandation

Vérifier que dans chaque écran les éléments de l’interface ne doivent pas être utilisés uniquement à des fins de présentation.

Balises utilisées à des fins de présentation

Les éléments de structure ont chacun une sémantique particulière (paragraphe, titre, image, lien, etc.). Si les éléments sont mal employés (détournés de leur utilité première), cela peut poser des problèmes aux utilisateurs qui naviguent à l'aide d'une technologie d'assistance (lecteur d'écran, plug-in…). En effet, les technologies d'assistance disposent de raccourcis permettant de naviguer rapidement entre certains types d'éléments (paragraphes, titres, listes, etc.). Si ces éléments sont mal employés, les utilisateurs ne peuvent pas utiliser ces fonctionnalités de repère et de navigation dans le contenu.

Constats dans l’application

Dans la section "Heures d'ouvertures" on trouve des paragraphes vides utiliés à des fins de présentation.

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 :

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

Sur l'écran de détail d'un commerce, les textes "Fischer Centre Hospitalier" (nom du commerce), "adresse", "heures d'ouverture", "Description", "Services", "Modes de paiement", "Labels", "Descendre à l'arrêt", "Garer son vel'OH" et "Parkings à proximité" devraient être implémentés comme étant des titres.

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 les systèmes de filtres, les listes d'éléments ne sont pas structurées en liste et pas restituées comme telles par les technologies d'assistance.

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.

Contenus visibles non accessibles

Certains textes des écrans visibles ne sont pas accessibles aux technologies d’assistance.

Constats dans l’application

Sur la page de détails d'un arrêt de bus, le texte présent sous le nom de l'arrêt "103.3km - Arrêt" n'est pas vocalisé par le lecteur d'écran

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

Sur l'ensemble du site, l'utilisation de l'agrandissement des textes déclenche bien l'agrandissement des textes de l'application mais ceux-ci se retrouvent tronqués et illisibles.

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

Sur l'écran d'accueil, le champ de recherche "Moien, comment peut-on vous aider ?" n'a pas d'étiquette visible (celle-ci disparait lors de l'édition du champ)

Étiquettes et champs accolés

Chaque étiquette et le champ qu’elle contrôle doivent être accolés. En effet, si l’étiquette et son champ sont trop éloignés, les utilisateurs malvoyants qui utilisent une loupe d’écran peuvent échouer à faire correspondre l’étiquette et son champ, et donc ne pas saisir les données attendues dans les bons champs.

Constats dans l’application

Les cases à cocher, dans les filtres de "Commerces" ne sont pas accolées à leur intitulé.

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

Sur le formulaire de contact, les champs obligatoires ne sont pas identifiés, les champs de saisie "Adresse email" et "Téléphone" attendent des format particuliers qui ne sont pas précisés et les messages d'erreur ne contiennent pas d'exemple de saisie réel.

Consultation

Recommandation

Vérifier que l’utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques de luminosité et des contenus en mouvement ou clignotants. Ne pas faire dépendre l’accomplissement d’une tâche d’une limite de temps sauf si elle est essentielle et s’assurer que les données saisies sont récupérées après une interruption de session authentifiée. Proposer des versions accessibles ou rendre accessibles les documents en téléchargement. S’assurer que la consultation n’est pas dépendante de l’orientation de l’écran. Toujours proposer un geste simple en alternative d’un geste complexe permettant de réaliser une action.

Gestes complexes

Certaines personnes handicapées motrices ne peuvent pas réaliser de gestes complexes, elles utilisent généralement des technologies d’assistance qui leur permettent d’interagir uniquement avec un geste simple comme cliquer sur un bouton par exemple.

Dans ces situations, il est indispensable que l’application propose pour chaque fonctionnalité basée sur un geste complexe une alternative au moyen d’un geste simple.

Le geste complexe nécessite l’utilisation d’un contact multipoint, comme utiliser deux doigts pour zoomer ou dézoomer, ou tracer une trajectoire.

Le geste simple peut être un contact sur un seul point ou toute variation multiple de ce contact (double clic, etc.).

Constats dans l’application

On trouve des carrousels qui ne proposent pas de méthode alternative à l'utilisation de geste complexe (swipe) pour atteindre les éléments hors écran. La fonctionnalité d'accessibilité "désactiver le défilement horizontal" n'a pas d'effet sur l'affichage de ce type de composant.

Consultation des contenus indépendante de l’orientation

Certaines personnes handicapées motrices peuvent utiliser des périphériques dont elles ne peuvent pas contrôler l’orientation. Par exemple les personnes qui utilisent des contacteurs pour interagir avec le périphérique de consultation. D’autres, comme les personnes déficientes visuelles peuvent avoir besoin de forcer un mode d’affichage (paysage par exemple) pour pouvoir bénéficier des fonctionnalités d’agrandissement des caractères.

Il est donc nécessaire que les applications :

Constats dans l’application

L'application est vérrouillée en mode portrait, il n'est pas possible de la consulter en mode paysage

Documentation et fonctionnalités d’accessibilité

Recommandation

Lorsque l’application fournit une documentation, la documentation décrit les fonctionnalités d’accessibilité disponible et elle est accessible. L’application ne perturbe pas les fonctionnalités d’accessibilité de la plateforme.

La documentation de l’application décrit-elle les fonctionnalités d’accessibilité de l’application et leur utilisation ?

Constats dans l’application

L'application contient des fonctionnalités d'accessibilité qui ne sont pas decrites dans la documentation.