Recommandations pour www.lamy-immobilier.fr

178
Erreurs total
0
Erreurs corrigées

Notes correctives

L’audit du site fait remonter de nombreux problèmes bloquants pour les utilisateurs. Des thématiques principales se dessinent :

la charte graphique
les formulaires
les motifs de conception ARIA
les alternatives des images

La charte graphique

Les couleurs de la charte graphique du site posent des problèmes. Beaucoup de textes ne peuvent être perçus par les utilisateurs daltoniens ou mal-voyants par manque de contraste. Quasiment toutes les pages sont à revoir sous cet aspect. Le rapport de contraste attendu entre le texte et le fond varie en fonction de la taille et de la graisse du texte. Vous pouvez vous référer aux tests du critère 3.2 du RGAA qui exposent les attendus.

Si la modification des couleurs pose un problème vis-à-vis de la cohérence de la charte graphique de la marque, il est possible de mettre en place un mécanisme permettant de renforcer les contrastes à la demande (un thème plus contrasté activé par l’utilisateur). Cette solution requiert néanmoins souvent plus de travail que de modifier les couleurs.

Les formulaires

Le site a de très nombreux formulaires et ils sont plutôt très clairs et bien pensés. Le développement de formulaires accessibles nécessite néanmoins quelques ajustements qui peuvent être plus ou moins délicats. Les utilisateurs impactés sont très nombreux, utilisateurs aveugles, grand-malvoyants, handicapés mentaux, atteints de troubles “dys”, handicapés physiques… Les règles à suivre sont donc très strictes. Le travail à réaliser ici est essentiellement du côté des développeurs.

Les motifs de conception ARIA

Les développeurs connaissent souvent l’existence des design patterns car ils sont enseignés en école d’ingénieur. C’est rarement le cas des motifs de conception ARIA qui font pourtant pleinement partie de l’obligation réglementaire d’accessibilité. Au-delà de l’aspect légal, ce sont des dizaines de milliers d’utilisateurs qui pâtissent de leur absence dans les sites web. Ces motifs de conception permettent aux utilisateurs de lecteur d’écran (personnes aveugles ou grand-malvoyant), et plus largement tous les utilisateurs qui naviguent au clavier, d’utiliser les composants interactifs de votre site web de manière satisfaisante. Carrousels, cases à cocher, boutons radio, autocompletion, fenêtres modales… s’ils ne sont pas correctement implémentés, ils peuvent être tout simplement inutilisables.

À ce jour, un utilisateur qui navigue au clavier ne peut pas utiliser votre site. Cela concerne beaucoup de monde.

Les alternatives des images

Au regard de l’accessibilité, seules les images porteuses d’information doivent avoir une alternative textuelle renseignée. Si ces images n’en ont pas, l’information ne pourra pas être perçue par les utilisateurs aveugles par exemple. Aussi, il est essentiel de s’interroger sur l’information transmise par l’image, et si cette information est essentielle et n’est pas présente dans un texte accolé, il faut l’indiquer dans l’alternative de l’image.

Dans les faits, l’immense majorité des images sont des images de décorations, c’est-à-dire qu’elles ne véhicule aucune information particulière par rapport au contenu auquel elle est associée. Ces images, si elles ont une alternative textuelle, deviennent alors un fardeau pour les utilisateurs de lecteur d’écran. Cela rend la navigation très laborieuse et complexifie la structuration mentale de l’information.

Sur votre site, de nombreux visuels de décoration ont une alternative textuelle. Il est essentiel de laisser cette alternative vide.

MAIS

D’une part, lorsque les visuels sont inclus dans un carrousel, un label générique peut être nécessaire (par exemple “Image 3 sur 8”) et une alternative décrivant l’image peut être intéressante (par exemple “Image 3 sur 8 - chambre à coucher avec cheminée”).

D’autre part, certains prestataires SEO insistent pour que toutes les images aient une alternative pour améliorer le référencement. Cet article récent peut permettre, le cas échéant, d’éclairer les choix de mise en œuvre de solutions qui conviennent à tous.

Vidéos

J’ajoute une thématique à la liste pour parler des vidéos sur le site. Vous produisez des vidéos de qualité avec une attention particulière donnée à l’accessibilité, notamment en ajoutant des sous-titres. L’accessibilité des vidéos est un sujet qui peut demander des moyens très importants car de très nombreux utilisateurs sont impactés lorsqu’elle n’est pas mise en œuvre.

Aussi, l’effort demandé pour la mise en accessibilité totale des vidéos peut être disproportionné vis-à-vis de vos moyens humains et financiers. Il est alors possible d’échelonner cette mise en accessibilité et d’ignorer certaines non-conformités vis-à-vis du RGAA en mettant en place une dérogation.

À mon sens, un point crucial d’amélioration est la mise en place de transcriptions textuelles . Les sous-titres sont incrustés dans la vidéo, et ils ne reprennent pas les textes écrits et non vocalisés. Un utilisateur aveugle ne pourra pas lire ces textes. Par ailleurs, de nombreux utilisateurs, même voyants, préfèrent la consultation d’une transcription textuelle à une vidéo.

Cette transcription pourrait être invisible par défaut et accessible via un bouton adjacent à la vidéo.

Erreurs à corriger

Erreurs par lots de livraison - 29 erreurs sélectionnées

