Rapport d’audit d’accessibilité d'application mobile
Visit Luxembourg

Ce rapport accompagne le relevé d’audit effectué sur l’application « Visit Luxembourg ».

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 (TalkBack sur Android), ainsi que des tests d’adaptation des contenus en fonction des paramètres d’affichage utilisateurs.

• Version Android lors de l’audit : 13

Échantillon

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

• Android : 1.7.0

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

Échantillon de l’audit

Nº écran	Titre de l’écran
E01	Écrans d'onboarding
E02	Mentions légales (webview)
E03	Accueil
E04	Tours (liste des tours et fiche détaillée d'un tour)
E05	Point d'intérêts (POI, liste des POIs culture, filtres et fiche détaillée d'un POI)
E06	Lucy Story

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 43,33 % de conformité sur l’ensemble des écrans audités, avec 52 % de conformité au niveau simple A (A) et 0 % de conformité au niveau double A (AA).

L’application est non conforme.

Conformité RAAM de l'application

Conformité RAAM

	Conforme	Non conforme
A	52,00%	48,00%
AA (légal)	43,33%	56,67%

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	52,00 %	48,00 %
AA	0,00 %	100,00 %

Moyenne par écrans

Nº écran	Titre d’écran	%C
E01	Écrans d'onboarding	70,59%
E02	Mentions légales (webview)	91,67%
E03	Accueil	50,00%
E04	Tours (liste des tours et fiche détaillée d'un tour)	52,17%
E05	Point d'intérêts (POI, liste des POIs culture, filtres et fiche détaillée d'un POI)	54,17%
E06	Lucy Story	52,63%

Moyenne par thématiques

Thématiques	C
Éléments graphiques	66,67%
Couleurs	0,00%
Multimédia	50,00%
Composants interactifs	0,00%
Éléments obligatoires	50,00%
Structuration	0,00%
Présentation	50,00%
Formulaires	100%
Navigation	33,33%
Consultation	33,33%

Impacts utilisateurs

Les principales personnes impactées sont les personnes aveugles. En effet, un nombre important de composants interactifs qui permettent d'interagir avec l'interface n'ont pas d'intitulés ou des états (activés / dépliés) qui ne sont pas annoncés aux 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.

Les contenus suivants n’entrent pas dans le calcul de la conformité ni dans le périmètre des éléments à rendre accessibles, ils sont dérogés :

• les cartes interactives présentes dans les fiches détaillées des points d'intérêt (l'adresse de localisation est donnée en texte dans l'écran) ;
• la carte interactive permettant de visualiser l'ensemble des points d'intérêt, puisqu'une vue liste alternative qui fournit les mêmes informations est disponible.

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 défauts de contrastes, le relevé mentionne quelques occurrences, mais ne les cite pas toutes.

Avis

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

• les intitulés des boutons ;
• les états des boutons (donnés exclusivement par la couleur pour une large part) ;
• l'ordre de navigation au clavier et au lecteur d'écran dans les écrans ;
• l'absence de titres dans les écrans.

Ce sont donc ces points qui devront nécessiter une attention toute particulière et qui demanderont le plus d’efforts.

É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'écran d'accueil, les images contenues dans les composants (par exemple des blocs « circuits recommandés» , « évènements» ) sont décoratives, mais ne sont pas correctement ignorées. L'information « aucune description disponible»  est annoncée pour chaque image ce qui complexifie la compréhension pour les personnes aveugles.

