Rapport d’audit d’accessibilité d'application mobile
Lëtzebuerg City Museum (Android)

Ce rapport accompagne le relevé d’audit effectué sur l’application « Lëtzebuerg City Museum (Android) ».

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 : 15

Échantillon

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

• Android : 2.0.5

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
E03	Plan du lieu
E04	Tarifs
E05	Kids quiz
E06	Unesco quiz
E07	Lux story
E08	Kids tour
E09	Discovery

L'application ne comporte pas de déclaration sur l'accessibilité. Celle-ci est obligatoire d'après l'article 5 de la loi du 28 mai 2019. Cette déclaration s'effectue après avoir réalisé un audit de conformité basé sur le RAAM. Pour créer une déclaration sur base des résultats d'un audit de conformité, le formulaire disponible à cet effet sur accessibilite.lu peut être utilisé. Une fois la déclaration d'accessibilité publiée, l'éditeur du site a 30 jours pour en informer le SIP par mail à l'adresse accessibilite@sip.etat.lu.

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 36,59 % de conformité sur l’ensemble des écrans audités, avec 41,94 % de conformité au niveau simple A (A) et 20 % de conformité au niveau double A (AA).

L’application est non conforme.

Conformité RAAM de l’application

Conformité RAAM

Conforme	Non conforme
36,59 %	63,41 %

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	41,94 %	58,06 %
AA	20 %	80 %

Moyenne par écrans

Nº écran	Titre d’écran	%C
E01	Accueil	45,45 %
E02	Mentions légales	57,89 %
E03	Plan du lieu	55,00 %
E04	Tarifs	76,47%
E05	Kids quiz	40,91 %
E06	Unesco quiz	45,45 %
E07	Lux story	61,54 %
E08	Kids tour	61,54 %
E09	Discovery	58,62 %

Moyenne par thématiques

Thématiques	C
Éléments graphiques	16,67 %
Couleurs	0 %
Multimédia	50 %
Tableaux	NA
Composants interactifs	33,33 %
Éléments obligatoires	0 %
Structuration	0 %
Présentation	28,57 %
Formulaires	NA
Navigation	100 %
Consultation	75 %
Documentation et fonctionnalités d’accessibilité	NA
Services d’assistance	0 %
Outils d'édition	NA
Communication en temps réel	NA

Impacts utilisateurs