Lot 1 :: corrigées 0/29
Intitulé	Page	Bloc	Critère
Couleurs (3.3) ❌ Le contraste du bouton d’ouverture de la fenêtre modale du choix des cookies n’est pas suffisant (2.32:1) ➡️ Augmenter le contraste pour parvenir à 3:1 minimum	Éléments transverses	Bandeau cookies	3.3 du RGAA
Scripts (7.1) ❌ Le bandeu cookies doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) ➡️ Le focus doit être capturé dans le contenu du bandeau lorsqu’il est ouvert ➡️ Les attributs et rôles ARIA ainsi que les comportements attendus doivent être implémentés	Éléments transverses	Bandeau cookies	7.1 du RGAA
Présentation (10.7) ❌ La prise de focus sur les boutons et les cases à cocher dans le bandeau cookies n’est pas visible. ➡️ Augmenter le rapport de contraste pour parvenir à 3:1 minimum.	Éléments transverses	Bandeau cookies	10.7 du RGAA
Navigation (12.8) ❌ Le choix de l’utilisation des cookies est préalable à la consultation de la page, le bandeau doit être le premier élément dans l’ordre du code.	Éléments transverses	Bandeau cookies	12.8 du RGAA
Consultation (13.1) ❌ Dans le bandeau de cookies, la limite de temps présente dans l’écran de description des cookies fonctionnels est très difficilement contrôlable par un utilisateur au clavier. ➡️ Supprimer la limite de temps ou rallonger fortement le délai.	Éléments transverses	Bandeau cookies	13.1 du RGAA
Structuration (9.2) ❌ Le fil d’Ariane n’est pas structuré par un élément `<nav>` ➡️ Structurer le fil d’Ariane par un élément `<nav role="navigation" aria-label="Fil d’Ariane">`	Éléments transverses	Fil d’Ariane	9.2 du RGAA
Couleurs (3.2) ❌ Le contraste des liens présents en pieds de page n’est pas suffisant (4.19:1) ➡️ Augmenter le contraste pour parvenir à 4.5	Éléments transverses	Footer	3.2 du RGAA
Couleurs (3.3) ❌ Le contraste des liens vers les réseaux sociaux est de 2.32:1 ➡️ Augmenter le contraste pour parvenir à 3:1 a minima	Éléments transverses	Footer	3.3 du RGAA
Structuration (9.3) ❌ Les liens vers les réseaux sociaux dans le pied de page ne sont pas compris dans une liste. ➡️ Structurer les liens dans une liste `<ul><li>`	Éléments transverses	Footer	9.3 du RGAA
Structuration (9.3) - 4 ❌ Les liens de la dernière section du pied de page ne sont pas compris dans une liste. ➡️ Structurer les liens dans une liste `<ul><li>`	Éléments transverses	Footer	9.3 du RGAA
Navigation (12.6) ❌ Les zones principales n’ont pas de landmark ➡️ Ajouter l’attribut `role="banner"` sur la zone d’en-tête du site `<header>` ➡️ Ajouter l’attribut `role="main"` sur la zone de contenu principal `<main>` ➡️ Ajouter l’attribut `role="contentinfo"` sur la zone de pied de page `<footer>`	Éléments transverses	Landmarks	12.6 du RGAA
Navigation (12.7) ❌ Le site ne dispose pas de liens d’accès rapide. ➡️ Ajouter des liens d’accès rapide au site, a minima vers la zone de contenu princpal `<main>` ➡️ Ce lien (ou ces liens) peut être caché par défaut et doit apparaître à la prise de focus ➡️ Il doit être le premier élément à recevoir le focus après le bandeau de cookies lorsque le choix des utilisateurs n’a pas été encore défini.	Éléments transverses	Liens d’évitement	12.7 du RGAA
Images (1.2) ❌ Le logo présent dans le menu mobile lorsqu’il est ouvert ne doit pas avoir d’alternative textuelle ➡️ Supprimer le contenu de l’attribut `alt`	Éléments transverses	Menu mobile	1.2 du RGAA
Liens (6.1) ❌ Dans le menu mobile, l’alternative du logo est “Llamy” rendant la vocalisation par lecteur d’écran perturbante.	Éléments transverses	Menu mobile	6.1 du RGAA
Scripts (7.1) ❌ Le menu mobile doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) et être contrôlable au clavier. ➡️ Les boutons burger et close doivent être des boutons avec un intitulé perceptible par les technologies d’assistance (par ex. aria-label) ➡️ Gestion du piège de focus ➡️ Focus sur le bouton fermer à l’ouverture ➡️ Gestion du scroll dans le menu ➡️ Gestion de l’arrêt du scroll sur la page en fond ➡️ Attributs aria et sémantique	Éléments transverses	Menu mobile	7.1 du RGAA
Scripts (7.1) - 4 ❌ [Bloquant] {Menu mobile} Les sous-menu du menu mobile doivent implémenter le motif de conception ARIA Modal	Éléments transverses	Menu mobile	7.1 du RGAA
Images (1.2) ❌ Les images dans les sous-menus (à l’exclusion de l’image Vacances) ne doivent pas avoir d’alternative textuelle ➡️ Supprimer l’alternative textuelle, par ex. : `alt=""`	Éléments transverses	Menu	1.2 du RGAA
Couleurs (3.2) ❌ Le contraste des liens orange En savoir plus dans les sous-menus n’est pas suffisant (2.77:1) ➡️ Augmenter le contraste pour parvenir à 4.5	Éléments transverses	Menu	3.2 du RGAA
Couleurs (3.2) - 3 ❌ Le lien Espace client dans le menu et le menu mobile n’offre pas un rapport de contraste suffisant. ➡️ Augmenter le contraste pour parvenir à 4.5:1 a minima	Éléments transverses	Menu	3.2 du RGAA
Liens (6.1) ❌ L’image du sous-menu Vacances est porteuse d’information, cette information doit apparaître dans l’intitulé du lien ➡️ Ajouter une alternative textuelle(Ex. `alt="-15 % sur nos locations à la montagne"`)	Éléments transverses	Menu	6.1 du RGAA
Structuration (9.2) ❌ La navigation principale n’est pas structurée par un élément `<nav>` ➡️ Structurer la navigation principale à l’aide d’un élément `<nav role="navigation" aria-label="Menu principal">`	Éléments transverses	Menu	9.2 du RGAA
Structuration (9.3) ❌ Les liens Trouver une agence, Le guide immo et Espace client dans le menu principal ne sont pas structurés par une liste. ➡️ Structurer les liens dans une liste `<ul><li>`	Éléments transverses	Menu	9.3 du RGAA
Structuration (9.3) - 7 ❌ Les liens présents dans les sous-menu ne sont pas structurés par des listes ➡️ Structurer les listes de lien dans les sous-menus par des listes `<ul><li>` ➡️ Pour des raisons pratiques, même lorsque le sous-menu ne comprend qu’un lien, il peut être compris dans une liste	Éléments transverses	Menu	9.3 du RGAA
Présentation (10.13) ❌ Les sous-menus ne sont pas contrôlables par l’utilisateur ➡️ Permettre la fermeture des sous-menus par l’appui de la touche `Echap`	Éléments transverses	Menu	10.13 du RGAA
Navigation (12.8) ❌ Dans le menu principal, les items de premier niveau contenant des sous-menus ne reçoivent pas le focus. ➡️ Ces items de menu doivent être des boutons ou implémenter le motif ARIA Button ➡️ Implémenter le motif de conception ARIA Disclosure pour les sous-menus ( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ )	Éléments transverses	Menu	12.8 du RGAA
Navigation (12.1) ❌ Le site ne dispose que d’un système de navigation ➡️ Créer une page Plan du site	Éléments transverses	Navigation	12.1 du RGAA
Couleurs (3.2) ❌ Le texte “Nos agences immobilières vous accueillent” offre un rapport de contraste de 3.28:1 au lieu de 4.5:1 ➡️ Augmenter le rapport de contraste	Éléments transverses	Trouvez votre agence	3.2 du RGAA
Scripts (7.1) ❌ Le système d’autocomplétion du module recherche d’agence n’est pas compatible avec les technologies d’assistance ➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )	Éléments transverses	Trouvez votre agence	7.1 du RGAA
Formulaires (11.1) ❌ Dans le formulaire de recherche d’agence, le champs de saisie n’a pas d’étiquette. ➡️ Ajouter une étiquette via l’élément `<label>`	Éléments transverses	Trouvez votre agence	11.1 du RGAA

Liste des pages auditées

Éléments transverses - 29 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr

Menu mobile - 4 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

Le logo présent dans le menu mobile lorsqu’il est ouvert ne doit pas avoir d’alternative textuelle

➡️ Supprimer le contenu de l’attribut alt

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Éléments transverses Menu mobile Images (1.2)

☐ Liens (6.1) moindre: Dans le menu mobile, l’alternative du logo est “Llamy” rendant la vocalisation par lecteur d’écran perturbante.; Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ Scripts (7.1) critique

Le menu mobile doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) et être contrôlable au clavier.

➡️ Les boutons burger et close doivent être des boutons avec un intitulé perceptible par les technologies d’assistance (par ex. aria-label)
➡️ Gestion du piège de focus
➡️ Focus sur le bouton fermer à l’ouverture
➡️ Gestion du scroll dans le menu
➡️ Gestion de l’arrêt du scroll sur la page en fond
➡️ Attributs aria et sémantique

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Scripts (7.1) - 4 critique: [Bloquant] {Menu mobile} Les sous-menu du menu mobile doivent implémenter le motif de conception ARIA Modal; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Menu - 9 erreurs recensées sur ce bloc

☐ Images (1.2) important

Les images dans les sous-menus (à l’exclusion de l’image Vacances) ne doivent pas avoir d’alternative textuelle

➡️ Supprimer l’alternative textuelle, par ex. : alt=""

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Éléments transverses Menu Images (1.2)

☐ Couleurs (3.2) important

Le contraste des liens orange En savoir plus dans les sous-menus n’est pas suffisant (2.77:1)

➡️ Augmenter le contraste pour parvenir à 4.5

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Éléments transverses Menu Couleurs (3.2)

☐ Couleurs (3.2) - 3 important

Le lien Espace client dans le menu et le menu mobile n’offre pas un rapport de contraste suffisant.

➡️ Augmenter le contraste pour parvenir à 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Éléments transverses Menu Couleurs (3.2) - 3

☐ Liens (6.1) important

L’image du sous-menu Vacances est porteuse d’information, cette information doit apparaître dans l’intitulé du lien

➡️ Ajouter une alternative textuelle(Ex. alt="-15 % sur nos locations à la montagne")

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ Structuration (9.2) important

La navigation principale n’est pas structurée par un élément <nav>

➡️ Structurer la navigation principale à l’aide d’un élément <nav role="navigation" aria-label="Menu principal">

Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.

☐ Structuration (9.3) important

Les liens Trouver une agence, Le guide immo et Espace client dans le menu principal ne sont pas structurés par une liste.

➡️ Structurer les liens dans une liste <ul><li>

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Éléments transverses Menu Structuration (9.3)

☐ Structuration (9.3) - 7 important

Les liens présents dans les sous-menu ne sont pas structurés par des listes

➡️ Structurer les listes de lien dans les sous-menus par des listes <ul><li>
➡️ Pour des raisons pratiques, même lorsque le sous-menu ne comprend qu’un lien, il peut être compris dans une liste

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Éléments transverses Menu Structuration (9.3) - 7