Dans les fiches détaillées des tours, on trouve de nombreuses icônes décoratives (par exemple un crayon pour l'auteur, une bulle de message pour une information) qui sont pourtant restituées par les lecteurs d'écrans. Les personnes aveugles accèdent à des contenus sans intérêt, ce qui alourdit la consultation globale de la page.

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 la barre de navigation en bas d'écran, les textes des boutons qui ne sont pas activés ont un rapport de contraste insuffisant (couleur de police #A8AFBC sur un fond blanc : #FFF - rapport de contraste de 2,2:1).

Dans les fiches détaillées des tours, selon l'image qui est utilisée en bannière, le titre du tour en blanc n'est pas suffisamment contrasté.

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

Dans l'en-tête de l'application, on trouve 3 boutons identifiés par des icônes : menu, loupe et carte. Le rapport de contraste de ces icônes (blanche #FFF) sur le fond composite est inférieur à 3:1. Ces boutons ne seront pas perçus par tous les utilisateurs.

Dans les écrans des story, les boutons permettant de se déplacer entre les différents écrans ont un contraste insuffisant avec les couleurs de fond (selon l'image utilisée). Ils pourront ne pas être perçus par tous les utilisateurs.

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

Dans la barre de navigation en bas d'écran, l'onglet actif est mis en évidence par la couleur, le texte et l'icône sont colorés en rouge, alors que les autres textes sont gris. Les utilisateurs qui ont des difficultés à percevoir et différencier les couleurs n'ont pas accès à cette information.

Dans la liste des points d'intérêts, le bouton des filtres change de couleur (passe du gris au rouge), lorsque des filtres ont été sélectionnés dans la fenêtre modale. Cette information (des filtres sont appliqués) n'est pas disponible pour les technologies d'assistance. De même, l'état du bouton permettant de basculer de la vue liste à la vue carte est donné uniquement par la couleur de fond. Une personne aveugle n'aura pas accès à cette information.

Contrôles

Le lecteur vidéo utilisé doit lui aussi être accessible :

• il doit être utilisable au clavier et à la souris ;
• il doit proposer les contrôles essentiels (lecture/pause, contrôle du volume, activation/désactivation des sous-titres, etc.) ;
• il doit être compatible avec les API d’accessibilité ;
• ses boutons et composants d’interface porteurs d’information doivent être suffisamment contrastés (rapport de contraste de 3:1 avec la couleur d’arrière-plan contiguë).

Constats dans l’application

Dans les story, les lecteurs audios n'ont pas de contrôle du volume.

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 les modales de filtres, les composants « Appliquer le filtre » ne sont pas identifiés comme étant des boutons.

Intitulé absent ou non pertinent

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

• Le nom accessible doit être pertinent ;
• Le nom visible doit être contenu dans le nom accessible.

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 l'écran des tours, un certain nombre de boutons n'a pas d'intitulé. Par exemple, les boutons de partage et de favoris associés à chaque tour n'ont pas d'intitulé. Une personne aveugle ne pourra pas déterminer leur fonction et ne pourra donc pas les utiliser.

Dans les fiches détaillées des points d'intérêt, les boutons « Téléphone », « Carte »« et  Favoris » n'ont pas d'intitulé.

É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 l'écran des tours, les filtres ne sont pas implémentés dans des boutons et leur état sélectionné n'est pas disponible pour les technologies d'assistance. Une personne aveugle ne saura pas quels filtres elle a sélectionné.

Dans les fiches détaillées des points d'intérêt, des boutons permettent d'afficher et masquer les horaires d'ouverture. L'état ouvert/fermé des contenus associés n'est pas disponible pour les technologies d'assistance, une personne aveugle ne peut jamais connaître l'état de visibilité de ce contenu.

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

Dans les systèmes de filtres, lorsqu'un texte ne retourne aucune réponse, aucune annonce n'est disponible pour les personnes aveugles.

Utilisation pertinente des structures de contenu

Les lecteurs d’écran annoncent les types de contenus aux utilisateurs aveugles, ce qui permet de donner une information sur la nature des éléments. Si la structure n'est pas pertinente au regard de la nature de l'information, cela peut biaiser la compréhension par les utilisateurs. De plus, une structure pertinente doit permettre aux personnes naviguant au lecteur d'écran de pouvoir naviguer et consulter le contenu de manière efficace.

Constats dans l’application

Dans les pages story, les contenus sont implémentés dans un seul et même bloc. Il est alors impossible pour une personne aveugle de déplacer le focus du lecteur d'écran sur un paragraphe particulier, elle est obligée de lire l'ensemble du contenu.

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 l'écran d'accueil, les textes « Recommandations pour aujourd'hui », « News », « Challenges » etc. structurent l'écran, mais ne sont pas identifiés comme des titres.

On rencontre la même problématique dans la liste des tours où les noms identifiant chacun des tours ne sont pas identifiés comme des titres. Cette absence de titre est dommageable pour la navigation des personnes aveugles, car il n'est pas possible de passer rapidement d'un tour au suivant avec le lecteur d'écran. Les utilisateurs sont obligés de parcourir l'ensemble des éléments décrivant un tour avant d'atteindre le suivant, et pour certains, la liste des boutons images étant longue, le parcours de cette liste est peu efficace.

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 l'écran d'accueil, lorsqu'on augmente la taille des caractères, certains dénivelés présents dans les vignettes de la section « circuits recommandés » sont tronqués et ne sont plus complètement 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 l'écran d'accueil, dans les vignettes « Circuits recommandés », les dénivelés sont figurés par des icônes (flèches montantes et descendantes). Cette information n'est pas disponible pour les personnes aveugles puisqu'aucun texte ne leur est associé. Les personnes qui naviguent avec un lecteur d'écran ne sauront pas à quoi correspondent les valeurs énoncées (« 179m » par exemple). On trouve les mêmes icônes et informations dans l'écran de la liste des tours et les fiches détaillées des tours.

Ordre de tabulation

La navigation dans les contenus peut être considérablement compliquée pour les personnes aveugles ou les personnes handicapées motrices qui naviguent au clavier si l’ordre de tabulation n’est pas cohérent.

L’ordre de tabulation ne suit pas forcément l’ordre de lecture de l’écran, mais il doit être cohérent en fonction de la nature des contenus et des fonctionnalités.

Constats dans l’application

Dans l'écran des tours, les images de galerie ouvrent une fenêtre modale. L'ordre de navigation n'est pas cohérent (au clavier et au lecteur d'écran). Par exemple, lorsque la fenêtre modale est ouverte, le focus n'est pas déplacé dans la modale mais reste dans l'écran en arrière-plan et n'atteint jamais le contenu de cette fenêtre modale. Ces composants sont quasiment impossibles à utiliser pour des personnes naviguant avec un contacteur externe et pour les personnes aveugles.

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'ordre de restitution des éléments dans le lecteur multimédia n'est pas cohérent : on accède au titre puis au bouton précédent, au bouton de fermeture, au temps écoulé, au bouton de lecture et enfin au bouton suivant. Dans ce cas précis, l'ordre d'accès avec le lecteur d'écran devrait respecter l'apparence de celui-ci : accéder d'abord au titre et temps écoulé, puis de manière logique aux boutons suivant, lecture, précédent et enfin fermeture.

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

Dans l'écran d'accueil, le contenu des blocs d'items des sections « challenges»  ou « circuits recommandés»  par exemple ne peut être consulté qu'en utilisant le geste de glissement de la droite vers la gauche (ou inversement), qui est un geste complexe (swipe). Les personnes handicapées motrices ne pourront pas faire défiler ces contenus depuis la page d'accueil.

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 :

• Ne bloquent pas l’orientation sur un mode portrait ou paysage ;
• S’assurent que les contenus sont consultables dans les deux modes d’affichage.

Constats dans l’application

L'application ne peut pas être consultée en mode paysage.