Introduction

Ce rapport accompagne le relevé d'audit effectué sur le site « Guichet Unique PME ».

La méthodologie d'audit employée repose sur le référentiel RAWeb 1, consultable à l'adresse suivante : https://accessibilite.public.lu/fr/raweb1/index.html

L'audit a été réalisé au moyen de l'utilisation de navigateurs web et d'outils spécialisés. Des tests de restitution ont également été effectués conformément à la base de référence définie par le RAWeb 1.

Échantillon

L'audit a porté sur un échantillon de 13 pages :

Échantillon de l'audit
Nº page Titre de la page URL
P01 Accueil https://gupme.lu/fr/
P02 Mentions légales https://gupme.lu/mentions-legales/
P03 Contact https://gupme.lu/contact/
P04 À propos https://gupme.lu/a-propos/
P05 Services https://gupme.lu/services/
P06 Organisation https://gupme.lu/organiqramme/
P07 Partenaires https://gupme.lu/partenaires/
P08 Évènements https://gupme.lu/evenements/
P09 Page d'un évènement https://www.gupme.lu/evenements/evenements/realiser-son-reve-entrepreneurial/
P10 Actualités https://gupme.lu/evenements/news/
P11 Page d'une actualité https://www.gupme.lu/evenements/news/gupme-30-ans/
P12 Téléchargements https://gupme.lu/telechargements/
P13 Formulaire de contact https://gupme.lu/demande/

Le site 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 RAWeb. 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.

Environnement de test (base de référence)

Quelques critères RAWeb, notamment ceux de la thématique JavaScript, incluent des tests de restitution à effectuer sur des technologies d'assistance associées à des navigateurs et des systèmes d'exploitation. Pour qu'un dispositif HTML / WAI-ARIA ou son alternative soit considéré comme compatible avec l'accessibilité, il faut qu'il soit pleinement fonctionnel, en termes de restitution et de fonctionnalités sur certaines combinaisons. Vous trouverez une explication détaillée de cet environnement de tests dans le document du RAWeb 1.

Nous détaillons ci-dessous la base de référence utilisée pour réaliser les tests de restitution des composants du site.

Environnement de test – ordinateur

Environnement de test (environnement de bureau)
Technologie d'assistance Navigateur
NVDA (dernière version) Firefox
JAWS 2024 Firefox
VoiceOver (macOS Sequoia 15.7.1) Safari 26.0.1

Environnement de test — mobile

Environnement de test (environnement mobile)
Système d'exploitation Technologie d'assistance Navigateur
Android natif TalkBack (dernière version) Chrome
iPhone VoiceOver (dernière version) Safari

Accessibilité des pages auditées

Le site présente un niveau général d'accessibilité moyen.

Le niveau de conformité relevé atteint 41,51 % de conformité au RAWeb sur l'ensemble des pages auditées.

Le site est non conforme.

Note sur le calcul de conformité