☐ Présentation (10.13) important

Les sous-menus ne sont pas contrôlables par l’utilisateur

➡️ Permettre la fermeture des sous-menus par l’appui de la touche Echap

Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur (hors cas particuliers) ?
Critère : 10.13 du RGAA 4.1.2.

☐ Navigation (12.8) critique

Dans le menu principal, les items de premier niveau contenant des sous-menus ne reçoivent pas le focus.

➡️ Ces items de menu doivent être des boutons ou implémenter le motif ARIA Button
➡️ Implémenter le motif de conception ARIA Disclosure pour les sous-menus ( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ )

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Footer - 4 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le contraste des liens présents en pieds de page n’est pas suffisant (4.19:1)

➡️ Augmenter le contraste pour parvenir à 4.5

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Éléments transverses Footer Couleurs (3.2)

☐ Couleurs (3.3) important

Le contraste des liens vers les réseaux sociaux est de 2.32:1

➡️ Augmenter le contraste pour parvenir à 3:1 a minima

Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Critère : 3.3 du RGAA 4.1.2.

Éléments transverses Footer Couleurs (3.3)

☐ Structuration (9.3) important

Les liens vers les réseaux sociaux dans le pied de page ne sont pas compris dans une liste.

➡️ Structurer les liens dans une liste <ul><li>

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Éléments transverses Footer Structuration (9.3)

☐ Structuration (9.3) - 4 important

Les liens de la dernière section du pied de page ne sont pas compris dans une liste.

➡️ Structurer les liens dans une liste <ul><li>

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Éléments transverses Footer Structuration (9.3) - 4

Trouvez votre agence - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le texte “Nos agences immobilières vous accueillent” offre un rapport de contraste de 3.28:1 au lieu de 4.5:1

➡️ Augmenter le rapport de contraste

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Éléments transverses Trouvez votre agence Couleurs (3.2)

☐ Scripts (7.1) important

Le système d’autocomplétion du module recherche d’agence n’est pas compatible avec les technologies d’assistance

➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Éléments transverses Trouvez votre agence Scripts (7.1)

☐ Formulaires (11.1) important

Dans le formulaire de recherche d’agence, le champs de saisie n’a pas d’étiquette.

➡️ Ajouter une étiquette via l’élément <label>

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Éléments transverses Trouvez votre agence Formulaires (11.1)

Bandeau cookies - 5 erreurs recensées sur ce bloc

☐ Couleurs (3.3) important

Le contraste du bouton d’ouverture de la fenêtre modale du choix des cookies n’est pas suffisant (2.32:1)

➡️ Augmenter le contraste pour parvenir à 3:1 minimum

Éléments transverses Bandeau cookies Couleurs (3.3)

☐ Scripts (7.1) important

Le bandeu cookies doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ )

➡️ Le focus doit être capturé dans le contenu du bandeau lorsqu’il est ouvert
➡️ Les attributs et rôles ARIA ainsi que les comportements attendus doivent être implémentés

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Présentation (10.7) critique

La prise de focus sur les boutons et les cases à cocher dans le bandeau cookies n’est pas visible.

➡️ Augmenter le rapport de contraste pour parvenir à 3:1 minimum.

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Éléments transverses Bandeau cookies Présentation (10.7)

☐ Navigation (12.8) important: Le choix de l’utilisation des cookies est préalable à la consultation de la page, le bandeau doit être le premier élément dans l’ordre du code.; Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

☐ Consultation (13.1) important

Dans le bandeau de cookies, la limite de temps présente dans l’écran de description des cookies fonctionnels est très difficilement contrôlable par un utilisateur au clavier.

➡️ Supprimer la limite de temps ou rallonger fortement le délai.

Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?
Critère : 13.1 du RGAA 4.1.2.

Éléments transverses Bandeau cookies Consultation (13.1)

Fil d’Ariane - 1 erreurs recensées sur ce bloc

☐ Structuration (9.2) important

Le fil d’Ariane n’est pas structuré par un élément <nav>

➡️ Structurer le fil d’Ariane par un élément <nav role="navigation" aria-label="Fil d’Ariane">

Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.

Navigation - 1 erreurs recensées sur ce bloc

☐ Navigation (12.1) important

Le site ne dispose que d’un système de navigation

➡️ Créer une page Plan du site

Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?
Critère : 12.1 du RGAA 4.1.2.

Landmarks - 1 erreurs recensées sur ce bloc

☐ Navigation (12.6) moindre

Les zones principales n’ont pas de landmark

➡️ Ajouter l’attribut role="banner" sur la zone d’en-tête du site <header>
➡️ Ajouter l’attribut role="main" sur la zone de contenu principal <main>
➡️ Ajouter l’attribut role="contentinfo" sur la zone de pied de page <footer>

Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’ en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche ) peuvent-elles être atteintes ou évitées ?
Critère : 12.6 du RGAA 4.1.2.

Liens d’évitement - 1 erreurs recensées sur ce bloc

☐ Navigation (12.7) important

Le site ne dispose pas de liens d’accès rapide.

➡️ Ajouter des liens d’accès rapide au site, a minima vers la zone de contenu princpal <main>
➡️ Ce lien (ou ces liens) peut être caché par défaut et doit apparaître à la prise de focus
➡️ Il doit être le premier élément à recevoir le focus après le bandeau de cookies lorsque le choix des utilisateurs n’a pas été encore défini.

Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ?
Critère : 12.7 du RGAA 4.1.2.

Page d'accueil - 20 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr

Contenu principal - 1 erreurs recensées sur ce bloc

☐ Images (1.2) important

La quasi totalité des images de la page sont des images de décoration et beaucoup ont une alternative.

➡️ Supprimer le contenu de l’attribut alt pour toutes les images de décoration de la page (y compris les images des annonces)

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Annonces - 3 erreurs recensées sur ce bloc

☐ Images (1.3) critique

L’image de carte de l’annonce du parking/box de Fontenay sous bois offre des indications du lieu de l’annonce qui ne sont pas présentes dans l’alternative textuelle ou dans le texte associé.

➡️ Modifier le contenu de l’attribut alt. Ex. : alt="À proximité de l’arrêt de métro Château de Vincennes et du Centre aquatique Le Dôme de Vincennes"

Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Critère : 1.3 du RGAA 4.1.2.

Page d'accueil Annonces Images (1.3)

☐ Couleurs (3.2) important

Les textes en gris clair et violet clair dans les annonces ne sont pas suffisamment contrastés.

➡️ Augmenter le rapport de contraste à 4.5:1 au minimum.

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page d'accueil Annonces Couleurs (3.2)

☐ Présentation (10.3) important

Les annonces immobilières ne sont pas compréhensibles lorsque les feuilles de style sont desactivées.

➡️ Mettre le nom de l’annonce en titre (niveau 3)
➡️ Ce titre doit être le premier élément dans l’ordre du code, les autres éléments (prix, lieux, images…) arrivent ensuite
➡️ Utiliser css pour ajuster les styles Ex.

Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

Code modifié

<div class="estate-item__text">
    <a class="estate-item__link" href="...">
        <h3 class="estate-item__infos">Appartement · 3 pièces · 62m²</h3>
        <div class="estate-item__price">
            <p class="price-for-map">236 000 € </p>
        </div>
        <p class="estate-item__location">Toulouse (31500)</p>
    </a>
</div>

Titre - 2 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le titre “Simplifiez vos projets immobiliers” offre un rapport de contraste insuffisant.

➡️ Augmenter le rapport de contraste entre le texte et l’arrière-plan pour obtenir au minimum 3:1.

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page d'accueil Titre Couleurs (3.2)

☐ Présentation (10.11) critique: Le titre de la page n’est plus lisible lorsque la page est affichée dans une fenêtre de largeur 320px.; Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?
Critère : 10.11 du RGAA 4.1.2.

Acheter/Louer - 6 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Les boutons Acheter/Louer lorsqu’ils sont en arrière plan sont insiffisamment contrastés.

➡️ Augmenter le contraste pour parvenir à 3:1

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page d'accueil Acheter/Louer Couleurs (3.2)

☐ Scripts (7.1) critique