Les principales personnes impactées sont les personnes aveugles, malvoyantes et celles qui naviguent au clavier. Les problèmes liés aux contrastes, à la structuration des contenus, aux scripts (en particulier le nommage et l'état des composants) rendent 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.

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

• pas de dérogation

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 [donner un exemple issu du relevé], le relevé mentionne quelques occurrences, mais ne les cite pas toutes.

Avis

L'application est peu accessible actuellement, on y trouve de nombreux problèmes bloquants pour divers profils d'utilisateurs, notamment les personnes malvoyantes, aveugles et navigant au clavier

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.

É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 la section "Discovery", on trouve des images de décoration qui ont une alternative renseignée : "Bild ohne Beschriebung" (image sans description). Or, une image décorative doit être complètement ignorée des technologies d'assistance et ne doit pas avoir d'alternative. De plus cette alternative est en luxembourgeois, quelle que soit la langue choisie dans l'application. Ce qui peut porter à confusion en particulier les personnes aveugles.

É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 la page d'accueil, on trouve une image contenant du texte incrusté "Welcome, Bienvenue, Willkommen" qui a une alternative renseignée qui ne reprend pas au moins le texte visible et qui n'est pas pertinente:

Éléments graphiques porteurs d’information complexe

Certains éléments graphiques porteurs d’informations sont complexes et nécessitent une description détaillée, pertinente, structurée et adjacente afin de permettre aux personnes ne percevant pas les éléments graphiques (comme les personnes aveugles), ou ayant des difficultés à les comprendre lorsqu’ils contiennent du texte (personnes ayant des difficultés de lecture, comme les dyslexiques par exemple) d’accéder à l’information.

Constats dans l’application

Dans la section "Plan du site", on trouve des images représentant le plan des différents étages du bâtiment ainsi que les principaux points d'intérêts. Ces images ont une alternative renseignée "Image without description" qui n'est pas pertinente. De plus ces images devraient être accompagnées d'une description détaillée.

Éléments graphiques textes

Lorsque des éléments graphiques textes peuvent être reproduits en texte stylé, vous ne devez pas utiliser d’élément graphique.

Les textes doivent être réalisés en texte stylé afin de permettre aux utilisateurs qui en ont besoin d’adapter leur lisibilité (agrandissement des caractères, modification des couleurs, des polices…).

Il est également possible de conserver les éléments graphiques textes et de fournir à l’utilisateur un mécanisme de remplacement qui lui permet, avec un bouton par exemple, de remplacer tous les éléments graphiques textes en textes stylés.

Constats dans l’application

Dans les quiz, pour les réponses, on trouve des images avec du texte incrusté qui est reproductible avec du vrai texte. Les textes incrustés dans les images ne peuvent être personnalisés selon le besoin de l'utilisateur, notamment pour modifier la police d'écriture, la couleur ou encore la taille.

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,5 px avec effet de graisse ou 24 px 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

À travers l'ensemble de l'application, de nombreuses associations de couleurs de texte et d'arrière-plan présentent des contrastes insuffisants pour que ces textes soient perceptibles par tout le monde. C'est le cas notamment pour les combinaisons suivantes:

• Le texte "Votre visite" de couleur jaune #FFC600 sur fond blanc #FFFFFF (ratio : 1,57 au lieu de 3 attendu)
• Le texte "Tours" de couleur verte #95C21F sur fond blanc #FFFFFF (ratio : 2,1 au lieu de 3 attendu)
• Dans la section "Kids quiz", la couleur bleue #01B3FE sur fond blanc #FFFFFF (ratio : 2,37)
• La couleur grise #9C9C9C du texte "Durée" n'est pas assez contrastée avec fond blanc #FFFFFF (ratio : 2,75 au lieu de 4,5)

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 la section "Langue", l'icône de coche verte indiquant la langue sélectionnée n'est pas assez contrastée avec une couleur verte #9CBE23 sur fond blanc #FFFFFF (ratio : 2,14 au lieu de 3 attendu)

• 

  Dans les résultats aux questions "Kids quiz", la couleur des os dans les cas où la réponse est correcte ou bien la question n'a pas encore été posée n'est pas assez contrastée pour être perceptible par tout le monde. Dans le cas de la bonne réponse est de couleur bleue #01B3FE sur contour blanc #FFFFFF (ratio : 2,37) et dans le cas d'une question qui n'a pas encore été posée: la couleur beige clair #F4E4C4 sur fond plus foncé #D4BD92 (ratio : 1,46).

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 les résultats aux questions "Kids quiz", l'indication de bonne ou mauvaise réponse ainsi que les questions à venir ne sont différenciées que par la couleur. Ce qui constitue une perte d'information notamment pour les personnes malvoyantes ou aveugles.

Transcription textuelle

Les vidéos présentes dans l’application ne disposent pas de transcription textuelle. Il s’agit d’un impact majeur d’accessibilité. En effet, la transcription textuelle est utile pour différents types d’utilisateurs (aveugles, malvoyants, sourds, malentendants, handicapés moteurs, handicapés cognitifs).

Cette transcription doit être un fichier structuré (docx, HTML) qui reprend toutes les informations présentes (visuelles et sonores) dans la vidéo.

Cette transcription peut être située :

• soit sur le même écran que la vidéo ;
• soit ailleurs dans l’application. Dans ce cas, ajouter alors un lien vers la transcription sous la vidéo par exemple.

Sous-titres

Chaque vidéo doit disposer de sous-titres synchronisés pertinents, pour permettre aux utilisateurs sourds ou malentendants d’accéder au contenu oralisé de la vidéo.

L’utilisateur doit pouvoir activer ou désactiver les sous-titres depuis le lecteur vidéo. Si ce n’est pas possible, une solution consiste à fournir deux versions de la même vidéo : une version sans sous-titres et une version sous-titrée (On fera ensuite un lien réciproque de l’une vers l’autre).

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 la section "Tours audio", les pistes audio ne sont pas accompagnées d'une transcription textuelle de leur contenu. De plus, le lecteur vidéo n'est pas totalement accessible: le bouton lecture/pause ne reflète pas l'état de lecture en cours ou non et certains éléments sont restitués en anglais par exemple time elapsed (temps écoulé).
• Dans la section "Discover Mode", dans l'écran de détail des éléments à découvrir, par exemple "Niveau 0 - Acte d'échange entre le Comte Sigefroid et l'Abbaye Saint-Maximin de Trèves", on trouve une vidéo "Point de vue de l'expert: le contexte politique de l'acte" qui n'est pas accompagnée d'une transcription textuelle. De plus, si des sous-titres de traduction sont bien présents et s'adaptent à la langue sélectionnée dans l'application. Ceux-ci sont incrustés dans la vidéo. Ce qui a pour conséquences: il n'est pas possible de les vocaliser avec des technologies d'assistance et il n'est pas possible non plus de les personnaliser ni de les désactiver.

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

Certains rôles sont annoncés en anglais par exemple sur la page de mentions légales, les liens sont annoncés "Link alors que l'appareil et le site sont configurés en français. Cela peut provoquer des incompréhensions. LA source probable du problème semble provenir qu'une description du rôle renseignée en anglais.

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

• 

  Le bouton "Menu" n'a pas de nom accessible, ce qui va poser des problèmes de compréhension pour les personnes utilisant un lecteur d'écran.

• 

  Le bouton "flèche" de retour à l'écran précédent a un nom accessible qui n'est pas pertinent: "Retour en haut de page"

• 

  Dans les quiz, les boutons de réponse sont des boutons ne contenant que des images dont le nom accessible n'est pas pertinent. Par exemple, dans "Kids quiz" les réponses à la première question ont tous pour nom accessible "Bild ohne Beschriebung" (image sans description). Ce qui va être bloquant pour les personnes aveugles notamment.

• Dans la section "Discover Mode", dans l'écran de détail des éléments à découvrir, par exemple "Niveau 0 - Acte d'échange entre le Comte Sigefroid et l'Abbaye Saint-Maximin de Trèves", on trouve des composants "Voir plus" qui perdent leur nom accessible lorsqu'ils sont activés.

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

Sur la page d'accueil, le menu principal de navigation n'est pas atteignable ni activable au clavier

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

• 

  Sur la page d'accueil, on trouve de nombreux termes en anglais qui ne sont pas indiqués comme étant dans cette langue. Ce qui peut provoquer des problèmes de vocalisation et des incompréhensions. Par exemple Open book: Check out the visitors ideas and thoughts"

• 

  De manière transverse, le contenu des fenêtres de dialogue de satisfaction sont intégralement en anglais

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

Sur la page d'accueil, des textes sont visuellement structurants et traités comme des titres mais ils ne sont pas déclarés comme tels dans le code. Ce qui est une perte d'information au niveau de la hiérarchie des contenus et empêche les personnes utilisant des lecteurs d'écran notamment d'y accéder rapidement.

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 quiz les listes de réponses ne sont pas structurées en listes.

Contenus visibles non accessibles

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

Constats dans l’application

Le texte d'introduction de "Kids quiz" ainsi que les réponses aux questions ne sont pas accessibles aux technologies d'assistance.

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 "Quiz Unesco", lorsque les textes sont agrandis, ils se retrouvent en arrière-plan d'éléments décoratifs. Ce qui empêche leur lecture

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

L'indication de langue sélectionnée n'est donnée que par la forme

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 est verrouillée en affichage portrait.

En attente de réponse, j'ai bien eu une confirmation de transfert à la personne concernée mais celle-ci est en vacances. (À mettre à jour suivant la réponse qui sera reçue)