La conformité globale (Tableau « Conformité RAWeb 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 page. En effet, un critère NC (non conforme) sur une page rend le critère non conforme sur l'ensemble de l'échantillon.

Pour qu'un site soit conforme (100 % des critères applicables sont conformes), il est nécessaire que le taux de conformité par page équivaille à 100 %.

Moyenne par pages

Nº page Titre de la page %C
P01 Accueil 48,65%
P02 Mentions légales 55,56%
P03 Contact 52,50%
P04 À propos 55%
P05 Services 55%
P06 Organisation 51,28%
P07 Partenaires 53,85%
P08 Évènements 56,76%
P09 Page d'un évènement 50 %
P10 Actualités 58,33%
P11 Page d'une actualité 48,72%
P12 Téléchargements 56,76%
P13 Formulaire de contact 54,55%

Moyenne par thématiques

Thématiques C NC
Images 0 % 100%
Cadres 0 % 100%
Couleurs 0% 100%
Multimédia 100% 0%
Tableaux - -
Liens 50% 50%
Script 33,33% 66,67%
Éléments obligatoires 75% 25%
Structuration 0% 100%
Présentation 27,27% 72,73%
Formulaires 71,43% 28,57%
Navigation 33,33% 66,67%
Consultation 75% 25%

Impacts utilisateurs

Les principales personnes impactées sont les personnes aveugles et celles qui naviguent au clavier.

Les problèmes liés aux intitulés de liens ou de boutons, aux scripts (Fenêtre modale, menu burger, visionneuse d'image), aux formulaires et aux documents bureautiques rendent parfois difficile l'utilisation du site par ces utilisateurs.

Exemptions

Sont listés ci-dessous les contenus exemptés de l’obligation d’accessibilité. Ils n’entrent pas dans le calcul de la conformité et ne sont pas audités.

Pas d'exemption.

Contenus dérogés

Lorsque l’organisme ne peut pas rendre un contenu ou une fonctionnalité accessible, le RAWeb prévoit sous certaines conditions la possibilité d’invoquer une dérogation pour charge disproportionnée. Cette dernière doit être dûment justifiée et compensée dans la mesure du possible avec la production d’une alternative accessible aux personnes handicapées.

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 :

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.

Avis

Le site présente de nombreuses non-conformités qui pour certaines créer des pertes d'information pour les personnes aveugles ou malvoyantes.

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

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

Annexe technique

Images

Recommandation

Donner à chaque image porteuse d'information une alternative textuelle pertinente et une description détaillée si nécessaire. Lier les légendes à leurs images. Remplacer les images textes par du texte stylé lorsque c'est possible.

Images de décoration

Le site contient des images de décoration qui ne sont pas correctement identifiées, soit parce qu'elles ont une alternative renseignée, soit parce qu'il manque les attributs nécessaires pour qu'elles soient ignorées par les technologies d'assistance.

Ces images n'apportent aucune information et peuvent causer des problèmes de compréhension pour les aveugles et les grands malvoyants qui vont écouter les contenus avec un lecteur d'écran.

Constats sur le site

Dans la page d'accueil et plusieurs pages internes, on trouve des images ou des emojis décoratifs qui ne sont pas masqués aux technologies d'assistance.

Images porteuses d'information

Il est nécessaire de donner une alternative pertinente dans le cas où la suppression de l'image entraînerait un problème de compréhension des contenus.

Constats sur le site

On trouve dans plusieurs pages des visionneuses d'images dans lesquelles les images n'ont pas d'alternative textuelle. Cela va entrainer une incompréhension quant au contenu de la visionneuse c'est pourquoi ces images doivent avoir une alternative (voir Images légendées).

Images textes

Lorsque des images textes peuvent être reproduites en HTML et CSS, vous ne devez pas utiliser d'images.

Les textes doivent être réalisés en HTML et CSS 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 images textes et de fournir à l'utilisateur un mécanisme de remplacement qui lui permet, avec un bouton par exemple, de remplacer toutes les images textes en textes stylés.

Constats sur le site

On trouve sur le site des indications de langue au format image qui doivent être reproduites en HTML et CSS.

Images légendées

On trouve un certain nombre d'images avec des légendes dans la visionneuse d'image.

Il va falloir relier l'image et l'information en utilisant l'implémentation suivante : 

<figure role="group" aria-label="Document 1 - Le présent registre contenant six feuillets…">
			
<img src="path/to/img/jpg" alt="Document 1" />

		<figcaption>

		Document 1 — Le présent registre contenant six feuillets…</figcaption>

		</figure>

Le contenu de l'attribut alt de l'image sert ici à labelliser l'image pour la relier à sa légende, permettant aux personnes aveugles utilisant un lecteur d'écran de faire le lien entre l'image et le texte qui l'accompagne. La propriété aria-label doit reprendre le contenu exact contenu dans l'élément figcaption.

Constats sur le site

Dans les visionneuses, les images n'ont actuellement pas d'alternative (voir Images porteuses d'information).

Cadres

Recommandation

Donner à chaque cadre un titre pertinent.

L'absence d'identification des cadres peut poser un problème de repérage dans la structure de la page ou de compréhension des contenus pour les personnes aveugles.

Constats sur le site

Dans la page Contact, on trouve une carte dont le cadre n'a pas de titre (par exemple : "carte Google").

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.

Contrastes des textes

Plusieurs couleurs présentent un rapport de contraste insuffisant, ce qui peut poser problème aux personnes déficientes visuelles qui ont des difficultés à percevoir les couleurs ou les contrastes.

Rapports de contrastes définis par le RAWeb

Vous pouvez foncer les couleurs pour obtenir le rapport de contraste exigé.

Si la charte graphique ne peut être modifiée, fournissez une méthode aux utilisateurs pour consulter le site avec des contrastes suffisants. Ceci peut être réalisé simplement avec une fonctionnalité JavaScript et une surcharge CSS des couleurs.

Vous pouvez voir un exemple de ce type de mécanisme sur le site sncf.com. Dans les réglages d'accessibilité, vous trouverez une option qui permet d'afficher le site avec des contrastes renforcés et inversés.

Constats sur le site

On trouve en page d'accueil, et dans une moindre mesure dans les pages internes, des textes qui ne sont pas suffisamment contrastés :

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 la page.

Constats sur le site

Quelques composants ne sont pas suffisamment contrastés, par exemple : les champs de formulaire. Des utilisateurs malvoyants pourraient ne pas les voir.

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 sur le site

Dans le sélecteur de langues, l'information sur la langue active est uniquement donnée par la couleur.

Liens

Recommandation :

Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, utiliser le titre de lien le moins possible. S'assurer que le nom visible est contenu dans le nom accessible.

Pertinence des intitulés

Un lien possède généralement un intitulé et un contexte. L'intitulé est le texte présent dans la balise <a> (ou la valeur de l'attribut alt de l'image dans le cas d'un lien-image) et le contexte du lien est représenté par le titre qui précède, le titre du lien (l'infobulle) ou tout simplement le texte dans lequel il est inséré.

Pour être considéré comme pertinent, l'intitulé d'un lien doit permettre de comprendre sa destination en prenant en compte son contexte.

Note : Lorsqu'elle est présente dans le code, la propriété Aria aria-labelledby ou aria-label fournit l'intitulé du lien qui sera détecté par les technologies d'assistance. Si cet intitulé, dit "intitulé accessible", ne reprend pas l'intitulé visible du lien, l'intitulé accessible sera considéré comme non pertinent.

Constats sur le site

De nombreux liens ont un intitulé déterminé par la propriété aria-label, or le nom visible du lien n'y est pas repris.

Par exemple, pour le lien "Vie privée" présent dans le bandeau de cookies : l'intitulé du lien (aria-label) est "Learn more about cookies" alors que le nom visible du lien est "Vie privée". Pour être conforme, la valeur de la propriété aria-label devra être "Vie privée - Learn more about cookies".

Liens-images et liens-composites

Un lien-image est un lien dont le contenu n'est composé que d'une ou plusieurs images (balises <img>). Généralement, ces liens ne posent aucun problème aux utilisateurs voyants qui parviennent à comprendre la destination du lien grâce à l'image et son contexte. En revanche, pour une personne aveugle, ces liens doivent obligatoirement posséder un intitulé.

L'intitulé d'un lien-image est généré grâce à l'alternative de l'image contenue dans ce lien.

Dans le cas où le lien est composé d'image et de texte, il s'agit d'un lien composite. Si le texte est suffisant pour fournir un intitulé pertinent au lien, il faudra laisser l'alternative de l'image vide : 

<a href="#"><img src="" alt=""> Intitulé texte</a>

Constats sur le site

Dans certaines pages internes (Évènements, par exemple), on trouve des liens composites pour lesquels l'alternative de l'image est renseignée. Cela donne comme intitulé de lien "Réaliser son rêve entrepreneurial Réaliser son rêve entrepreneurial ...".

Titres de liens (infobulles)

La restitution des titres de liens (attribut title sur une balise) dépend fortement des lecteurs d'écran et des préférences utilisateurs. Ainsi, l'utilisation de ces infobulles doit être limitée aux cas où l'infobulle apporte de l'information supplémentaire par rapport à l'intitulé du lien. De plus, cette infobulle doit reprendre au moins l'intitulé du lien pour être considéré comme conforme.

Constats sur le site

Dans certains cas, le titre du lien ne reprend pas l'intitulé, par exemple pour les liens "En savoir plus" ou "Toutes les actus" présents en page d'accueil.

Scripts

Recommandation :

Donner si nécessaire à chaque script une alternative pertinente. Rendre possible le contrôle de chaque code script 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.

Utilisation des boutons et des liens

Pour les aveugles et les grands malvoyants qui utilisent un lecteur d'écran, ce manque de distinction claire entre les liens et les boutons peut poser de graves problèmes.

Ainsi, un bouton implémenté sous la forme d'un lien qui déclenche une action de la page, risque de perturber l'utilisateur qui s'attendra au chargement d'une nouvelle page.

De manière générale, les liens devraient être réservés à l'affichage d'une nouvelle page ou la création de liens d'accès rapide dans le contenu. Dans tous les autres cas, l'emploi d'un bouton d'action est plus pertinent.

Enfin, chaque bouton doit avoir un nom accessible défini, soit par l'intermédiaire d'un texte (visible ou positionné hors écran) ou d'une propriété title, aria-label ou aria-labelledby.

Constats sur le site

Les visionneuses d'image sont actuellement affichées grâce à des liens alors qu'elles devraient l'être par des boutons. Ces boutons doivent avoir un intitulé qui permet de comprendre l'action qu'il déclenche, en l'occurrence : agrandir une photo.

Ces visionneuses présentent d'autres problèmes d'accessibilité, elles devraient être implémentées dans des fenêtres modales.

Fenêtres modales

Constats sur le site

La fenêtre de gestion des cookies, les visionneuses d'image ou encore le menu mobile (s'affiche lorsque la page est fortement zoomée) doivent être des fenêtres modales et retenir le focus de l'utilisateur jusqu'à ce qu'il effectue une action (fermeture, choix, abandon...).

Zones qui s'affichent et se masquent

Constats sur le site

Le bouton du sélecteur de langue permet d'afficher / masquer une liste de langues. Ce composant n'est actuellement pas compatible avec les technologies d'assistance : il est contenu dans un élément sans sémantique ni role interactif et il n'a pas d'intitulé pertinent.

Dans ce genre de cas, l'élément qui permet d'afficher la liste de langues doit :

Éléments interactifs inaccessibles au clavier

Si un élément ne peut pas recevoir le focus ou n'est pas totalement utilisable au clavier, les utilisateurs pour lesquels le clavier est le seul moyen de naviguer seront bloqués.

Constats sur le site

Dans la fenêtre de gestions des cookies on trouve des composants qui ont un bien le role de boutons mais pour lesquels les interactions au clavier ne sont pas possibles ("Refuser" et "Accepter"). L'utilisation du role="button" requiert d'implémenter les intéractions clavier avec Javascript (voir Motif de conception Aria button Keyboard interaction).

Éléments obligatoires

Recommandation

Vérifier que chaque page web a un code valide selon le type de document, un titre pertinent et une indication de langue par défaut. Vérifier que les balises ne sont pas utilisées uniquement à des fins de présentation, que les changements de langues et de direction de sens de lecture sont indiqués.

Indication de langue dans le contenu

Les lecteurs d'écran utilisent les indications de langue pour vocaliser le contenu dans la langue définie. La page doit contenir une définition de langue principale (généralement sur l'élément html).

Ensuite, les éléments de langue étrangère présents dans le contenu doivent être signalés. Si on trouve dans la page des termes absents du dictionnaire de la langue principale de la page, il faut les identifier afin que le lecteur d'écran les restitue dans la langue appropriée. En effet, une mauvaise prononciation pourrait mener à des incompréhensions pour les utilisateurs qui reposent uniquement sur des restitutions orales. Les noms propres sont exclus de cette obligation.

Constats sur le site

on trouve quelques intitulés en anglais dans la page d'accueil (par exemple : "visit us on Facebook") ou des fonctions dans la page Organigramme qui doivent avoir une indication de changement de langue.

Par exemple : <span lang="en">visit us on Facebook</span>.

Une autre option est de traduire ces intitulés ou noms de fonctions dans la langue principale de la page.

Balises utilisées à des fins de présentation

Les éléments de structure HTML 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 sur le site

On trouve dans les pages internes (Contact, Mentions légales, par exemple) quelques textes qui ne sont pas structurés dans des balises sémantiques.

Structuration de l'information

Recommandation

Utiliser des titres, des listes, des abréviations et des citations pour structurer l'information. S'assurer que la structure du document est cohérente.

Titres

Le titrage des contenus est une étape importante dans la structuration des 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 de la page.

Pour valider la structure de votre page, vous pouvez utiliser l'extension Firefox HeadingsMap ou Chrome HeadingsMap. Lorsque l'extension est active, sélectionnez l'onglet « Headings » et vérifiez la cohérence et l'imbrication des titres.

Constats sur le site

La structure de titrage est présente dans les pages, néanmoins il y a quelques manques et erreurs de hiérarchie. Par exemple, dans le pied de page "Guichet Unique PME", les textes "Mum agence de marketing digital" ou "Web hosting / Datacenter" dans la page Mentions légales, doivent être des titres car ils structurent le contenu qui suit.

Listes

La structuration en listes permet aux utilisateurs de lecteurs d'écran de consulter plus rapidement le contenu, grâce à des raccourcis spécifiques, et d'accéder directement à une liste ou de la passer sans avoir à en parcourir tous les items.

Constats sur le site

On trouve dans les pages plusieurs suites de liens (services, réseaux sociaux, etc.) et une suite de noms dans la page Organigramme qui doivent être structurés sous forme de liste non ordonnée.

Structure du document

L'utilisation correcte des balises HTML5 et des landmarks ARIA va permettre d'enrichir la restitution pour les utilisateurs aveugles qui ne perçoivent pas les mises en forme : la navigation principale ne sera plus perçue simplement comme une liste de liens, elle sera restituée à l'utilisateur comme un élément de navigation, par l'intermédiaire du lecteur d'écran qui annoncera « région » ou « repère ».

De plus, ces marqueurs sémantiques vont également constituer des éléments de navigation rapide dans la page. Grâce à un raccourci clavier, certains utilisateurs vont pouvoir naviguer plus rapidement entre les régions qui auront été ainsi identifiées.

Constats sur le site

La structure des pages est présente mais il manque une balise <nav> autour du menu de navigation.

Présentation de l'information

Recommandation

Utiliser des feuilles de styles pour contrôler la présentation de l'information. Vérifier l'effet de l'agrandissement des tailles des caractères sur la lisibilité. S'assurer que les liens sont correctement identifiables, que la prise de focus est signalée, que l'interlignage est suffisant et donner la possibilité à l'utilisateur de contrôler la justification des textes. S'assurer que les textes cachés sont correctement restitués et que l'information n'est pas donnée uniquement par la forme ou la position d'un élément. S'assurer que les contenus sont lisibles et utilisables dans une fenêtre de largeur réduite. Veiller à ce que l'application de paramètres typographiques n'entraîne pas la perte de contenu ou de fonctionnalité. S'assurer que les contenus qui apparaissent au survol et à la prise de focus puissent être contrôlés par l'utilisateur.

Utilisation de CSS exclusivement

Certains utilisateurs qui présentent des troubles de la lecture (personnes dyslexiques par exemple), vont avoir besoin d'adapter la présentation des pages avec leurs propres mises en forme. Cela est possible sans difficulté si le site web utilise exclusivement les feuilles de styles CSS pour réaliser les mises en forme. Cependant, l'utilisation d'attributs et balises HTML de mise en forme rend ces adaptations plus compliquées, sinon impossibles.

Le RAWeb donne la liste des attributs et balises qu'il est interdit d'utiliser.

Constats sur le site

On trouve un attribut de présentation sur le cadre de la carte dans la page Contact.

Contenu compréhensible sans les styles : ordre visible vs ordre réel

Un utilisateur aveugle n'a pas accès à la mise en forme qui parfois est porteuse d'informations importantes, notamment des relations entre les éléments.

Il est important de ne pas implémenter les textes dans l'ordre visuel, mais bien dans l'ordre logique de dépendance et hiérarchie des éléments.

Le contenu doit rester compréhensible sans les feuilles de styles (vous pouvez tester vos contenus en désactivant les feuilles de styles).

Constats sur le site

Dans la page d'accueil, des titres sont insérés dans le code après les contenus qu'ils structurent (par exemple : "Prestations gratuites et sans engagement" est après le texte "Nos prestations sont gratuites et sans engagement, etc." dans le code).

Agrandissement des tailles de texte

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.

Il existe plusieurs méthodes pour contrôler l'agrandissement des caractères :

Constats sur le site

Il est possible d'agrandir les textes sur le site néanmoins, les points décoratifs viennent se superposer aux contenus du pied de page, ce qui les rend illisibles.

Liens dont la nature n'est pas évidente

Un lien dont la nature n'est pas évidente est un lien qui peut être confondu avec un texte normal lorsqu'il est signalé uniquement par la couleur par certains utilisateurs ne percevant pas ou mal les couleurs.

Les personnes déficientes visuelles peuvent ignorer ces liens puisque ceux-ci ne sont pas visuellement discernables du reste du texte dans lequel ils sont insérés.

Constats sur le site

On trouve dans la bannière des cookies et dans le formulaire de contact des liens qui peuvent être confondus avec le texte environnant. L'idéal est de conserver le soulignement natif du lien, sinon le lien doit avoir un rapport de contraste de 3:1 au moins avec le texte environnant (+ soulignement au survol et à la prise de focus).

Visibilité de la prise de focus

Les personnes avec un handicap moteur qui naviguent au clavier peuvent rencontrer des difficultés considérables à utiliser du contenu si elles ne sont pas en mesure de repérer l'indication visuelle du focus et ses déplacements.

Constats sur le site

Sur des éléments des pages Contact, Organisation ou encore formulaire de contact, la visibilité de la prise de focus est désactivée ou n'est pas suffisamment contrastée.

Contenus masqués

Constats sur le site
Dans la page Contact, le cadre de la carte est masqué avec une propriété aria-hidden="true" ce qui la rend inutilisable au contrôle vocal (par exemple).

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 sur le site

Dans le sélecteur de langues, en version mobile, la langue active est uniquement indiquée par une inversion de contrastes. De même, dans les menus des ensembles de pages, la page active est signalée par une bordure mais il n'y a aucune indication dans le code pour transmettre l'information aux utilisateurs aveugles.

Formulaires

Recommandation :

Associer pour chaque formulaire chacun de ses champs à son étiquette, grouper les champs dans des blocs d'informations de même nature, regrouper les items de même nature dans les listes de choix, 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.

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 sur le site

Dans le formulaire de contact, l'indication de champ obligatoire est signalée par un astérisque mais sa signification n'est pas explicitée (phrase visible du type "Les champs précédés d'un * sont obligatoires").

De plus, il manque une explication pour le format d'e-mail attendu et un exemple réel de saisie dans le message d'erreur (ce message est personnalisable, voir validation constraint API, section Implementing a customized error message).

Recommandation :

Faciliter la navigation dans un ensemble de pages par au moins deux systèmes de navigation différents (menu de navigation, plan du site ou moteur de recherche), un fil d'Ariane et l'indication de la page active dans le menu de navigation. Identifier les groupes de liens importants et la zone de contenu et donner la possibilité de les éviter par des liens de navigation interne. S'assurer que l'ordre de tabulation est cohérent et que la page 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.

Systèmes de navigation

Le RAWeb demande qu'un site propose au moins deux systèmes de navigations différents. Prévoir deux systèmes de navigation au moins est important, car :

Par systèmes de navigation, on entend tout procédé permettant une navigation dans le site ou dans une page, parmi :

Note : un moteur de recherche est considéré comme un moyen de navigation s'il indexe toutes les pages du site (y compris les pages de type « Mentions légales » ou « Politique de confidentialité »), et non pas seulement un choix limité (par exemple, seulement les offres tarifaires).

Le plan du site, s’il est présent, doit être représentatif de l’arborescence du site et ne proposer que des liens fonctionnels.

Constats sur le site

Le site ne propose qu'un menu de navigation principal.

Liens d'accès rapide

On note l'absence d'un lien d'accès rapide au contenu au moins. Les liens d'accès rapides sont utiles aux utilisateurs qui naviguent au clavier, mais aussi aux utilisateurs malvoyants qui utilisent une loupe d'écran afin de sauter rapidement les éléments redondants, comme la navigation.

Pour cela, il est préférable que ces liens soient toujours visibles à l'écran. Malgré cela, ces liens peuvent être positionnés hors écran, mais doivent au moins être rendus visibles à la prise de focus.

Il est donc nécessaire d'implémenter au moins un lien d'accès rapide au contenu, qui permet de sauter toute la navigation principale.

Constats sur le site

Aucune des pages du site ne propose un lien d'accès rapide au contenu principal.

Landmarks ARIA

Pour fournir des points de repère aux utilisateurs aveugles, il faudra également implémenter les landmarks ARIA sur les balises HTML 5 de la page.

Constats sur le site

Il manque des landmarks sur les zones de la page :

On note aussi que la balise div conteneur du sélecteur de langue a un role="navigation" inapproprié.

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 est déterminé par l'ordre des éléments dans le code HTML. Il ne suit pas forcément l'ordre de lecture de la page ou de l'écran, mais il doit être cohérent en fonction de la nature des contenus et des fonctionnalités.

Constats sur le site

Au clavier, on tabule dans les liens du sélecteur de langues ou dans des éléments du menu burger (en version zoomée) qui sont visuellement masqués.

Consultation

Recommandation

Vérifier que l'utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques de luminosité, des ouvertures de nouvelles fenêtres 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.

Documents en téléchargement

Assurez-vous que chaque document soit accessible (cf. les Guides de créations de documents bureautiques accessibles), ou qu'il dispose d'une alternative accessible proposant le même contenu (par exemple, une version HTML correctement structurée).

Constats sur le site

On trouve dans la page Téléchargements des documents qui présentent des erreurs d'accessibilité. Par exemple, dans les documents PDF il y a des erreurs de contrastes, des erreurs d'ordre de lecture, une absence de structure de titrage ou pour les tableaux, etc.