Les onglets de la section Acheter/Louer ne sont pas compatibles avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Tabs ( https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Page d'accueil Acheter/Louer Scripts (7.1)

☐ Scripts (7.1) - 3 critique

Les cases à cocher de la section Acheter/Louer ne sont pas compatibles avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Checkbox ( https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ )
➡️ Attention à l’ordre du focus, les cases à cocher doivent prendre le focus avant le bouton Rechercher.

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Scripts (7.1) - 4 important

Le système d’autocomplétion de la section Acheter/Louer n’est pas compatible avec les technologies d’assistance

➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Formulaires (11.5) important

Dans la section Acheter/Louer, les cases à cocher doivent être regroupées.

➡️ Regrouper les cases à cocher à l’aide d’un élément fieldset
➡️ Ajouter une légende pour ce regroupement avec l’élément <legend> Exexmple:

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

Code modifié

<fieldset>
  <legend>Type de bien</legend>
  [Champs….]
 </fieldset>

Page d'accueil Acheter/Louer Formulaires (11.5)

☐ Formulaires (11.10) important

Le caractère obligatoire du champ localisation n’est pas indiqué

➡️ Ajouter une indication du caractère obligatoire pour le champ dans le label Exemple : Localisation (obligatoire) ⚠️ L’utilisation de l’astérisque dans un label implique qu’une légende précède le formulaire pour indiquer le lien entre l’astérisque et le caractère obligatoire de saisie.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Page d'accueil Acheter/Louer Formulaires (11.10)

Push - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Dans le lanceur Tous en piste, le texte offre un rapport de contraste de 4.19:1 au lieu de 4.5:1 minimum.

➡️ Augmenter le rapport de contraste.

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page d'accueil Push Couleurs (3.2)

☐ Couleurs (3.2) - 2 critique

Dans le lanceur Déjà 3500 logements accompagnés, le texte en image et le texte ne sont pas lisibles.

➡️ Augmenter le rapport de contraste pour les textes de l’image et le texte du lanceur (qu’il chevauche l’image ou non). Le rapport de contraste attendu est de 3:2 pour le texte sur l’image (texte en gras dont la taille est supérieure à 18,5px) et 4.5:1 pour le texte du lanceur.

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page d'accueil Push Couleurs (3.2) - 2

☐ Liens (6.1) important

L’attribut title des liens des lanceurs concernant les vacances et l’éco-rénovation doit contenir le nom accessible du lien.

➡️ Supprimer l’attribut title ou lui ajouter le nom accessible. Ex. : title="Je veux en savoir plus – page éco rénover ma copropriété"

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

Solutions - 2 erreurs recensées sur ce bloc

☐ Liens (6.1) moindre

Les images dans les liens de la section Nos solutions doivent avoir une alternative vide.

➡️ Supprimer le contenu de l’attribut alt des pictogrames.

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

Page d'accueil Solutions Liens (6.1)

☐ Structuration (9.3) moindre

Les liens dans la section solutions ne sont pas structurés dans un liste.

➡️ Structurer les liens par une liste non ordonnée.

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Page d'accueil Solutions Structuration (9.3)

Contenu - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9) moindre

Des paragraphes vides utilisés pour créer des espaces sont présents sur la page.

➡️ Supprimer les paragraphes vides et utiliser css pour ajuster les styles. Des paragraphes vides se trouvent dans le lanceur Cet hiver, tous en piste !, sous certains titres (ex. Nos annonces à la vente), dans la FAQ…

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Page d'accueil Contenu éléments obligatoires (8.9)

Focus - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

Le focus n’est pas visibles sur certains boutons (lanceurs, FAQ).

➡️ Laisser le style natif du navigateur ou définissez un style de focus visible (contraste de 3:1)

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Page d'accueil Focus Présentation (10.7)

Carrousels - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

Les boutons de contrôle des carrousels ne reçoivent pas le focus.

➡️ Implémenter le motif de conception Carousel pour tous les carrousels de la page ( https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ ) ➡️ Structuration des éléments ➡️ Implémentations ARIA (rôles, attributs) ➡️ Nommage ➡️ Interactions clavier

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page nous contacter - 4 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/nous-contacter

Contenu - 3 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

L’image de décoration dans le bloc Vous êtes client ne doit pas avoir d’alternative

➡️ Supprimer le contenu de l’attribut alt

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Page nous contacter Contenu Images (1.2)

☐ éléments obligatoires (8.9) moindre

Un paragraphes vide est utilisés pour créer des espaces dans la section Vous êtes client.

➡️ Supprimer les paragraphes vides et utiliser css pour ajuster les styles.

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Page nous contacter Contenu éléments obligatoires (8.9)

☐ éléments obligatoires (8.9) - 3 moindre

Le texte de l’encart Louer un logement dans la mosaïque de liens ne devrait pas être un titre.

➡️ Utiliser un élément <p>

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Page nous contacter Contenu éléments obligatoires (8.9) - 3

Projet - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Dans la mosaïque de liens vers les formulaires, les textes et liens en violet sur fons bleu-vert ne sont pas suffisamment contrastés (4.19:1), idem pour ceux en blanc sur fond orange (3.28:1)

➡️ Augmenter le contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page nous contacter Projet Couleurs (3.2)

Page Mentions légales - 6 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/mentions-legales

Liste des cookies - 2 erreurs recensées sur ce bloc

☐ Tableaux (5.4) important

Le titre du tableau de liste des cookies n’est pas correctement associé au tableau.

➡️ Utiliser l’élément <caption> pout le titre du tableau

Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
Critère : 5.4 du RGAA 4.1.2.

Code modifié

<table>
  <caption>Liiste des cookies présents sur le site</caption>
  <tr>….

☐ Tableaux (5.6) important

Les en-têtes du tableau de liste des cookies ne sont pas correctement déclarées.

➡️ Identifiez les en-têtes avec l’élément <th scope="col">

Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ?
Critère : 5.6 du RGAA 4.1.2.

Contenu - 4 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.7) important

Le terme hacking ainsi que des parapraphes sont écrits en langue anglaise ne sont pas indiqués.

➡️ Utiliser l’attribut lang="en" pour indiquer le changement de langue.

Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
Critère : 8.7 du RGAA 4.1.2.

Page Mentions légales Contenu éléments obligatoires (8.7)

☐ éléments obligatoires (8.9) moindre

Des paragraphes vides sont utilisés pour créer des espaces.

➡️ Supprimer ces paragraphes vides et utiliser css.

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Page Mentions légales Contenu éléments obligatoires (8.9)

☐ Structuration (9.1) important

Le contenu de la page n’est pas structurée par des titres.

➡️ Utiliser des titres h2, h3, etc. pour structurer l’information

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Critère : 9.1 du RGAA 4.1.2.

Page Mentions légales Contenu Structuration (9.1)

☐ Structuration (9.3) important: Certaines listes ne sont pas correctement structurées.; Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Page Mentions légales Contenu Structuration (9.3)

Page builder 1 - 3 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/acheter/acheter-un-bien/reussir-son-achat-immobilier

Contenu - 2 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

Toutes les images de la page hors éléments transverses sont des images de décoration et certaines ont une alternative textuelle.

➡️ Supprimer le contenu de l’attribut alt

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Page builder 1 Contenu Images (1.2)

☐ Structuration (9.4) important

Dans le bloc Votre avis nous est précieux, la citation n’est pas correctement indiquée

➡️ Utiliser un élément <blockquote> pour structurer le texte

Dans chaque page web, chaque citation est-elle correctement indiquée ?
Critère : 9.4 du RGAA 4.1.2.

Page builder 1 Contenu Structuration (9.4)

Accordéons - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

Le focus n’est pas visibles sur les boutons des accordéons

➡️ Laisser le style natif du navigateur ou définissez un style de focus visible (contraste mnimum de 3:1)

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Page builder 1 Accordéons Présentation (10.7)

Page builder 2 - 12 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/eco-renover/reussir-son-eco-renovation

Contenu - 4 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

L’image IMPACT n’a pas besoin d’alternative textuelle, l’information portée est également dans le texte adjacent.

➡️ Supprimer le contenu de l’attribut alt

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

☐ éléments obligatoires (8.9) moindre

Le texte du lanceur FAQ n’est pas compris dans un paragraphe.

➡️ Utiliser un élément <p>

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

☐ Structuration (9.1) moindre

Les textes des solutions ne devraient pas être des titre de niveau 5

➡️ Utiliser des éléments <p>

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Critère : 9.1 du RGAA 4.1.2.

Page builder 2 Contenu Structuration (9.1)

☐ Présentation (10.7) important

Le focus sur les liens sur fond rouge n’est pas visible.

➡️ Utiliser le style natif ou ajuster la prise de focus pour qu’elle soit visible (ratio de contraste égal ou supérieur à 3:1).

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Vidéo - 1 erreurs recensées sur ce bloc

☐ Cadres (2.1) important

Les cadres servant les vidéos n’ont pas de titre

➡️ Ajouter un titre avec l’attribut title (ex. : title="vidéo")

Chaque cadre a-t-il un titre de cadre ?
Critère : 2.1 du RGAA 4.1.2.

Couleurs - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le titre de la page n’est pas suffisamment contrasté (max. 2.32:1 au lien de min. 3:1).

➡️ Augmenter le rapport de contraste

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page builder 2 Couleurs Couleurs (3.2)

Vidéos - 3 erreurs recensées sur ce bloc

☐ Multimédia (4.1) important

Les vidéos ne disposent pas de transcription textuelle.

➡️ Ajouter une transcription textuelle. Cette transcription peut être masquée par défaut et affichée via un bouton adjacent à la vidéo.

Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?
Critère : 4.1 du RGAA 4.1.2.

☐ Multimédia (4.7) important

Les vidéos ne sont pas clairement identifiée.

➡️ Ajouter un texte avant ou après la vidéo permettant de l’identifier (ex. “Vidéo : présentation d’IMPACT”).

Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
Critère : 4.7 du RGAA 4.1.2.

☐ Présentation (10.1) important

Des attributs interdits sont utilisés sur les cadres des vidéos (width, height, frameborder).

➡️ Supprimer les attributs et utiliser css pour ajuster les styles.

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

Vidéo travaux - 1 erreurs recensées sur ce bloc

☐ Multimédia (4.5) important

La vidéo au sujet des travaux de rénovation nécessite une audiodescription.

➡️ Ajouter une audiodescription.

Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ?
Critère : 4.5 du RGAA 4.1.2.

Vidéo IMPACT - 2 erreurs recensées sur ce bloc

☐ Présentation (10.4) critique

La vidéo IMPACT n’est pas visible lorsque le zoom est à 200 %.

➡️ Ajuster la taille de la vidéo avec css.

Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200 %, au moins (hors cas particuliers) ?
Critère : 10.4 du RGAA 4.1.2.

☐ Présentation (10.11) critique

La vidéo IMPACT n’est pas visible lorsque la fenêtre a une largeur de 320px.

➡️ Ajuster la taille de la vidéo avec css.

Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?
Critère : 10.11 du RGAA 4.1.2.

Page store locator 1 - 5 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/nos-agences-immobilieres

En-tête - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important: Le texte blanc sur fond bleu-vert n’est pas lisible. Augmenter le contraste pour parvenir à 3:1 minimum pour le titre et à 4.5:1 pour le texte.; Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page store locator 1 En-tête Couleurs (3.2)

Recherche - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.3) important

Le rapport de contraste entre le champ de saisie et le fond n’est pas suffisant (2.21:1 ou 2.32:1).

➡️ Augmenter le contraste pour parvenir à 3:1 minimum ou ajouter une bordure.

☐ Scripts (7.1) important

Le module d’autocomplétion du champ de recherche n’est pas compatible avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Formulaires (11.1) important

Le champ de saisie de la recherche n’a pas d’étiquette.

➡️ Ajouter une étiquette avec l’élément <label>ou un attribut titleau champ de saisie (l’attribut title doit également reprendre le contenu du placeholder ex. `title=“Localisation (ville, code postal, département ou région)”).

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Agences - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3) important

Les listes de liens ne sont pas correctement imbriquées.

➡️ Intégrer les <ul> de second niveau dans le <li> englobant. Exemple :

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Code modifié

<ul class="agencies-folder__list">
     <li>
           <a href="..." class="agencies-folder__department">Alpes-de-Haute-Provence 04</a>
            <ul>
                   [… les li des agences]
            </ul>
     </li>
     […]

Page store locator 2 - 10 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/nos-agences-a-proximite

Fiches agences - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Les rapports de contraste pour le label Ouvert et la note d’évaluation des fiches d’agences ne sont pas suffisants.

➡️ Augmenter le contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page store locator 2 Fiches agences Couleurs (3.2)

☐ Liens (6.1) moindre: Dans les liens des fiches agences, mettre le nom de l’agence en premier dans l’ordre du code, puis l’adresse, puis les autres informations.; Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ éléments obligatoires (8.9) important

L’évaluation de l’agence et le label ouvert/fermé sont structurés par des <div> ou des <span>

➡️ Utiliser des éléments <p>

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Recherche - 2 erreurs recensées sur ce bloc

☐ Scripts (7.1) important

Le module d’autocomplétion du champ de recherche n’est pas compatible avec les technologies d’assistance (implémentation ARIA, interactions clavier).

➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Formulaires (11.1) important

Le champ de saisie de la recherche n’a pas d’étiquette.

➡️ Ajouter une étiquette avec l’élément <label>ou un attribut titleau champ de saisie.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Carte interactive - 3 erreurs recensées sur ce bloc

☐ Scripts (7.1) important

Bien que la carte interactive fasse l’objet d’une dérogation, un lien d’évitement ou un système de désactivation du composant doit être mis en place.

➡️ Ajouter un lien d’évitement avant le module de carte interactive. Ce lien peut être masqué par défaut et n’être affiché qu’à la prise de focus. Le lien permet d’accéder directement à la liste des agences.

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Page store locator 2 Carte interactive Scripts (7.1)

☐ Présentation (10.1) important

L’attribut interdit frameborder est utilisé pour la carte interactive

➡️ Supprimer l’attribut frameborder et utiliser css

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

☐ Navigation (12.8) moindre

Le bouton Raccourcis clavier reçoit deux fois le focus. Avec le lecteur d’écran NVDA, le bouton est restitué comme “Vide”.

➡️ Corriger l’ordre de tabulation.

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Rating - 1 erreurs recensées sur ce bloc

☐ Présentation (10.9) critique

Pour l’évaluation de l’agence (4 étoiles sur 5), le nombre d’étoiles total n’est pas indiqué autrement que graphiquement. Par ailleurs, impossible de savoir qu’il s’agit d’une évaluation pour un utilisateur de lecteur d’écran.

➡️ Ajouter du texte hors écran (classe sr-only) permettant de comprendre qu’il s’agit d’une évaluation et que le résultat est 4 sur 5. Ex.

Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position . Cette règle est-elle respectée ?
Critère : 10.9 du RGAA 4.1.2.

Code modifié

<p><span class="rating__value" itemprop="ratingValue"><span class="sr-only">Évaluation de l’agence : </span>4<span class="sr-only"> sur 5 étoiles</span></span></p>

Bouton carto/liste - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

Le bouton qui permet de permuter entre l’affichage des agences en carte ou en liste en affichage mobile ne peut pas être atteint au clavier.

➡️ Utiliser un élément <button> ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ )

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page store locator 3 - 6 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/nos-agences-immobilieres/haute-vienne-87/limoges-87000/lamy-limoges

Horaires - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.1) critique

Le jour de la semaine actuel est uniquement indiqué par une mise en couleur dans le bloc des horaires.

➡️ Ajouter un texte hors écran (classe sr-only) indiquant qu’il s’agit du jour actuel. Ex. `Mardi (aujourd’hui)

Dans chaque page web, l’ information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Critère : 3.1 du RGAA 4.1.2.

Page store locator 3 Horaires Couleurs (3.1)

Couleurs - 2 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

Le couple de couleur #57B9B8 / #FFFFFF offre un rapport de contraste de 2.32:1

➡️ Le rapport de contraste doit être de 3:1 a minima pour le titre Horaires de l’agence
➡️ Le rapport de contraste doit être de 4.5:1 a minima pour les autres textes utilisant ce couple de couleur

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

☐ Couleurs (3.2) - 2 critique

Les textes en gris sur blanc (Fermé, Service et appel gratuits) ou gris sur gris (évaluation) ne sont pas lisibles

➡️ Augmenter le contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Rating - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9) important

L’évaluation de l’agence est structurée par des <div>

➡️ Utiliser des éléments <p>

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Page store locator 3 Rating éléments obligatoires (8.9)

☐ Présentation (10.9) critique

➡️ Ajouter du texte hors écran (classe sr-only) permettant de comprendre qu’il s’agit d’une évaluation et que le résultat est 4 sur 5. Ex.

Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position . Cette règle est-elle respectée ?
Critère : 10.9 du RGAA 4.1.2.

Code modifié

<p><span class="rating__value" itemprop="ratingValue"><span class="sr-only">Évaluation de l’agence : </span>4<span class="sr-only"> sur 5 étoiles</span></span></p>

Titres - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1) moindre

{Titres} Le texte “Horaire de l’agence” devrait être un titre

➡️ Mettre le texte en tritre de niveau 2

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Critère : 9.1 du RGAA 4.1.2.

Page store locator 3 Titres Structuration (9.1)

Page annonces immobilières 1 - 29 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/acheter/acheter-un-bien/annonces-de-biens-a-vendre/ile-de-france/essonne-91/corbeil-essonnes-91100/maison-villa-corbeil-essonnes-91100-gb00198437

Carrousel - 3 erreurs recensées sur ce bloc

☐ Images (1.3) important: Les alternatives des images dans les carrousels sont identiques. -> Ajouter un intitulé générique en début d’alternative (ex. alt="Image 1 - Maison/villa · Vente · Corbeil Essonnes (91100) · 8 pièces · 185m²"); Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Critère : 1.3 du RGAA 4.1.2.

☐ Scripts (7.1) important

Dans le carrousel ouvrant le module d’images en plein écran, un clic sur les images permet d’ouvrir la fenêtre modale. Ces images doivent être comprises dans des boutons et non des liens.

➡️ Utiliser un élément <button> ou implémenter le motif de conception ARIA Button

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Scripts (7.1) - 3 important

Les trois carrousels présents sur la page n’implémentent pas le motif de conception ARIA Carousel

➡️ Implémenter le motif de conception ARIA Carousel ( https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Diagnostics - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Certaines lettres dans le diagnostic énergétique et le bilan GES ne sont pas suffisamment contrastées.

➡️ Ajouter un liseret noir aux lettres voire aux blocs avec css

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 1 Diagnostics Couleurs (3.2)

☐ Présentation (10.9) critique

Le résultat des diagnostics n’est pas compréhensible.

➡️ Masquer le diagnostic visuel aux technologies d’assistance (aria-hidden="true") et ajouter le résultat dans un texte hors écran (.sr-only)

Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position . Cette règle est-elle respectée ?
Critère : 10.9 du RGAA 4.1.2.

Code modifié

<div class="estate__score">
    <div>
        <p class="estate__score-title">Diagnostic de performance énergétique (DPE) <span class="sr-only">211 kWh/m².an (correspond à D sur une échelle entre A et G où A est le meilleur résultat)</span></p>
        <div aria-hidden="true" class="d-flex justify-content-around align-items-center">
…

☐ Présentation (10.12) moindre

L’indice d’émissions GES n’est plus lisible.

➡️ Ajuster le code html et css pour le rendre lisible dans les conditions du test décrit dans le RGAA ( https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.12 )

Dans chaque page web, les propriétés d’espacement du texte peuvent-elles être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ?
Critère : 10.12 du RGAA 4.1.2.

Page annonces immobilières 1 Diagnostics Présentation (10.12)

Contenu - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

La référence de l’annonce n’est pas visible (2.43:1).

➡️ Augmenter le rapport de contraste pour 4.5:1 a minima.

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 1 Contenu Couleurs (3.2)

☐ Couleurs (3.2) - 2 critique

Le couple de couleur #57B9B8/#FFFFFF a un rapport de contraste de 2.32.

➡️ Augmenter le rapport de contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 1 Contenu Couleurs (3.2) - 2

☐ Couleurs (3.2) - 3 critique

Dans la fiche présente dans la section Recommandations, le nom de la commune n’est pas suffisamment contrasté.

➡️ Augmenter le contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 1 Contenu Couleurs (3.2) - 3

Carte interactive - 3 erreurs recensées sur ce bloc

☐ Scripts (7.1) important

Bien que la carte interactive fasse l’objet d’une dérogation, un lien d’évitement ou un système de désactivation du composant doit être mis en place.

➡️ Ajouter un lien d’évitement ou un bouton permettant de désactiver et activer la carte avant le module de carte interactive. Ce lien ou ce bouton peut être masqué par défaut et n’être affiché qu’à la prise de focus.

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Présentation (10.1) important

L’attribut interdit frameborder est utilisé pour la carte interactive

➡️ Supprimer l’attribut frameborder et utiliser css

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

☐ Navigation (12.8) moindre

Le bouton Raccourcis clavier reçoit deux fois le focus. Avec le lecteur d’écran NVDA, le bouton est restitué comme “Vide”.

➡️ Corriger l’ordre de tabulation.

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Modale - 1 erreurs recensées sur ce bloc

☐ Scripts (7.1) important

La fenêtre modale du carrousel en plein écran n’implémente pas tout à fait le motif de conception ARIA Modal

➡️ Le nom accessible est “You can close this modal content with the ESC key”, indiquer un nom accessible pertinent (ex. aria-label="Images de l’annonce en plein écran")
➡️ A l’ouverture de la fenêtre modale, déplacer le focus sur le bouton de fermeture
➡️ L’intitulé des boutons doit être traduit

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Formulaire - 8 erreurs recensées sur ce bloc

☐ Scripts (7.5) important

Le message de statut suite à la soumission du formulaire n’est pas restitué.

➡️ Ajotuer l’attribut role="status" sur l’élément <p> structurant le message de statut et déplacer le focus sur cet élément après soumission du formulaire.

Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ?
Critère : 7.5 du RGAA 4.1.2.

☐ Formulaires (11.5) important

Les boutons radios ne sont pas regroupés.

➡️ Utiliser un élément <fieldset> pour regrouper les boutons radios Oui/Non

🚨 6 et 11.7 à vérifier après correction

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

☐ Formulaires (11.10) important: Dans le formulaire de contact, le passage de texte “* Champs obligatoires” doit se trouver en début de formulaire.; Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ Formulaires (11.10) - 4 important

Dans le formulaire de contact, les messages d’erreur relatifs au caractère obligatoire des champs ou au format de donnée attendu ne sont pas correctement reliés aux champs.

➡️ Utiliser l’attribut aria-invalid="true" et relier le message d’erreur au champ avec l’attribut aria-describedby

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ Formulaires (11.10) - 5 important

{Formulaire} Dans le formulaire de contact, les indications sur les formats de données attendus ne sont pas correctement indiquées.

➡️ Les indications sont données par l’attribut placeholder uniquement, elles doivent apparaître dans l’étiquette ou un passage de texte adjacent relié au champ par l’attribut aria-describedby (ex. <label>Prénom * (par exemple Lucie)</label>)

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ Formulaires (11.10) - 6 important

Dans le formulaire de contact, l’étiquette de la case à cocher relative au traitement des données n’explicite pas le caractère obligatoire du champ.

➡️ Ajouter une astérisque à l’étiquette du champ.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ Formulaires (11.11) important

Dans le formulaire de contact, les messages d’erreurs relatifs aux formats de données attendus ne comportent pas d’exemple de saisie.

➡️ Ajouter un exemple réel de saisie dans le message d’erreur. Ex. : L'adresse email n'est pas valide (exemple : lucie.durand@lamy.fr)

Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Critère : 11.11 du RGAA 4.1.2.

☐ Formulaires (11.13) important

Dans le formulaire de contact, le remplissage automatique n’est pas utilsiable.

➡️ Utiliser l’attribut autocomplete avec la valeur adéquate ( https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete )

La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
Critère : 11.13 du RGAA 4.1.2.

Titres - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1) important

De nombreux textes devraient être des titres et n’en sont pas (ex. : “Les plus”, “Le bien”, “Ce bien vous intéresse ?"…)

➡️ Structurez les titres par des éléments <h2>, <h3>…

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Critère : 9.1 du RGAA 4.1.2.

Page annonces immobilières 1 Titres Structuration (9.1)

Listes - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3) important

Les listes de description du bien (Le bien, Le prix) ne sont pas correctement structurées.

➡️ Structurer les listes de description par les éléments <dl><dt><dd>

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Page annonces immobilières 1 Listes Structuration (9.3)

Captcha - 1 erreurs recensées sur ce bloc

☐ Présentation (10.1) important

Le cadre reCAPTCHA comporte des attributs width et height

➡️ Supprimer les attributs et utiliser css

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

Liens - 1 erreurs recensées sur ce bloc

☐ Présentation (10.11) important

Certains liens ne sont plus lisibles sur une fenêtre de largeur 320px

➡️ Ajuster le style pour les rendre lisibles

Page annonces immobilières 1 Liens Présentation (10.11)

Description - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

Les boutons Afficher plus et Afficher moins ne peuvent pas recevoir le focus.

➡️ Utiliser des éléments <button> ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ )

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page annonces immobilières 1 Description Navigation (12.8)

Formulaire de contact - 2 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

La case à cocher du formulaire ne peut pas recevoir le focus.

➡️ Utiliser l’élément natif ou implémenter les motifs de conception ARIA Checkbox ( https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ )

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page annonces immobilières 1 Formulaire de contact Navigation (12.8)

☐ Navigation (12.8) - 2 critique

Les boutons radio du formulaire ne peuvent pas recevoir le focus.

➡️ Utiliser les éléments natifs ou implémenter les motifs de conception ARIA Radio group ( https://www.w3.org/WAI/ARIA/apg/patterns/radio/ )

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Ancres - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) moindre

L’activation des liens d’acès rapide aux différentes section de contenu fait défiler la page mais ne déplace pas le focus.

➡️ Déplacer le focus sur la zone concernée (utilisation possible de tabindex="-1")

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page annonces immobilières 1 Ancres Navigation (12.8)

Page annonces immobilières 2 - 17 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/nos-annonces?type=rental&locations=paris&max_budget=&area_min=&from=search

Annonces - 4 erreurs recensées sur ce bloc

☐ Images (1.2) important

Les images des annonces sont des images de décorations et doivent avoir une alternative vide.

➡️ Supprimer le contenu de l’attribut alt des images des annonces. 💡 les images présentées en carrousel peuvent avoir une alternative du type Image 1 sur 4 en fonction de l’implémentation ARIA choisie

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Page annonces immobilières 2 Annonces Images (1.2)

☐ Couleurs (3.2) important

La mention “Par mois / CC” et le nom de la commune ne sont pas suffisamment contrastées.

➡️ Augmenter le contraste pour obtenir a minima 4.5:1

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 2 Annonces Couleurs (3.2)

☐ éléments obligatoires (8.9) moindre

Le texte “par mois / CC” n’a pas de sémantique

➡️ Intégrer la mention dans le paragraphe du prix.

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

☐ Présentation (10.3) important

Les annonces immobilières ne sont pas compréhensibles lorsque les feuilles de style sont desactivées.

➡️ Le titre de l’annonce doit être le premier élément dans l’ordre du code, les autres éléments (prix, lieux, images…) arrivent ensuite
➡️ Utiliser css pour ajuster les styles
➡️ Le titre de l’annonce peut être un titre (niveau 3 pour cohérence avec la page d’acueil) Ex.

Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

Code modifié

<a class="estate-item__link" href="...">
   <h3 class="estate-item__infos">Appartement · 3 pièces · 71m²</h3>
   <div class="estate-item__price">
     <p class="price-for-map">2 316 € <span class="mention-price-for-map">par mois / CC</span></p>
    </div>
    <p class="estate-item__location">Paris (75003)</p>
</a>

Filtres - 7 erreurs recensées sur ce bloc

☐ Scripts (7.1) important

Le module d’autocomplétion du filtre Localisation n’est pas compatible avec les technologies d’assistance (implémentation ARIA, interactions clavier).

➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Scripts (7.1) - 2 important

Sur affichage mobile, la fenêtre modale des filtres n’implémente pas le motif de conception ARIA Modal

➡️ Implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) ➡️ Rôles, labels, interactions clavier, gestion du focus…

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Formulaires (11.1) important

Les champs de saisie dans les filtres n’ont pas d’étiquette.

➡️ Ajouter un attribut title aux champs de saisie (ex. title="Prix minimum (euros)"). 💡 Des labels existent mais ne sont pas affichés ni traduits, la meilleure option reste d’utiliser un élément <label> visible, pertinent et accolé au champ, l’attribut title n’est alors plus utile.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Page annonces immobilières 2 Filtres Formulaires (11.1)

☐ Formulaires (11.5) important

Dans les filtres, les champs de même nature ne sont pas regroupés.

➡️ Utiliser l’élément <fieldset> pour regrouper les champs et mettre la légende dans un élément <legend>

🚨 Vérifier 11.6 et 11.7 après correction

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

Code modifié

<fieldset>
  <legend class="required">Surface du terrain</legend>
    <div id="advancedCriteria_landSurface">
      <div>
        <label for="advancedCriteria_landSurface_minLandSurface">Surface minimum (m²)</label>
        <input type="text" id="advancedCriteria_landSurface_minLandSurface" name="advancedCriteria[landSurface][minLandSurface]" placeholder="Minimum m²">
      </div>
      <div>
        <label for="advancedCriteria_landSurface_maxLandSurface">Surface maximum (m²)</label>
        <input type="text" id="advancedCriteria_landSurface_maxLandSurface" name="advancedCriteria[landSurface][maxLandSurface]" placeholder="Maximum m²">
    </div>
  </div>
</div>

☐ Formulaires (11.9) important

Dans les filtres, le bouton de validation du champs de localisation n’a pas d’intitulé.

➡️ Donner un intulé au bouton en fournissant une alternative à l’image. Ex. : alt="Appliquer (localisation)"

Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
Critère : 11.9 du RGAA 4.1.2.

☐ Formulaires (11.9) - 6 important

Dans les filtres, l’intitulé des boutons Appliquer ou Effacer doit inclure le contexte du filtre concerné.

➡️ Ajouter des texte hors écran (classe .sr-only) dans les boutons

Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
Critère : 11.9 du RGAA 4.1.2.

Code modifié

<button type="submit" class="btn-primary">Appliquer<span class="sr-only"> (critères avancés)</span></button>

☐ Navigation (12.8) critique

Les cases à cocher et boutons Effacer des filtres ne peuvent pas recevoir le focus.

➡️ Implémenter les motifs de conception ARIA Button et Checkbox

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page annonces immobilières 2 Filtres Navigation (12.8)

Titre de page - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6) important

Le titre de la page ne reprend pas la valeur des filtres

➡️ Ajouter la valeur des filtres dans le titre de la page

Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.

Carte interactive - 2 erreurs recensées sur ce bloc

☐ Présentation (10.1) important

L’attribut interdit frameborder est utilisé pour la carte interactive

➡️ Supprimer l’attribut frameborder et utiliser css

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

☐ Navigation (12.8) moindre

Le bouton Raccourcis clavier reçoit deux fois le focus. Avec le lecteur d’écran NVDA, le bouton est restitué comme “Vide”.

➡️ Corriger l’ordre de tabulation.

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Vue liste / Vue carte - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

Le commutateur permettant de masquer la carte ne peut pas recevoir le focus.

➡️ Implémenter le motif de conception ARIA Radio Group ( https://www.w3.org/WAI/ARIA/apg/patterns/radio/ ) ou Switch ( https://www.w3.org/WAI/ARIA/apg/patterns/switch/ )
➡️ La prise de focus doit se faire avant d’arriver sur la carte interactive (y compris en affichage mobile)

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Carrousels - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

Les boutons de contrôle des carrousels ne reçoivent pas le focus.

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Affichage - 1 erreurs recensées sur ce bloc

☐ Consultation (13.9) critique

L’interface fixe ne permet pas une consultation en paysage.

➡️ Rendre possible la consultation en mode paysage sur les smartphones.

Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ?
Critère : 13.9 du RGAA 4.1.2.

Page annonces immobilières 2 Affichage Consultation (13.9)

Page annonces immobilières 3 - 16 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/acheter/acheter-un-bien/annonces-de-biens-a-vendre/ile-de-France

Titre - 2 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

{Titre} Le titre de la page n’est pas lisible.

➡️ Augmenter le contraste pour obtenir 3:1 minimum (y compris avec l’image de fond)

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 3 Titre Couleurs (3.2)

☐ Présentation (10.11) critique

Le titre n’est plus lisible lorsque le site est affiché dans une fenêtre de 320px de large.

➡️ Rendre le titre lisible

Annonce - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le nom de la commune sur les annonces n’est pas suffisament contrasté (4.23:1)

➡️ Augmenter le contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 3 Annonce Couleurs (3.2)

Pagination - 4 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

Les couleurs utilisées pour la pagination ne sont pas suffisamment contrastées

➡️ Augmenter le contraste pour obteir 4.5:1 minimum pour le texte et 3:1 minimum pour le contour(hors éléments désactivés).

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page annonces immobilières 3 Pagination Couleurs (3.2)

☐ Liens (6.1) moindre

Les liens Précédent et Suivant de la pagination ne sont pas traduits.

➡️ Traduire l’intitulé des liens

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ Structuration (9.2) important

La pagination n’est pas correctement structurée.

➡️ Utiliser un élément <nav role="navigation" aria-label="Pagination"> pour structurer la pagination.

Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.

☐ Présentation (10.7) important

La prise de focus des liens de la pagination n’est pas visible.

➡️ Utiliser le style natif ou augmenter le contraste pour obtenir un rapport de contraste de 3:1 avec les couleurs environnantes.

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Page annonces immobilières 3 Pagination Présentation (10.7)

Acheter/Louer - 6 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Les boutons Acheter/Louer lorsqu’ils sont en arrière plan sont insiffisamment contrastés.

➡️ Augmenter le contraste pour parvenir à 3:1

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

☐ Scripts (7.1) critique

Les onglets de la section Acheter/Louer ne sont pas compatibles avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Tabs ( https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Scripts (7.1) - 3 critique

Les cases à cocher de la section Acheter/Louer ne sont pas compatibles avec les technologies d’assistance.

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Scripts (7.1) - 4 important

Le système d’autocomplétion de la section Acheter/Louer n’est pas compatible avec les technologies d’assistance

➡️ Implémenter le motif de conception ARIA Combobox ( https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ )

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Formulaires (11.5) important

Dans la section Acheter/Louer, les cases à cocher doivent être regroupées.

➡️ Regrouper les cases à cocher à l’aide d’un élément fieldset
➡️ Ajouter une légende pour ce regroupement avec l’élément <legend> Exexmple:

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

Code modifié

<fieldset>
  <legend>Type de bien</legend>
  [Champs….]
 </fieldset>

☐ Formulaires (11.10) important

Le caractère obligatoire du champ localisation n’est pas indiqué

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Titre de page - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6) important

Le titre de la page ne reprend pas l’état de la pagination.

➡️ Faire remonter le numéro de page (à partir de la page 2) dans le title de la page.

Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.

Annonces - 1 erreurs recensées sur ce bloc

☐ Présentation (10.3) important

Les annonces immobilières ne sont pas compréhensibles lorsque les feuilles de style sont desactivées.

Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

Code modifié

<a class="estate-item__link" href="...">
   <h3 class="estate-item__infos">Appartement · 3 pièces · 71m²</h3>
   <div class="estate-item__price">
     <p class="price-for-map">2 316 € <span class="mention-price-for-map">par mois / CC</span></p>
    </div>
    <p class="estate-item__location">Paris (75003)</p>
</a>

Carrousels - 1 erreurs recensées sur ce bloc

☐ Navigation (12.8) critique

Les boutons de contrôle des carrousels ne reçoivent pas le focus.

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Page formulaire - 11 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/formulaire-gestion-locative

Formulaire - 10 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

Les textes en gris sur fond blanc (“Champs obligatoires *” et texte sur le traitement des données) ne sont pas suffisamment contrastés.

➡️ Augmenter le contraste pourobtenir a minima 4.5:1

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page formulaire Formulaire Couleurs (3.2)

☐ éléments obligatoires (8.9) moindre

Les messages d’erreur du formulaire doivent être structuré dans des paragrpahes

➡️ Utiliser des éléments <p>

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

☐ Présentation (10.7) important

Dans le formulaire, le focus sur les champs Message et Vous êtes propriétaire d’un logement n’est pas visible.

➡️ Utiliser le style natif ou augmenter la visibilité de la prise de focus (contraste minimum 3:1)

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Page formulaire Formulaire Présentation (10.7)

☐ Formulaires (11.5) important

Les boutons radio dans le formulaire doivent être regroupés.

➡️ Utiliser un élément <fieldset>

🚨 Vérifier 11.6 et 11.7 après correction

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

☐ Formulaires (11.10) moindre

Dans le formulaire, le caractère obligatoire de la case à cocher n’est pas indiqué.

➡️ Ajouter une astérisque à l’étiquette

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ Formulaires (11.10) - 6 important

Dans le formulaire, les messages d’erreur ne sont pas correctement reliés aux champs.

➡️ Ajouter un attribut aria-invalid="true" sur les champs en erreur et lier les champs et les messages avec l’attribut aria-describedby.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ Formulaires (11.10) - 7 important

Dans le formulaire, des indication du format de donnée attendu doivent apparaître avant soumission.

➡️ Ajouter des exemples de saisie dans les étiquettes des champs ou dans un passage de texte adjacent lié au champ par l’attribut ària-describedby` (le placeholder n’est pas suffisant).

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

Page formulaire Formulaire Formulaires (11.10) - 7

☐ Formulaires (11.11) important

Dans le formulaire, les messages d’erreur relatif au format de donnée attendu doivent comporter des exemples réels de saisie.

➡️ Ajouter des exemples réels de saisie dans les message d’erreur (ex. “L’adresse e-mail n’est pas valide (exemple : laura.dupin@lamy.fr )”).

Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Critère : 11.11 du RGAA 4.1.2.

☐ Formulaires (11.13) important

Le remplissage automatique n’est pas proposé dans le formulaire.

➡️ Utiliser l’attribut autocomplete avec la valeur adéquate ( https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete )

La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
Critère : 11.13 du RGAA 4.1.2.

☐ Navigation (12.8) critique

Dans le formulaire, la case à cocher et les boutons radio ne peuvent recevoir le focus.

➡️ Implémenter les motifs de conception ARIA Button et Checkbox.

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

reCAPTCHA - 1 erreurs recensées sur ce bloc

☐ Présentation (10.1) important

Des attributs interdits sont utilisés sur le cadre de reCAPTCHA

➡️ Supprimer les attributs width, height et frameborder

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

Page FAQ - 1 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/faq

Pictogrames - 1 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

Les pictogrames doivent avoir une alternative vide.

➡️ Supprimer le contenu de l’attribut alt

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Page FAQ Pictogrames Images (1.2)

Page guide immo - 9 erreurs recensées sur cette page

URL de la page : https://www.lamy-immobilier.fr/le-guide-immo

Filtres - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.1) moindre

Le filtre actif est indiqué uniquement par la couleur.

➡️ Ajouter un attribut aria-current="page" au lien correspondant au filtre actif

Dans chaque page web, l’ information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Critère : 3.1 du RGAA 4.1.2.

Article - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

La date indiquée sur les articles n’est pas suffisamment contrastée (4.23:1)

➡️ Augmenter le contraste pour obtenir 4.5:1 a minima

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page guide immo Article Couleurs (3.2)

☐ Liens (6.1) important

L’intitulé des liens vers les articles n’est pas explicite.

➡️ Le titre de l’article doit apparaître en premier dans l’ordre du code puis viennent les autres contenus. Ajuster l’affichage avec css.

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ éléments obligatoires (8.9) moindre

Les labels (Louer son logement, éco-rénovation…) dans les articles ne sont pas correctement structurés.

➡️ Utiliser un élément <p> pour structurer le label.

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation . Cette règle est-elle respectée ?
Critère : 8.9 du RGAA 4.1.2.

Pagination - 4 erreurs recensées sur ce bloc

☐ Couleurs (3.2) critique

Les couleurs utilisées pour la pagination ne sont pas suffisamment contrastées

➡️ Augmenter le contraste pour obtenir 4.5:1 minimum pour le texte et 3:1 minimum pour le contour(hors éléments désactivés).

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

Page guide immo Pagination Couleurs (3.2)

☐ Liens (6.1) moindre

Les liens Précédent et Suivant de la pagination ne sont pas traduits.

➡️ Traduire l’intitulé des liens

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ Structuration (9.2) important

La pagination n’est pas correctement structurée.

➡️ Utiliser un élément <nav role="navigation" aria-label="Pagination"> pour structurer la pagination.

Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.

☐ Présentation (10.7) important

La prise de focus des liens de la pagination n’est pas visible.

➡️ Utiliser le style natif ou augmenter le contraste pour obtenir un rapport de contraste de 3:1 avec les couleurs environnantes.

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

Titre de page - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6) important

Le titre de la page ne reprend pas l’état de la pagination.

➡️ Faire remonter le numéro de page (à partir de la page 2) dans le title de la page.

Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.