← Retour à la page projet

Recommandations pour oralia.fr

Notes correctives

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Erreurs à corriger

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

Liste des pages auditées

Éléments transverses oralia.fr - 48 erreurs recensées sur cette page

URL de la page : https://oralia.fr

Formulaire de contact - 20 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses oralia.fr Formulaire de contact

☐ Images (1.1)  important

Les indications chiffrées de l’avancement de remplissage des formulaires n’ont pas d’alternative textuelle.

➡️ Ajouter le role="img"aux svg
➡️ Ajouter un attribut aria-label (ex. aria-label="étape 1")

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

Éléments transverses oralia.fr Formulaire de contact Images (1.1)

☐ Couleurs (3.1)  important

L’indication d’avancement du formulaire est donnée uniquement par la couleur.

➡️ Structurer les étapes en liste à l’aide des balises <ol><li>
➡️ Ajouter l’attribut aria-current="step" sur l’élément correspondant à l’étape courante

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.

Éléments transverses oralia.fr Formulaire de contact Couleurs (3.1)

☐ Couleurs (3.2)  important

Sur fond rose, le texte des boutons Suivant, Retour, Envoyer du formulaire de contact offrent un rapport de contraste de 3.74:1 avec le fond du bouton.

➡️ Augmenter le contraste pour optenir 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 oralia.fr Formulaire de contact Couleurs (3.2)

☐ Couleurs (3.2) - 4  important

Le rapport de contraste entre le blanc et le bleu dans le formulaire de contact est de 2.8 pour les textes et les boutons.

➡️ Augmenter le contraste pour optenir 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 oralia.fr Formulaire de contact Couleurs (3.2) - 4

☐ Couleurs (3.2) - 5  important

Le rapport de contraste entre le blanc et le vert clair dans le formulaire de contact est de 2.41 pour les textes et les boutons.

➡️ Augmenter le contraste pour optenir 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 oralia.fr Formulaire de contact Couleurs (3.2) - 5

☐ Couleurs (3.2) - 6  important

Dans le formulaire de contact les messages d’erreur sur fond bleu offrent un rapport de contraste de 2.69.

➡️ Augmenter le contraste pour optenir 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 oralia.fr Formulaire de contact Couleurs (3.2) - 6

☐ Couleurs (3.2) - 7  important

Dans le formulaire de contact les messages d’erreur sur fond vert clair offrent un rapport de contraste de 3.12.

➡️ Augmenter le contraste pour optenir 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 oralia.fr Formulaire de contact Couleurs (3.2) - 7

☐ Couleurs (3.3)  important

Les champs et boutons du formulaire de contact ne sont pas suffisament contrastés lorsqu’ils sont sur fond rose, bleu clair ou vert clair.

➡️ Augmenter le contraste ou ajouter une bordure offrant un rapport de constraste de 3:1 minimum ⚠️ Pour les boutons, on parle ici du rapport entre la couleur de fond (blanc) et le fond de la fenêtre modale. Le rapport de contraste entre le fond et le texte du bouton doit bien être de 4.5:1.

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.

☐ Scripts (7.1)  important

Le bouton d’ouverture de la fenêtre modale du formulaire n’a pas le rôle de bouton.

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

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 oralia.fr Formulaire de contact Scripts (7.1)

☐ Scripts (7.1) - 10  important

La fenêtre modale du formulaire de contact n’est pas compatible avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/ )

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 oralia.fr Formulaire de contact Scripts (7.1) - 10

☐ Scripts (7.1) - 11  important

Le module de recherche des agences dans le formulaire de contact n’est pas compatible avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Combobox avec autocomplete ( 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 oralia.fr Formulaire de contact Scripts (7.1) - 11

☐ Scripts (7.5)  critique

Les messages de statut du formulaire de contact ne sont pas restitués

➡️ Utiliser les attribtus role="status"ou role="alert" en fonction de la teneur du message.
➡️ Le tutoriel sur les formulaires de la WAI peut être une bonne ressource : https://www.w3.org/WAI/tutorials/forms/notifications/

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.

☐ Présentation (10.11)  critique

Les mentions légales des formulaires de contact ne sont pas consultables et le défilement ne semble pas possible pour les consulter lorsque la fenêtre a une largeur de 320px.

➡️ Activer le scroll dans la fenêtre modale.

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.

Éléments transverses oralia.fr Formulaire de contact Présentation (10.11)

☐ Formulaires (11.1)  important

Dans le formulaire de contact, le champ de sélection du motif de la demande n’a pas d’étiquette.

➡️ Ajouter une étiquette à la liste de sélection avec 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 oralia.fr Formulaire de contact Formulaires (11.1)

☐ Formulaires (11.1) - 15  important

Dans le formulaire de contact, le champ de recherche d’agence n’est pas d’étiquette.

➡️ Ajouter une étiquette avec l’élément <label> (le placeholder seul ne constitue pas une étiquette).
➡️ Structurer le passage de texte “41 agences en France à votre service " avec un élément <p> et le lier au champ à l’aide de l’attribut aria-describedby.

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

Éléments transverses oralia.fr Formulaire de contact Formulaires (11.1) - 15

☐ Formulaires (11.10)  important

Dans le formulaire de contact, aucun texte n’explicite le caractère obligatoire des champs avant soumission.

➡️ Ajouter un texte en début de formulaire expliquant la signification de l’asterisque. Ex. <p>* champs obligatoires</p>

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

☐ Formulaires (11.10) - 17  important

Dans le formulaire de contact, les message d’erreur indiquant l’absence de saisie ne sont pas correctement reliés au champs en erreur.

➡️ Ajouter un attribut aria-invalid="true" sur les champs en erreur
➡️ Lier le champs et le message d’erreur avec un attribut aria-describedby pointant sur le message d’erreur sur le champ

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

Éléments transverses oralia.fr Formulaire de contact Formulaires (11.10) - 17

☐ Formulaires (11.10) - 18  important

Dans le formulaire de contact, les champs attendant un type de donnée spécifique n’ont pas d’exemple de saisie dans leur étiquette.

➡️ Ajouter un exemple de saisie pour les champs concernés. Ex. <label>Code postal* (par exemple : 69002)</label>

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 ne comportent pas d’exemple de saisie.

➡️ Ajouter une exemple de saisie dans le message d’erreur. Ex. “L’email n’est pas valide (exemple : jacqueline@oralia.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.

Éléments transverses oralia.fr Formulaire de contact Formulaires (11.11)

☐ Formulaires (11.13)  moindre

Dans le formulaire de contact, la finalité du champ Adresse de l’immeuble ne peut pas être déduite

➡️ Ajouter l’attribut autocomplete adhoc

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.

Bandeau cookies - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses oralia.fr Bandeau cookies

☐ Images (1.3)  moindre

Dans le bandeau cookies, le logo Oralia a comme alternative “Logo”

➡️ Définir l’alternative à “Oralia”

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.

Éléments transverses oralia.fr Bandeau cookies Images (1.3)

☐ Scripts (7.1)  important

Le bandeau cookies est composé de trois fenêtre modales. L’intitulé accessible de ces trois fenêtres n’est pas clair (“Bienvenue chez Oralia Gestion du consentement”)

➡️ Renseigner des intitulés accessibles (aria-label) distincts et pertinents pour les trois fenêtres modales

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 oralia.fr Bandeau cookies Scripts (7.1)

☐ Scripts (7.3)  critique

Dans le bandeau de cookies, le choix granulaires des traitements des partenaires n’est pas possible au clavier.

➡️Distinguer les boutons Bloquer et Autoriser des boutons d’ouverture/fermeture des accordéons.

Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Critère : 7.3 du RGAA 4.1.2.

Éléments transverses oralia.fr Bandeau cookies Scripts (7.3)

Estimation immobilières - 4 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses oralia.fr Estimation immobilières

☐ Couleurs (3.2)  moindre

Le texte sur l’image dans le lien du bloc Estimation immobilières 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.

Éléments transverses oralia.fr Estimation immobilières Couleurs (3.2)

☐ Liens (6.1)  moindre

L’image contenue dans le lien du bandeau Estimation immobilières n’apporte pas d’information significative et son alternative textuelle n’est pas vide.

➡️ Supprimer le contenu de l’attribut alt

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

☐ éléments obligatoires (8.9)  moindre

Un paragraphe vide est présent dans le lien du bandeau Estimation immobilières.

➡️ Supprimer le paragraphe vide 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.

☐ Présentation (10.11)  critique

Le bandeau Estimation immobilières disparaît lorsque le site est affiché 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.

Menu - 7 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses oralia.fr Menu

☐ Liens (6.2)  important

Le lien de menu menant vers myorlia.fr n’a pas d’intitulé dans certains modes d’affichage.

➡️ Supprimer le bouton à l’intérieur du lien et utiliser css pour ajuster le style
➡️ Ajouter un attribut title au lien : title="Espace client MyOralia.fr"

Dans chaque page web, chaque lien a-t-il un intitulé  ?
Critère : 6.2 du RGAA 4.1.2.

Éléments transverses oralia.fr Menu Liens (6.2)

☐ Scripts (7.3)  critique

Les sous-menus de la navigation principale ne sont pas contrôlables au clavier.

➡️ Implémenter le motif de conception ARIA Disclosure ( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ ) sur les sous-menus.

Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Critère : 7.3 du RGAA 4.1.2.

Éléments transverses oralia.fr Menu Scripts (7.3)

☐ Structuration (9.2)  important

La navigation principale doit être identifiée par un attribut aria-label.

➡️ Ajouter un attribut aria-label="Navigation principale" sur l’élément <nav>.

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)  moindre

Dans la navigation principale, trois listes sont utilisées pour structurer les liens de navigation.

➡️ Utiliser une seule liste pour regrouper tous les liens.

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

Éléments transverses oralia.fr Menu Structuration (9.3)

☐ Présentation (10.7)  critique

La prise de focus n’est pas visible sur les éléments du menu principal.

➡️ Utiliser le style natif ou définissez un style visible avec css.

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.

☐ Présentation (10.13)  critique

Les sous-menus de la navigation principale ne sont pas contrôlables par l’utilisateur.

➡️ Permettre la fermeture des sous-menus par l’appui de la touche Echap lorsqu’ils sont ouverts.

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.9)  critique

Le focus est piégé par le bouton de connexion à l’espace client

➡️ Supprimer le piège au clavier

Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
Critère : 12.9 du RGAA 4.1.2.

Éléments transverses oralia.fr Menu Navigation (12.9)

Menu mobile - 2 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses oralia.fr Menu mobile

☐ Scripts (7.1)  critique

Le menu mobile n’est pas compatibles avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/ )
➡️ Fournir des intitulés aux boutons d’ouverture et de fermeture
➡️ S’assurer que tous les liens et boutons sont utilisables
➡️ S’assurer que la navigation au clavier est possible

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.11)  critique

Le lien vers l’espace client n’est pas visible dans le menu mobile lorsque la fenêtre a une largeur de 320px.

➡️ Activer le scroll dans la fenêtre modale.

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.

Footer - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses oralia.fr Footer

☐ Scripts (7.1)  moindre

Le lien qui ouvre les préférences d’utilisation des cookies doit être un bouton.

➡️ Utiliser un élément <button> à la place de l’élément <a>

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 oralia.fr Footer Scripts (7.1)

☐ Structuration (9.2)  important

Les liens en pied de page ne constituent pas une navigation principale et ne doivent pas être structuré par une balise <nav>.

➡️ Supprimer l’élément <nav> pour les liens du footer.

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

Éléments transverses oralia.fr Footer Structuration (9.2)

☐ Structuration (9.3)  moindre

Les liens Lamy et Evoriel en pied de page devraient être structurés par une liste.

➡️ Utiliser les éléments <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 oralia.fr Footer Structuration (9.3)

Général - 9 erreurs recensées sur ce bloc

☐ Scripts (7.5)  critique

Lorsque le changement de page n’implique pas de chargement complet de page, l’indicateur de progression n’est pas restitué.

➡️ Implémenter les fonctionnalités ARIA Progressbar sur la barre de progression https://w3c.github.io/aria/#progressbar
➡️ Déplacer le focus sur l’élément progressbar lorsque l’indicateur de progression s’affiche.
➡️ Déplacer le focus en haut de page une fois le contenu de la page affiché.

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.

☐ Structuration (9.1)  critique

L’ouverture des modales de contact ou de gestion des cookies perturbe l’ordre des titre.

➡️ Mettre les titres de page en h1 et/ou s’assurer de la cohérence des titres lorsque les modales de contact ou de cookies sont ouvertes.

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.

Éléments transverses oralia.fr Général Structuration (9.1)

☐ Structuration (9.1) - 3  critique

Le titre h1du bandeau Estimation immobilières perturbe la compréhension de la structure des titres sur de nombreuses pages

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.

☐ Structuration (9.2)  important

Le contenu principal des pages du site n’est pas structuré par une balise <main>.

➡️ Structurer le contenu principal par une balise <main role="main">.

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.1)  moindre

Des attribut interdits sont utilisés dans la page.

➡️ Supprimer l’attribut text.

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.

☐ Présentation (10.5)  important

Les déclarations de couleurs ne sont pas correctements utilisées.

➡️ Définir une couleur de texte et une couleur de fond par défaut pour la balise body.

Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?
Critère : 10.5 du RGAA 4.1.2.

☐ Navigation (12.1)  important

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

➡️ Ajouter une page Plan du site pertinente ou un moteur de recherche

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.

☐ Navigation (12.6)  moindre

Les zones de regroupement ne peuvent pas être atteintes ou évitées.

➡️ Ajouter les landmarks appropriés avec l’attribut role

• <header role="banner"> pour l’entête du site
• <nav role="navigation"> pour la navigation principale
• <footer role="contentinfo"> pour le pied de page

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.

☐ Navigation (12.7)  important

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

➡️ Ajouter au moins un lien d’accès rapide permettant d’atteindre la zone de contenu principal.
➡️ Le lien peut être masqué par défaut, il doit être le premier élément à recevoir le focus (après le bandeau de cookies lorsque l’utilisateur n’a pas encore défini ses préférences).
➡️ À l’activation du lien, déplacer le focus vers la zone concernée.

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 - 27 erreurs recensées sur cette page

URL de la page : https://oralia.fr

Page d'accueil

Services - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page d'accueil Services

☐ Images (1.1)  critique

Dans la fenêtre modale Convocation électronique, l’image porteuse d’information n’a pas d’alternative textuelle.

➡️ Ajouter une alternative textuelle pertinente ou ajouter le contenu en texte et ajouter une alternative vide à l’image.

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

Page d'accueil Services Images (1.1)

☐ Couleurs (3.1)  critique

Dans la fenêtre modale détaillant les services de rénovation énergétique, l’indication de pagination n’est indiqué que par la couleur.

➡️ Le contenu de cette fenêtre modale est présenté en carrousel, il doit implémenter le motif de conception ARIA Carousel ( https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ )

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 d'accueil Services Couleurs (3.1)

☐ Scripts (7.3)  critique

Les encarts détaillant les services et les contenus associés ne sont pas contrôlables au clavier.

➡️ Les encarts qui permettent d’ouvrir le résumé doivent être des boutons ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ ).
➡️ Le résumé du service est à traiter comme une fenêtre modale car il son ouverture conditionne l’accès aux autres encarts. Il doit donc implémenter le motif de conception ARIA Modal (gestion du focus, des interactions clavier, rôles, nommage…)
➡️ Les boutons de fermeture et d’ouverture du contenu détaillé doivent également être des éléments <button> ou implémenter le motif de conteption ARIA Button
➡️ Le contenu détaillé doit également implémenter le motif de conception ARIA Modal
➡️ Lors de la fermeture du contenu détaillé, le focus doit être positionné sur le bouton de fermeture de la modale de résumé
➡️ Lors de la fermeture du résumé, le focus doit être positionné sur le bouton d’ouverture du résumé
➡️ Les deux fenêtres modales correspondant au deux niveau de détail du contenu doivent avoir un nom accessible pertinent. Celui-ci peut reprendre le titre affiché ainsi qu’une mention “résumé” ou “contenu détaillé” et être indiqué via l’attribut aria-label

Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Critère : 7.3 du RGAA 4.1.2.

Page d'accueil Services Scripts (7.3)

Recherche - 19 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page d'accueil Recherche

☐ Images (1.1)  important

Dans le module de recherche en affichage mobile, le signe euro est un svg qui ne comporte pas d’alternative textuelle.

➡️ Ajouter les attributs role="img" aria-label="€" sur les éléments <svg>

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

Page d'accueil Recherche Images (1.1)

☐ Couleurs (3.1)  critique

Le choix du nombre de pièces dans le formulaire de recherche en affichage mobile n’est indiqué que par la couleur.

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

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.

☐ Couleurs (3.3)  critique

Dans le formulaire de recherche, la couleur de bordure du bouton Louer ou des cases à cocher dans le widget de choix du Type de bien n’est pas suffisamment contrastée.

➡️ Augmenter le rapport de contraste pour obtenir 3:1 minimum par rapport à la couleur d’arrière plan (dans tous les états du composant et toutes les tailles de fenêtres).

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.

Page d'accueil Recherche Couleurs (3.3)

☐ Couleurs (3.3) - 4  critique

Dans le formulaire de recherche en affichage mobile, les champs ne sont pas perceptibles. Le rapport de contraste entre la bordure et la couleur adjacente est de 2.26:1

➡️ Augmenter le rapport de contraste pour obtenir 3:1 minimum par rapport à la couleur d’arrière plan (dans tous les états du composant et toutes les tailles de fenêtres).

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.

☐ Scripts (7.1)  critique

Le module de recherche, bien qu’agissant comme un formulaire, n’est pas un formulaire (hors affichage mobile). Si le souhait est de ne pas utiliser l’élément <form>, l’élément contenant doit être identifié par les attributs role="region" et aria-label="Rechercher des biens" (ou équivallent)

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 Recherche Scripts (7.1)

☐ Scripts (7.1) - 6  important

Les boutons Louer / Acheter du module de recherche doivent fonctionner comme un groupe de boutons radio

➡️ implémenter le motif de conception ARIA Radio Group ( https://www.w3.org/WAI/ARIA/apg/patterns/radio/ )
➡️ Le bouton Faire gérer ne doit pas appartenir à ce group et peut avoir les attributs aria-haspopup="dialog" et aria-controls="{id de la modale de contact}" (optionnel)

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) - 7  critique

Dans le module de recherche, les composants d’interface Type de bien, Budget et Pièces doivent implémenter le motif de conception ARIA Diclosure

➡️ Implémenter le motif de conception ARIA Disclosure ( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ )
➡️ L’intitulé des boutons d’ouverture doit reprendre le le label (ex. “Budget”) en plus de la valeur définie par l’utilisateur
➡️ Lorsque l’utilisateur ferme le composant en validant ou effaçant les valeurs choisies, le focus doit revenir sur le bouton d’ouverture.

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) - 8  critique

Dans le module de recherche, les cases à cocher du composant d’interface Type de bien doivent être regroupées et liées à leur label.

➡️ Utiliser les éléménts <fieldset> et <legend> ou bien utiliser les attributs role="group" et aria-labelledby="legende_type_bien" sur l’élément englobant.
➡️ Utiliser l’attribut for="[id_checkbox]" sur le label

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

<div data-v-532ba566="" class="px-6 py-3" role="group" aria-labelledby="legende_type_bien">
    <div data-v-532ba566="" class="font-bold mt-3" id="legende_type_bien">Appartement ?</div>
...
     <label data-v-532ba566="" class="inline-flex items-center" for="maison">
          <input data-v-532ba566="" id="maison" type="checkbox" class="checkbox-regular-green" value="maison"> <span data-v-532ba566="" class="ml-2">Maison</span></label>

☐ Scripts (7.1) - 9  critique

Dans le module de recherche, les boutons du composant d’interface Pièces ne sont pas utilisables.

➡️ implémenter le motif de conception ARIA Checkbox ( https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ )
➡️ regrouper les boutons avec les éléments <fieldset> et <legend> (cf. point 4 ci-dessus)

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) - 10  important

Dans le module de recherche, le composant d’interface Budget n’est pas utilisable.

➡️ Implémenter complètement le motif de conception ARIA Slider Multi-Thumb ( https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/ ) (nommage, ordre de tabulation, les interactions clavier sont bonnes)

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) - 11  important

Dans le module de recherche, les boutons Effacer et Valider doivent avoir un nom accessible plus explicite.

➡️ Ajouter un attribut aria-label=“Valdier [nom du composant]” sur chaque bouton avec l’intitulé pertinent correspondant

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) - 12  critique

Dans le module de recherche, le bouton qui valide la recherche doit être un bouton.

➡️ 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) - 13  important

Dans le module de recherche, le composant d’autocomplétion pour la localité n’est pas utilisable.

➡️ 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) - 14  critique

 {Recherche} Dans le module de recherche, le bouton de validation de la recherche doit être un bouton et avoir un intitulé.

➡️ Utiliser un élément <button> ou implémenter le motif de conception ARIA Button et fournir un nom accessible avec un attribut aria-label par exemple.

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) - 15  important

Le module de recherche en affichage mobile doit avoir le fonctionnement d’une fenêtre modale.

➡️ Implémenter le motif de conception ARIA Dialog Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ )

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

☐ Structuration (9.3)  moindre

Dans le module de recherche en affichage mobile, une liste est utilisée pour structurer les champs du formulaire.

➡️ Ne pas utiliser de liste pour structurer les champs.

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

☐ Formulaires (11.1)  critique

Dans le module de recherche en affichage mobile, chaque champ doit avoir une étiquette correctement liée.

➡️ Lier les éléments <label> aux champs avec l’attribut for

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

Page d'accueil Recherche Formulaires (11.1)

☐ Formulaires (11.5)  important

Dans le formulaire de recherche, les champs des groupes Type de bien, Prix/Loyer, Pièces, Surface doivent être regroupés correctement.

➡️ Utiliser les éléments <fieldset> et <legend> pour regrouper les champs.
➡️ Pour les boutons Louer/Acheter cf. critère 7.1

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.11)  important

Dans le formulaire de recherche, pour les champs attendant un nombre, les messages d’erreurs sont en anglais et doivent donner des exemples réels de saisie.

➡️ Utiliser l’API Constraint Validation pour personnaliser les messages d’erreur. Exemple de message : “Entrer un nombre (exemple : 2200)”

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.

Général - 4 erreurs recensées sur ce bloc

☐ Images (1.2)  important

Les images de décoration présentes dans le contenu de la page ou dans les fenêtres modales ont presque toutes une alternative et ne sont pas ignorées par les technologies d’assistance.

➡️ Supprimer le contenu de l’attribut alt pour les images de décoration.

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

☐ Couleurs (3.2)  critique

De nombreuses combinaisons de couleurs ne sont pas suffisamment contrastées sur la page. Par exemple, le titre Créateurs de liens, les boutons Louer, Acheter ou Faire gérer, le titre Copropriété, le bouton Effacer dans les widgets du formulaire etc.

➡️ Augmenter les contrastes ou proposer un mécanisme permettant d’augmenter les contrastes. 💡 Le rapport de contraste attendu dépend de la taille et de la graisse du texte ou s’il s’agit d’un composant d’interface. Voir le critère du RGAA pour plus de détail : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2

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.

☐ Structuration (9.1)  important

La structuration par les titres n’est pas cohérente.

➡️ Donner de la cohérence à la structuration par les titres. Par exemple :

• Le titre de niveau 1 Immobilier de proximité doit se trouver directement après le titre de niveau 1 Estimation immobilière dans l’ordre du code
• Le titre des services doit être de niveau inférieur au titre de niveau 2 “Des services pour vous simplifier la vie”
• Lorsque le détail d’un service est ouvert, l’ordre des titres doit être cohérent. Soit en utilisant des titres de niveaux inférieurs aux titre et sous-titre du service et en modifiant l’ordre du code pour retrouver une cohérence, soit en déplaçant le code de la fenêtre modale en fin de code et en utilisant un titre de niveau 1 comme titre principal de la fenêtre modale.

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 d'accueil Général Structuration (9.1)

☐ Présentation (10.7)  critique

La prise de focus n’est pas visible sur de nombreux éléments.

➡️ Utiliser le style natif du navigateur ou définir un style de focus visible pour chaque élément recevant le focus (rapport de contraste de 3:1 avec les couleurs adjacentes)

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.

Mises en avant - 1 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Les liens vers les pages mises en avant (Transaction, Copopriété…) n’ont pas d’intitulé.

➡️ Fournir un intitulé spécifique (ex. “Ouvrir la page Transaction”) ou générique.
➡️ Cet intitulé peut être :

• du texte visible (recommandé)
• le contenu de l’alternative de l’image (l’élément <svg> doit alors avoir le rôle image role="img" et l’alternative portée par l’attribut aria-label)
• un texte positionné hors écran (class sr-only) doublé de l’utilisation de l’attribut title avec le même contenu

Dans chaque page web, chaque lien a-t-il un intitulé  ?
Critère : 6.2 du RGAA 4.1.2.

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

URL de la page : https://oralia.fr/CGU

Cookies - 1 erreurs recensées sur ce bloc

☐ Scripts (7.1)  moindre

Le lien qui ouvre les préférences d’utilisation des cookies doit être un bouton.

➡️ Utiliser un élément <button> à la place de l’élément <a>

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

Page Mentions légales Cookies Scripts (7.1)

Général - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  important

Le titre de la page n’est pas pertinent.

➡️ Définissez un titre de la page pertinent via l’élément <title> dans le <head>.

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

☐ Présentation (10.11)  moindre

 Le lien de la configuration du navigateur pour Firefox force l’apparition d’un barre de défilement horizontale lorsque le site est affiché dans une page de 320px de largeur.

➡️ Modifier l’intitulé du lien https://support.mozilla.org/fr/kb/activer-desactiver-cookies-preferences?redirectlocale=fr&redirectslug=Activer+et+d%C3%A9sactiver+les+cookies pour éviter l’apparition de la barre de défilement.

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 Annonce - 24 erreurs recensées sur cette page

URL de la page : https://oralia.fr/annonces/TAPP24510?type=transaction&typebien=appartement

Page Annonce

Général - 3 erreurs recensées sur ce bloc

☐ Images (1.1)  critique

Certaines photographies du bien portent la notion d’exclusivité. Cette notion n’apparaît nulle-part ailleurs sur la page.

➡️ Indiquer la notion d’exclusivité dans le contenu de la page à proximité des photographies.

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

Page Annonce Général Images (1.1)

☐ Couleurs (3.2)  critique

Le couple de couleur #E74A72 / #FFFFFF n’offre pas un rapport de contraste suffisant lorsque la taille du texte est inférieure à 24px.

➡️ Augmenter le rapport de contrate 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.

Page Annonce Général Couleurs (3.2)

☐ éléments obligatoires (8.9)  important

 {Général} De très nombreux passages de texte n’ont pas de sémantique précise (entourés par des éléments <div> ou <span>)

➡️ Utiliser la sémantique appropriée (éléments <p> notamment)

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 Annonce Général éléments obligatoires (8.9)

Sélection - 4 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Sélection

☐ Images (1.1)  critique

La notion d’exclusivité n’est pas non plus présente dans images des biens proposés dans la section Notre sélection sur Villefranche et sa région.

➡️ Ajouter un attribut alt="Exclusivité" aux images lorsqu’elles sont porteuses de cette information.

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

Page Annonce Sélection Images (1.1)

☐ Images (1.2)  critique

Les images des biens proposés dans la section Notre sélection sur Villefranche et sa région ne sont pas correctement ignorées.

➡️ Ajouter un attribut alt="" aux images lorsqu’elles ne sont pas porteuses d’information.

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

☐ Scripts (7.1)  important

Le carrousel dans la section Notre sélection sur Villefranche et sa région n’est pas utilisable.

➡️ 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.

☐ Structuration (9.1)  important

Le titre Notre sélection… est de niveau 3 et les annonces qui en dépendent ont des titres de niveau 2

➡️ Utiliser des titres de niveau 4 et 5 pour les annonces de la section

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.

Agence - 4 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Agence

☐ Images (1.2)  moindre

La photographie de l’agence a une alternative textuelle alors qu’il s’agit d’une image de décoration.

➡️ 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 Annonce Agence Images (1.2)

☐ Liens (6.1)  critique

Les liens image (téléphone et facebook) de l’encart Agence ne sont pas explicites.

➡️ Ajouter les attributs role="image" aria-label="téléphone" (avec l’intitulé adéquat) sur les éléments <svg> contenus dans les liens.

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

☐ Scripts (7.3)  critique

Le bouton permettant d’ouvrir la fenêtre de contact dans l’encart Agence n’est pas atteignable 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/ ).
➡️ Ajouter les attributs role="image" aria-label="Envoyer un message" sur l’élément <svg> compris dans le lien.

Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Critère : 7.3 du RGAA 4.1.2.

Page Annonce Agence Scripts (7.3)

☐ Structuration (9.1)  important

 {Agence} Le nom de l’agence est un titre de niveau 2 et devrai être de niveau 3

➡️ Utiliser un titre de niveau 3 pour le nom de l’agence.

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 Annonce Agence Structuration (9.1)

Diagnostics - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Diagnostics

☐ Couleurs (3.2)  important

Le rapport de contraste de score du diagnostic GES est de 3.66:1 au lieu de 4.5:1.

➡️ Augmenter le rapport de contraste (et vérifier le rapport pour tous les scores).

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 Annonce Diagnostics Couleurs (3.2)

☐ Scripts (7.1)  important

Le fenêtre modale de détail des dignostics n’est pas utilisable.

➡️ Implémenter complètement le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) (gestion du focus, nommage…)

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.10)  important

 {Diagnostics} Le résultat des diagnostics est détaillé dans la fenêtre modale. Ce détail peut ne pas être compréhensible.

➡️ Dans la fenêtre modale, ajouter un texte hors écran (.sr-only) expliquant pour les deux diagnostics l’échelle de notation et ajouter un attribut aria-hidden="true"sur l’élément <div> englobant la description de l’échelle.

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.

<div data-v-ab517df8="" data-v-464496b4="" class="grid grid-cols-2 gap-10">
  <p class="sr-only">Note sur une échelle de A à G où A correspond à un logement très performant et G correspond à un logement extrêmement consommateur d'énergie. Le résultat pour ce bien est :</p>
  <div data-v-ab517df8="" data-v-464496b4="" aria-hidden="true">
    <div data-v-ab517df8="" data-v-464496b4="" class="text-xs mt-3 mb-1">Logement très performant</div>
    <div data-v-ab517df8="" data-v-464496b4="" class="flex items-center relative mb-1 ml-3">
       <span data-v-ab517df8="" data-v-464496b4="" class="font-medium absolute" style="left: -10px;">A</span>….

Page Annonce Diagnostics Présentation (10.10)

Dossier - 1 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Le lien menant vers la page Dossier de candidature locataire juste avant le bouton Demander des informations n’a pas d’intitulé.

➡️ Ajouter un intitulé pertinent (ou supprimer le lien s’il s’agit d’une erreur).

Dans chaque page web, chaque lien a-t-il un intitulé  ?
Critère : 6.2 du RGAA 4.1.2.

Page Annonce Dossier Liens (6.2)

Carrousel - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Carrousel

☐ Scripts (7.1)  critique

Le carrousel de photos n’est pas utilisable.

➡️ Le bouton d’ouverture de la fenêtre modale doit être un élément button ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ )
➡️ La fenêtre modale doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ )
➡️ Le carrousel doit 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.

Page Annonce Carrousel Scripts (7.1)

Carte interactive - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Carte interactive

☐ Scripts (7.1)  critique

La fenêtre modale de l’emplacement du bien n’est pas utilisable.

➡️ Le bouton d’ouverture doit être un élément <button> ou implémenter le motif de conception ARIA Button.
➡️ La fenêtre modale doit implémenter complètement le motif de conception ARIA Modal (ttps://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) (capture du focus, nommage…)

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

Page Annonce Carte interactive Scripts (7.1)

Caractéristiques - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Caractéristiques

☐ Scripts (7.1)  important

La fenêtre modale des caractéristiques du bien n’est pas complètement utilisable.

➡️ Implémenter complètement le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) (gestion du focus, nommage…)

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

Page Annonce Caractéristiques Scripts (7.1)

Mentions légales - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Mentions légales

☐ Scripts (7.1)  critique

Le fenêtre modale de mentions légales n’est pas utilisable.

➡️ Le bouton d’ouverture doit être un élément <button> ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ )
➡️ Implémenter complètement le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) (gestion du focus, nommage…)

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

Page Annonce Mentions légales Scripts (7.1)

Description - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Description

☐ Scripts (7.3)  critique

Le composant d’interface permettant d’afficher la description complète n’est pas contrôlable au clavier.

➡️ Le bouton Afficher plus doit être un élément <button> ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ ).
➡️ Le bouton doit être positionné avant la description dans l’ordre du code et positionné visuellement avec css.

Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Critère : 7.3 du RGAA 4.1.2.

Page Annonce Description Scripts (7.3)

Navigation au clavier - 3 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

La prise de focus n’est pas visible sur de nombreux éléments d’interface.

➡️ Utiliser le style natif ou implémenter un style visible.

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.

☐ Navigation (12.8)  critique

De nombreux éléments interactifs ne sont pas compris dans l’ordre des tabulations.

➡️ S’assurer que tous les éléments interactifs de la page sont atteignables au clavier. 💡 Un élément d’interface qui permet une interactivité dans la page (ouverture d’une fenêtre modale, afficher plus…) doit être un élément <button>, pas un élément <a>.

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

☐ Navigation (12.9)  critique

Plusieurs pièges au clavier sont présents dans la page.

➡️ Supprimer les pièges au clavier. Il viennent de l’imbrication de liens dans un lien ou de bouton dans un lien…

Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
Critère : 12.9 du RGAA 4.1.2.

Barème tarifaire - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page Annonce Barème tarifaire

☐ Consultation (13.3)  critique

Le document PDF de barème tarifaire n’est pas accessible et n’a pas d’alternative.

➡️ Fournir un document PDF accessible ou proposer une alternative accessible (page html par exemple).

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Critère : 13.3 du RGAA 4.1.2.

Page de recherche - 10 erreurs recensées sur cette page

URL de la page : https://oralia.fr/list/transaction?q=Paris,%20France

Page de recherche

Annonces - 2 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page de recherche Annonces

☐ Images (1.1)  critique

Le caractère nouveau ou exclusif d’une annonce est indiqué sur les images qui n’ont pas d’alternative textuelle.

➡️ Ajouter un attribut alt exposant ces notions pour les biens concernés.

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

☐ Images (1.2)  important

Les vignettes des annonces ne sont pas correctement ignorées.

➡️ Ajouter un attribut alt="" sur les images.

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

Recherche - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page de recherche Recherche

☐ Couleurs (3.1)  critique

L’état des boutons Location/Vente ou Liste/Carte n’est indiqué que par la couleur.

➡️ Utiliser des liens car le clic provoque un changement d’URL (élément <a>).
➡️ Ajouter un attribut aria-current="page" sur les liens actifs qui n’en ont pas.
➡️ Supprimer les éléments <button> à l’intérieur des liens. 💡La mise en place du motif de conception ARIA Radio Group comme sur le module de recherche de la page d’accueil est également possible, mais le fait que l’adresse de la page change sans que l’utilisateur en soit averti poserait un problème d’accessibilité (critère .4). Il faudrait alors mettre en place un moyen d’avertir l’utilisateur du changement de contexte.

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.

☐ Scripts (7.1)  critique

Le module de recherche n’est pas compatible avec les technologies d’assistance.

➡️ Se référer aux correction indiquées sur le module de recherche de la page d’accueil pour l’implémentation des motifs de conception ARIA.
➡️ Outre le fait que l’ensemble des compostants doit être utilisable au clavier et implémenter correctement les motifs de conception, le changement de contexte (URL de la page) sans que l’utilisateur en soit averti pose un grave problème d’accessibilité (critère 7.4). L’ajout d’un bouton de validation de la recherche permettrait de résoudre simplement ce problème qui nécessiterait de nombreux aménagement complexes autrement.

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)  critique

Dans le module de recherche en affichage mobile, chaque champ doit avoir une étiquette correctement liée.

➡️ Se référer aux critères non-conformes à propos du module de recherche sur mobile sur la page d’accueil pour appliquer les corrections nécessaires.

🚨 Les critères de la thématique formulaire doivent être audités sur cette page une fois les corrections proposées en page P02 apportées.

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

Général - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2)  critique

Certains rapports de contraste ne sont pas suffisament élevés sur la page. Par exemple :

• Le bouton Achat ou les filtres lorsqu’ils sont activés (3.01:1 au lieu de 4.5:1)
• L’indication du flitre de lieu France / Paris (4.02:1 au lieu de 4.5:1)
• La mise en évidence de la page courante de la pagination (2.32: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.

☐ Couleurs (3.3)  critique

Les liens de la pagination ne sont pas suffisament contrastés.

➡️ Augmenter le rapport de contraste entre le fond du composant et le fond de la page pour obtenir 3:1 a minima. 💡Le rapport de contraste entre le texte du lien et le fond du lien doit être de 4.5:1 et le rapport de contraste entre le fond du composant et le fond de la page doit être de 3:1. Ce dernier peut être augmenté avec l’utilisation d’un liseret sombre autour des composants par exemple.

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.

Page de recherche Général Couleurs (3.3)

☐ éléments obligatoires (8.6)  important

La pagination n’est pas reflétée dans le titre de la page.

➡️ Ajouter la mention de la pagination dans le titre de la page (<title>). Cette mention n’est obligatoire qu’à partir de la page 2.

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

Pagination - 1 erreurs recensées sur ce bloc

☐ Structuration (9.2)  important

La pagination n’est pas structurée correctement.

➡️ Utiliser un élément <nav role="nav" aria-label="Pagination">.
➡️ Utiliser une liste ordonnée <ol><li> pour la collection de liens numérotés.
➡️ Utiliser des éléments <a> pour les liens.
➡️ Ajouter un attribut aria-current="page" sur l’élément actif.
➡️ Pour les liens Précédent et Suivant, ajouter l’attribut role="image" et un nom accessible pertinent avec l’attribut aria-label sur les éléments <svg>.

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 au clavier - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

La prise de focus est invisible sur certains composants d’interface.

➡️ Utiliser le style natif ou un style de focus visible (contraste > 3:1 avec les couleurs adjacentes).

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 contenu (cancer du sein) - 9 erreurs recensées sur cette page

URL de la page : https://oralia.fr/p/49/ensemble-contre-le-cancer-du-sein

Page contenu (cancer du sein)

Général - 6 erreurs recensées sur ce bloc

☐ Images (1.2)  important

Les images de décorations ne sont pas correctement ignorées.

➡️ Ajouter un attribut alt="" aux images.

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

☐ Couleurs (3.2)  critique

Le couple de couleur rose et blanc offre un rapport de contraste insuffisant dans certains cas.

➡️ Augmenter le rapport de contraste en vous référant aux tests du RGAA pour les valeurs attendues en fonction des tailles et effets de graisse ( https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2 )

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.

☐ Liens (6.1)  important

Le lien Découvrez la vidéo du Centre Léon Berard n’est pas explicite.

➡️ Reprendre l’intitulé du lien dans l’attribut title

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

☐ Liens (6.2)  important

Le lien image menant vers la vidéo n’a pas d’intitulé.

➡️ Ajouter une alternative à l’image (ex. : alt="Vidéo Centre Léon Bérard - Ensemble contre le cancer du sein") et supprimer l’attrbut title du lien ou reprendre le contenu de l’alternative.

Dans chaque page web, chaque lien a-t-il un intitulé  ?
Critère : 6.2 du RGAA 4.1.2.

☐ éléments obligatoires (8.9)  moindre

Des balises sont utilisées sur la page à des fin de présentation. Par exemple :

• paragraphes vides utilisés pour créer des espaces
• titres pour créer des effets de gras.

➡️ Utiliser la sémantique adéquate et utiliser css pour le style.

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.3)  important

Des listes ne sont pas correctement structurées. Par exemple :

• la liste Oralia mobilise ses forces au travers d’actions internes et externes
• la liste des notes de bas de page

➡️ Structurer les listes avec les éléments <ul><li> ou <ol><li>

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

Page contenu (cancer du sein) Général Structuration (9.3)

Tableaux - 2 erreurs recensées sur ce bloc

☐ Tableaux (5.8)  important

Les tableaux de présentation ne sont pas correctement indiqués.

➡️ Ajouter l’attribut role="presentation"
➡️ Supprimer les éléments et attributs propres aux tableaux de données (<th>, <thead>, <tfoot>, <caption> scope, headers, colgroup, axis, role="rowheader", role="columnheader")

Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données . Cette règle est-elle respectée ?
Critère : 5.8 du RGAA 4.1.2.

☐ Présentation (10.1)  important

Des attributs interdits sont utilisés sur les tableaux de présentation.

➡️ Supprimer les attributs border

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.

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

☐ éléments obligatoires (8.6)  important

Le titre de la page n’est pas pertinent.

➡️ Indiquer un titre de page pertinent. Ex. : “Oralia – Ensemble contre le cancer du sein”

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

Page builder - 13 erreurs recensées sur cette page

URL de la page : https://oralia.fr/gestion/

Page builder

Général - 4 erreurs recensées sur ce bloc

☐ Images (1.2)  important

Les images de décoration sur la page ont une alternative textuelle.

➡️ Laisser l’attribut alt vide sur toutes les images (y compris dans les fenêtres modales)

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

☐ Couleurs (3.2)  critique

Le couple de couleur vert clair / blanc n’est pas suffisamment contrasté.

➡️ 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 obligatoires (8.9)  moindre

Le texte 40 000 Propriétaires bailleurs nous font confiance n’est pas structuré correctement.

➡️ Utiliser l’élément <p> pour structurer le texte.

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 builder Général éléments obligatoires (8.9)

☐ éléments obligatoires (8.9) - 4  important

Dans la deuxième diapositive de la fenêtre modale La location solidaire, le contenu n’est pas structuré correctement.

➡️ Utiliser des titres de niveau 4 <h4> et des paragraphes <p> pour structurer le contenu.

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 builder Général éléments obligatoires (8.9) - 4

Carrousel - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.1)  critique

L’indication de la diapositive courante dans les carrousels n’est donné que par la couleur.

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

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.

Vidéo - 4 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page builder Vidéo

☐ Multimédia (4.1)  critique

La vidéo MyOralia Propriétaire n’a pas de transcription textuelle ni d’audiodescription.

➡️ Mettre à disposition une transcription textuelle accessible.

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.3)  critique

La vidéo MyOralia Propriétaire n’a pas de sous-titres synchronisés.

➡️ Mettre à disposition des sous-titres synchronisés.

Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?
Critère : 4.3 du RGAA 4.1.2.

☐ Multimédia (4.7)  important

La vidéo MyOralia Propriétaire n’est pas clairement identifiable.

➡️ Ajouter un passage de texte avant la vidéo pour l’identifier. Ex. : “Découvrir l’application MyOralia en vidéo”

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

Les attributs width et height sont utilisés sur le lecteur vidéo.

➡️ Supprimer les attributs width et height de l’élément iframe du lecteur vidéo et utiliser css pour définir le style.

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.

MyOralia - 2 erreurs recensées sur ce bloc

☐ Liens (6.1)  critique

L’intitulé du lien en image MyOralia.fr n’est pas explicite.

➡️ Changer l’alternative de l’image en alt="MyOralia.fr"

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

☐ Présentation (10.3)  important

Le lien MyOralia.fr devrait apparaître après le titre adjacent dans l’ordre du code.

➡️ Inverser l’ordre dans le code et utiliser css pour ajuster les styles.

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.

Fenêtres modales - 2 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page builder Fenêtres modales

☐ Scripts (7.1)  critique

Les fenêtres modales ne sont pas compatibles avec les technologies d’assistance.

➡️ Implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ).

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

☐ Navigation (12.11)  critique

Les éléments d’interface permettant l’ouverture des fenêtres modales ne peuvent pas recevoir le focus.

➡️ Utiliser des élémens <button> pour les éléments d’interface offrant une interactivité (y compris dans les fenêtres modales)

Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?
Critère : 12.11 du RGAA 4.1.2.

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

URL de la page : https://oralia.fr/agences

Général - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.2)  critique

Le titre Nos agences Oralia n’est pas suffisamment contrasté.

➡️ Augmenter le contraste pour obtenir 3: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.

Recherche - 2 erreurs recensées sur ce bloc

☐ Couleurs (3.3)  critique

Le champ de recherche n’est pas suffisamment contrasté.

➡️ Augmenter le contraste de la bordure par rapport au fond de la page pour obtenir 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.

☐ Scripts (7.1)  important

Le module d’autocomplétion de la recherche n’est pas utilisable.

➡️ 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.

Agence - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page store locator 1 Agence

☐ Liens (6.2)  critique

Les liens Téléphone et Facebook dans la présentation des agences n’ont pas d’intitulé.

➡️ Ajouter les attributs role="image" et aria-label avec l’intitulé correspondant sur les éléments <svg> dans les liens.
➡️ Faire de même pour le lien Mail, mais utiliser un élément <button> à la place de l’élément <a>

Dans chaque page web, chaque lien a-t-il un intitulé  ?
Critère : 6.2 du RGAA 4.1.2.

Navigation au clavier - 2 erreurs recensées sur ce bloc

☐ Navigation (12.8)  important

L’ordre de tabulation n’est pas cohérent dans la page.

➡️ Supprimer les éléments <button> dans les liens Liste et Carte

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

☐ Navigation (12.9)  critique

La page contient des pièges au clavier.

➡️ Supprimer l’imbrication des liens pour chaque agence et utiliser css pour les styles.

Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
Critère : 12.9 du RGAA 4.1.2.

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

URL de la page : https://oralia.fr/oralia-sully-gestion

Formulaire - 2 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page store locator 2 Formulaire

☐ Images (1.1)  important

L’idication d’avancement du formulaire de contact (1 et 2) se fait à l’aide de svg qui n’ont pas d’alternative textuelle.

➡️ Ajouter les attributs role="image" et aria-label avec l’intitulé correspondant (ex. aria-label="étape 1").

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

☐ Couleurs (3.1)  important

L’indication d’avancement du formulaire est donnée uniquement par la couleur.

➡️ Structurer les étapes en liste à l’aide des balises <ol><li>
➡️ Ajouter l’attribut aria-current="step" sur l’élément correspondant à l’étape courante

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.

Général - 7 erreurs recensées sur ce bloc

☐ Images (1.2)  moindre

Les photographies de l’agence et de ses dirigeants ne sont pas ignorées par les technologies d’assitance.

➡️ 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.

☐ Couleurs (3.2)  critique

 {Général} Plusieurs couples de couleurs posent problème. Par exemple :

• #FFFFFF / #F39900 (contraste de 2.24:1)
• #FFFFFF / #73BA58 (contraste de 2.36:1)
• #FFFFFF / #E74A72 (contraste de 3.74:1)

➡️ Augmenter les rapports de contraste selon les tests du critère sur le RGAA ( https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.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.

☐ Couleurs (3.3)  critique

 {Général} Plusieurs couples de couleurs posent problème. Par exemple :

• #FFFFFF / #F39900 (contraste de 2.24:1)
• #FFFFFF / #73BA58 (contraste de 2.36:1)

➡️ Augmenter les rapports de contraste pour obtenir 3:1 entre la couleur du composant et la couleur de fond.

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.

☐ Liens (6.1)  critique

L’intitulé du lien Standard 01 44 54 21 55 n’est pas explicite.

➡️ Ajouter les attributs role="image" aria-label="Téléphone" sur l’élément <svg>
➡️Reprendre au moins l’intitulé complet dans l’attribut title (title="Composer le numéro de téléphone Standrad 01 44 54 21 55") ou supprimer l’attribut title.

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

☐ Liens (6.1) - 5  moindre

L’image dans le lien facebook doit avoir une alternative vide.

➡️ Ajotuer les attributs role="image" aria-label="" sur l’élément <svg>.

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

☐ Scripts (7.1)  critique

Les composants porteurs d’événements ou de fonctionnalités javascript sur la page doivent être des boutons et avoir un nom accessible pertinent.

➡️ Utiliers des éléments <button> ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ )
➡️ Pour les boutons ayant un intitulé texte et qui comportent une image de décoration, ajouter les attributs role="image" aria-label="" sur l’élément <svg>.
➡️ Pour les boutons ayant uniquement une image comme contenu, role="image" aria-label="[Intitulé]" sur l’élément <svg> avec l’intitulé correspondant (par exemple aria-label="Fermer la fenêtre modale")
➡️ Pour les boutons permettant de copier un texte dans le presse-papier, ajouter un attribut aria-label reprenant le contenu visible puis le contenu de l’attribut title (ex. aria-label="agence ouverte, afficher le planning").

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

☐ éléments obligatoires (8.9)  moindre

Sur la page, des balises sont utilisées à des fin de présentation. Des passages de texte ne sont pas structurés par une sémantique adéquate, des paragraphes vides sont utilisés pour créer des espaces.

➡️ Structurer les passages de texte avec l’élément <p>
➡️ Supprimer les paragraphes vides (dans le formulaire sous la liste déroulante).

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.

Annonce - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page store locator 2 Annonce

☐ Liens (6.1)  important

Les images dans les liens vers les annonces n’ont pas d’alternative textuelle.

➡️ Pour les images porteuses d’information (Ex. “Exclusivité”), ajouter un attribut alt avec le texte correspondant.
➡️ Pour les autres images, ajouter un attribut alt=""

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

Modale - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page store locator 2 Modale

☐ Scripts (7.1)  critique

Les fenêtres modales ne sont pas pleinement utilisables.

➡️ Implémenter complètement le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) pour toutes les fenêtres modales de la page (Nous situer, Planning, Mentions légales dans le formulaire, Mentions légales en bas de page)

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

Carrousel - 1 erreurs recensées sur ce bloc

☐ Scripts (7.1)  critique

Les carrousels des annonces ne sont pas utilisables.

➡️ 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.

Titres - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

La hiérarchie des titres n’est pas cohérente sur la page.

➡️ Les titres des annonces immobilières doivent être de niveau 5 et 6.

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.

Navigation au clavier - 2 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

 {Navigation au clavier} La prise de focus n’est pas visible sur certains éléments. Par exemple, la liste de sélection dans le formulaire, les boutons des carrousels.

➡️ Utiliser le style de focus natif ou définir un style visible avec css.

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.

☐ Navigation (12.8)  important

L’ordre de tabulation n’est pas cohérent sur la page. Ex. sur le lien Téléphone.

➡️ Supprimer l’imbrication lien bouton pour ne conserver que le lien.

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

Planning - 1 erreurs recensées sur ce bloc

☐ Présentation (10.9)  moindre

 Dans la fenêtre modale des horaires d’ouverture de l’agence, le jour courant est indiqué en gras uniquement.

➡️ Ajouter un texte hors écran (.sr-only) indiquant qu’il s’agit du jour courrant. Ex. <p class="sr-only">Aujourd’hui</p>

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.

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

☐ Formulaires (11.1)  important

Le champ de sélection du motif de la demande n’a pas d’étiquette.

➡️ Ajouter une étiquette à la liste de sélection avec l’élément <label>

🚨 Auditer tous les critères formulaire après correction du module de contact comme indiqué en P01

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

Page vérification des comptes en ligne - 14 erreurs recensées sur cette page

URL de la page : https://oralia.fr/decouvrir/myoralia/47/verification-des-comptes-en-ligne

Page vérification des comptes en ligne

Général - 5 erreurs recensées sur ce bloc

☐ Images (1.3)  important

Dans le titre de niveau 1, l’alternative de l’image MyOralia.fr n’est pas pertinente.

➡️ L’alternative doit être alt="MyOralia.fr"

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.

☐ éléments obligatoires (8.6)  critique

Le titre de la page n’est pas pertinent.

➡️ Indiquer un titre de page pertinent dans l’élément <title>

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

☐ Structuration (9.1)  important

Les liens permettant de consulter les vidéos ne doivent pas être des titres.

➡️ Supprimer les éléments <h2>

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.

☐ Structuration (9.3)  important

Les liens permettant de consulter les vidéos ne sont pas structurés en liste.

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

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

☐ Présentation (10.1)  important

Des attributs ou balises de présentation sont utilisés sur la page. Par exemple, l’attribut frameborder sur les élément <iframe> des lecteurs vidéo.

➡️ Supprimer les attributs et balises de présentation et utiliser css pour ajuster les styles. Liste des attributs et balises interdits : https://accessibilite.numerique.gouv.fr/methode/glossaire/#presentation-de-l-information .

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.

Styles - 2 erreurs recensées sur ce bloc

☐ Couleurs (3.2)  critique

Le couple de couleur #00A6DE / #FFFFFF présente un rapport de contraste de 2.8:1

➡️ Augmenter le rapport de contraste pour obtenir 3:1 ou 4.5:1 en fonction des cas.

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.3)  critique

Le couple de couleur #00A6DE / #FFFFFF présente un rapport de contraste de 2.8:1

➡️ Augmenter le rapport de contraste pour obtenir 3:1.

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.

Vidéo - 4 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page vérification des comptes en ligne Vidéo

☐ Multimédia (4.1)  critique

Les vidéos n’ont pas de transcription textuelle.

➡️ Mettre à disposition une transcriprion textuelle accessible via un bouton adjacent à la vidéo par exemple.

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.3)  critique

Les vidéos n’ont pas de sous-titres synchronisés.

➡️ Mettre à disposition des sous-titres synchronisés.

Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?
Critère : 4.3 du RGAA 4.1.2.

☐ Multimédia (4.7)  moindre

La notion de vidéo n’est pas présente dans le texte adjacent.

➡️ Ajouter la notion de vidéo dans le texte adjacent.

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

☐ Présentation (10.7)  important

La prise de focus sur les éléments présents dans le lecteur vidéo n’est pas visible.

➡️ Utiliser le style natif navigateur ou implémenter un style visible pour la prise de focus.

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.

Menu - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Page vérification des comptes en ligne Menu

☐ Structuration (9.2)  important

Le menu de sous-rubriques n’est pas correctement identifié.

➡️ Ajouter un attribut aria-label à l’élément <nav role="navigation"> (ex. `aria-label=“Menu de sous-rubrique”).

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.9)  important

Lorsqu’une sous-rubrique est sélectionnée, l’indication n’est donnée que par un effet de graisse et un soulignement.

➡️ Ajouter un attribut aria-current=“page” au lien

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.

☐ Navigation (12.8)  critique

Les liens du menu de sous-rubrique ne reçoivent pas le focus.

➡️ Utiliser des élément <a> pour les liens.

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

Éléments transverses MyOralia.fr - 38 erreurs recensées sur cette page

URL de la page : https://www.myoralia.fr

Éléments transverses MyOralia.fr

Aide - 20 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses MyOralia.fr Aide

☐ Images (1.1)  critique

Dans certaines notices de l’aide en ligne, des images porteuses d’information n’ont pas d’alternative.

➡️ Vérifier toutes les images des notices pour déterminer si elles sont porteuses d’une information significative. Le cas échéant, ajouter un attribut alt avec l’information ou bien une légende accessible. Dans le cas contraire, alouter un attribut alt vide si l’image n’en a pas.

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

Éléments transverses MyOralia.fr Aide Images (1.1)

☐ Images (1.1) - 2  critique

Dans le module d’autocomplétion du champ de recherche de l’aide en ligne, les images indiquant la catégorie de la notice (Location, Syndic…) n’ont pas d’alternative.

➡️ Ajouter une alternative pertinente avec l’attribut alt.

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

☐ Images (1.2)  important

Dans l’aide en ligne, les image de décoration ne peuvent être correctement ignorées par les technologies d’assistance.

➡️ Ajouter un attribut alt="" au logo MyOralia.fr et à l’image texte (Et si les réponses…).

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

☐ Cadres (2.1)  important

Dans l’aide en ligne, le cadre n’a pas de titre.

➡️ Ajouter un attribut title à l’élément <iframe> (ex. title="Contenu aide en ligne")

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

☐ Cadres (2.1) - 5  important

Dans l’aide en ligne, le cadre du lecteur vidéo n’a pas de titre.

➡️ Ajouter un attribut title à l’élément <iframe> (ex. title="vidéo")

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

☐ Couleurs (3.2)  critique

Dans l’aide en ligne, le texte “Recherchez une aide en ligne” n’est pas suffisamment contrasté.

➡️ Augmenter le rapport de contraste pour obtenir 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.

☐ Couleurs (3.3)  critique

Dans l’aide en ligne, le contraste de la bordure du champ de recherche n’est pas suffisant.

➡️ Augmenter le contraste pour obtenir 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.

☐ Multimédia (4.1)  critique

Dans l’aide en ligne, les vidéos n’ont pas de transciption textuelle.

➡️ Ajouter une transcription textuelle aux vidéos.

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.

Éléments transverses MyOralia.fr Aide Multimédia (4.1)

☐ Multimédia (4.7)  critique

Dans l’aide en ligne, les vidéos ne sont pas clairement identifiables.

➡️ Ajouter une passage de texte avant la vidéo du type “Vidéo + titre de la vidéo”.

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

☐ Liens (6.1)  moindre

Les liens dans l’aide en ligne comportent une icône qui n’est pas ignorée.

➡️ Ajouter un attribut aria-hidden=“true” sur les éléments <i>.

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

Éléments transverses MyOralia.fr Aide Liens (6.1)

☐ Scripts (7.1)  critique

La fenêtre modale de l’aide en ligne n’est pas totalement utilisable.

➡️ Implémenter complètement le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/ ).
➡️ Attention particulièrement à l’ordre de tabulation, le piège au clavier est dysfonctionnel lorsque la touche Majuscule est enfoncée.

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) - 12  important

Le module de recherche n’est pas totalement utilisable.

➡️ Implémenter complètement 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) - 13  important

Dans l’aide en ligne, les composant dépliant ne sont pas utilisables.

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

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) - 14  critique

 {Aide} Dans l’aide en ligne, lorsqu’une thématique est choisie, la notice correspondant n’est pas utilisable.

➡️ La notice devrait s’ouvrir dans une fenêtre modale par dessus la fenêtre modale (qui implémente le motif de conception ARIA Modal).
➡️ Le titre de la fenêtre modale doit être le titre de l’aide.
➡️ Déplacer le focus sur le bouton de retour.
➡️ Supprimer l’attribut aria-hidden sur l’intitulé de ce bouton.
➡️ Ajouter l’attribut aria-hidden sur l’élément <i>
➡️ Au retour sur la fenêtre d’aide en ligne, le focus doit revenir sur l’élément qui a permis l’ouverture de la notice.

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) - 15  important

Le composant d’interface permettant d’ouvrir l’aide en ligne n’est pas un bouton.

➡️ 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.

☐ éléments obligatoires (8.9)  important

Dans l’aide en ligne, des balises sont utilisées à des fins de présentation.

➡️ Supprimer les paragraphes et les titres 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.

☐ Structuration (9.1)  important

Dans l’aide en ligne, dans certaines notices, l’information n’est pas correctement structurée par des titres.

➡️ Vérifier la structuration par les titres dans les notices.

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.

Éléments transverses MyOralia.fr Aide Structuration (9.1)

☐ Structuration (9.3)  important

 {Aide} Dans l’aide en ligne, certaines liste ne sont pas correctement structurées.

➡️ Vérifier la structuration des listes dans les notices d’aide.

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

☐ Présentation (10.1)  important

Des attributs interdits sont utilisés sur le cadre de l’aide en ligne.

➡️ Supprimer les attributs interdits 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.

☐ Consultation (13.3)  critique

Des documents PDF inaccessibles sont proposés au téléchargement dans l’aide en ligne sans alternative accessible.

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Critère : 13.3 du RGAA 4.1.2.

Footer - 2 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses MyOralia.fr Footer

☐ Images (1.2)  moindre

Dans le pied de page, l’image de décoration a 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.

☐ Structuration (9.3)  important

Les liens en pied de page ne sont pas structurés par une liste.

➡️ Utiliser les éléments <ul><li> pour structurer les liens de pied de page.

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

Éléments transverses MyOralia.fr Footer Structuration (9.3)

Sous-menu - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses MyOralia.fr Sous-menu

☐ Couleurs (3.1)  critique

La page active n’est indiquée que par la couleur dans le sous-menu.

➡️ Ajouter un attribut aria-current=page sur le bouton indiquant la page active.

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.

☐ Scripts (7.1)  important

Le sous-menu n’est pas utilisable.

➡️ Implémenter le motif de conception ARIA Disclosure( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ ).
➡️ Ajouter un intitulé avec du texte hors écran (.sr-only) au bouton. Par exemple : <button class="btn btn-secondary menu-toggle"><i class="fa fa-bars fa-lg"></i><span class="sr-only">Ouvrir le sous-menu</span></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 boutons dans le sous-menu ne sont pas activables par l’appui sur la barre d’espace.

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

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

Général - 6 erreurs recensées sur ce bloc

☐ Couleurs (3.2)  critique

Le couple de couleur #F2951E / #FFFFFF offre un rapport de contraste insuffisant (2.31:1).

➡️ Augmenter le rapport de contraste selon les indications des tests du critère 3.2 du RGAA.

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

Le couple de couleur #8E8E8E / #FFFFFF offre un rapport de contraste de 3.28:1

➡️ Augmenter le rapport de 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.

☐ Couleurs (3.3)  critique

1. [Bloquant] {Général} Le couple de couleur #F2951E / #FFFFFF offre un rapport de contraste insuffisant (2.31:1).

➡️ Augmenter le rapport de contraste pour obtenir 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 obligatoires (8.4)  important

Le code de langue de la page n’est pas correctement indiqué (fr_FR au lieu de fr-FR)

➡️ Modifier le code de langue.

Pour chaque page web ayant une langue par défaut, le code de langue est-il pertinent ?
Critère : 8.4 du RGAA 4.1.2.

☐ Navigation (12.6)  important

Aucun landmark n’est présent sur la page.

➡️ Ajouter les landmarks appropriés sur les zones de contenu (header et footer en mode déconnecté, main).
➡️ Ajouter le landmark role="navigation" et un intitulé avec l’attribut aria-label au menu de navigation et au sous-menu.

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.

☐ Navigation (12.7)  important

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

➡️ Mettre en place des liens d’accès rapide permettant d’accéder à la navigation principale et au contenu principal de la page.

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.

Lien - 1 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Le lien en image (Et si les réponses…) n’a pas d’intitulé.

➡️ Ajouter une alternative à l’image comprenant le texte en image.

Dans chaque page web, chaque lien a-t-il un intitulé  ?
Critère : 6.2 du RGAA 4.1.2.

Bandeau de cookies - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses MyOralia.fr Bandeau de cookies

☐ Scripts (7.1)  important

Le bandeau cookies est composé de deux fenêtre modales. L’intitulé accessible de ces trois fenêtres n’est pas clair (“Bienvenue chez Oralia Gestion du consentement”)

➡️ Renseigner des intitulés accessibles (aria-label) distincts et pertinents pour les deux fenêtres modales.

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

☐ Scripts (7.3)  critique

Dans le bandeau de cookies, le choix granulaires des traitements des partenaires n’est pas possible au clavier.

➡️Distinguer les boutons Bloquer et Autoriser des boutons d’ouverture/fermeture des accordéons.

Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Critère : 7.3 du RGAA 4.1.2.

☐ Présentation (10.7)  critique

La prise de focus n’est pas visible sur les composants d’interface du bandeau de choix des cookies (y-compris dans la fenêtre modale).

➡️ Utiliser le style de focus natif navigateur ou implémenter un style visible avec css.

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.

Menu - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses MyOralia.fr Menu

☐ Scripts (7.1)  important

 {Menu} Le menu mobile n’est pas utilisable.

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

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

Navigation au clavier - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

La prise de focus n’est pas visible sur les menu et sous-menu en affichage mobile.

➡️ Utiliser le style natif ou définir un style visible avec css.

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.

Mentions légales - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Éléments transverses MyOralia.fr Mentions légales

☐ Consultation (13.3)  critique

Le document PDF de mentions légales n’est pas accessible et n’a pas d’alternative accessible.

➡️ Créer une page html accessible pour les mentions légales.

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Critère : 13.3 du RGAA 4.1.2.

Page d'authentification - 6 erreurs recensées sur cette page

URL de la page : https://www.myoralia.fr/index.php?

Page d'authentification

Formulaire - 6 erreurs recensées sur ce bloc

☐ Scripts (7.5)  important

Les messages d’erreur du formulaire ne sont pas correctement restitués.

➡️ Implémenter le motif de conception ARIA Alert Dialog ( https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/ ) sur la fenêtre modale.

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.

Page d'authentification Formulaire Scripts (7.5)

☐ Présentation (10.7)  important

Dans le formulaire, la prise de focus des boutons n’est pas visible.

➡️ Utiliser le style natif ou définissez un style visible avec css.

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.

☐ Formulaires (11.1)  critique

Les champs de saisie du formulaire n’ont pas d’étiquette.

➡️ Ajouter une étiquette aux champs avec l’élément <label>.

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

☐ Formulaires (11.1) - 4  important

Dans le formulaire, l’étiquette de la case à cocher n’est pas correctement liée au champ.

➡️ Utiliser l’attriburt for sur l’élément <label>.

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

☐ Formulaires (11.9)  critique

Le bouton permettant de changer la nature du champ Mot de passe n’a pas d’intitulé.

➡️ Ajouter un intitulé au bouton avec un texte hors écran.
➡️ Ajouter l’attribut aria-pressed avec la valeur true ou false en fonction de l’état du bouton.

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

html
<button type="button" class="btn btn-primary  btn-flat" onclick="majpass()" style="margin-bottom: 0px">
<span class="sr-only">Afficher le mot de passe</span>
<span id="passeye" toggle="#password-field" class="fa fa-eye-slash" style="font-size: 20px;"></span>
</button>

☐ Formulaires (11.9) - 6  moindre

L’image de décoration dans le bouton Se connecter a une alternative.

➡️ Supprimer le contenu de l’attribut alt sur l’image de cadenas.

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

Dossier Locataire (Mes dossiers locataires) - 13 erreurs recensées sur cette page

URL de la page : https://myoralia.fr/dlocataire/index4.php

Dossier Locataire (Mes dossiers locataires)

Dossiers - 10 erreurs recensées sur ce bloc

☐ Tableaux (5.8)  important

Le tableau de mise en forme n’est pas correctement formé.

➡️ Ajouter l’attribut role="presentation" sur l’élément <table>

Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données . Cette règle est-elle respectée ?
Critère : 5.8 du RGAA 4.1.2.

☐ Scripts (7.1)  critique

L’intitulé des boutons d’action pour les dossiers n’est pas explicite.

➡️ Ajouter le titre de l’annonce dans un texte hors écran dans l’intitulé du bouton. Par exemple :

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

html
<button type="button" onclick="window.location='index1.php?REFTRM2=GIN04610005-942'" class="btn btn-warning">Transmettre votre dossier<span class="sr-only"> pour l’annonce Appartement 2 Pièce(s) - 68.36 m² RILLIEUX LA PAPE</span></button>

☐ Scripts (7.1) - 3  important

La fenêtre modale permettant de poser une question à propos d’une annonce n’est pas utilisable.

➡️ Implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ )
➡️ Le bouton de fermeture doit être un bouton et avoir un intitulé pertinent (ex. aria-label="Fermer la fenêtre modale")

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

Un clic sur l’image de l’annonce dans la liste des dossiers permet d’ouvrir le détail de l’annonce dans une fenêtre modale. Cette action doit se faire par l’intermédiaire d’un bouton.

➡️ Utiliser un élément <button> pour encadrer l’image et fournir un intitulé pertinent. Cet intitulé peut être un texte hors écran (class sr-only).
➡️ L’image doit avoir un attribut alt vide dans ce bouton Ex. <img alt=""…/>Ouvrir le détail de l’annonce Appartement 2 Pièce(s) - 68.36 m² RILLIEUX LA PAPE

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) - 5  critique

La fenêtre modale de détail de l’annonce n’est pas utilisable.

➡️ Implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ )
➡️ Les boutons ne doivent pas être des liens mais des éléments <button> (ou motif de conception ARIA Button) et avoir un nom accessible pertinent (aria-label ou texte hors écran possible).

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) - 6  important

Le carrousel dans la fenêtre modale du détail de l’annonce n’est pas utilisable.

➡️ 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.

☐ éléments obligatoires (8.9)  important

Dans la fenêtre modale de détail des annonces, la structure de l’information n’est pas correcte.

➡️ Utiliser des éléments <p> pour structurer les passages de texte
➡️ Utiliser des élément <hx> pour structurer les titres de manière cohérente
➡️ Supprimer les paragraphes vides
➡️ …

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.3)  important

Des liste ne sont pas correctement structurées sur la page. Par exemple :

• les boutons d’action pour les dossiers
• les caractéristiques dans le détail d’une annonce

➡️ Utiliser les éléments <ul><li> pour structurer les listes.

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

☐ Formulaires (11.1)  important

Le champ de saisie pour poser une question n’a pas d’étiquette.

➡️ Ajouter une étiquette adjacente et liée au champ avec l’élément <label>.

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

☐ Consultation (13.5)  important

Dans la fenêtre modale de détail des annonces, le contenu cryptique n’a pas d’alternative.

➡️ Ajouter une alternative.

Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ?
Critère : 13.5 du RGAA 4.1.2.

Dossier Locataire (Mes dossiers locataires) Dossiers Consultation (13.5)

Général - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  important

Le titre de la page n’est pas pertinent.

➡️ Définissez un titre de page pertinent pour la page. Ex. <title>Mes dossiers locataire - Espace client - Oralia</title>

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

☐ Structuration (9.1)  important

 La hierarchie des titres n’est pas correcte. Par exemple :

• un titre de niveau 3 apparaît avant le titre de niveau 1
• dans la fenêtre de détail de l’annonce, la hiérarchie des titres est incohérente

➡️ Utiliser les titres de manière appropriée.

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.

Navigation au clavier - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

Le focus n’est pas visible sur les boutons d’action ainsi que sur les boutons d’envoi de question.

➡️ Utiliser le style natif ou définir un style visible avec css.

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.

Dossier Locataire (informations locataires) - 18 erreurs recensées sur cette page

URL de la page : https://myoralia.fr/dlocataire/index1.php?REFTRM2=LAPP46437

Dossier Locataire (informations locataires)

Tabs - 6 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (informations locataires) Tabs

☐ Couleurs (3.2)  critique

Dans le système d’onglets, le contraste de l’onglet actif n’est pas suffisant.

➡️ 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.

☐ Couleurs (3.3)  critique

La bordure des onglets n’est pas suffisamment contrastée.

➡️ Augmenter le rapport de contraste pour obtenir 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.

☐ Scripts (7.1)  important

Le bouton Ajouter un locataire doit être un bouton.

➡️ Utiliser des éléments button ou implémenter complètement le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ ).
➡️ Ne pas l’inclure dans la liste des onglets, mais le placer avant dans l’ordre du code. ➡️ Il doit recevoir le focus avant l’onglet actif (il peut être visuellement à la même place). ➡️ Un texte hors écran (class sr-only) indiquant le nombre de locataires doit être ajouté dans l’intitulé du bouton. Ex. : <button> Ajouter un Locataire<span class="sr-only">. Valeur actuelle : 2 locataires</span></button> ➡️ L’élément <i> doit être ignoré par les technologies d’assistance via l’attribut aria-hidden="true"

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

Le système d’onglets n’est pas fonctionnel.

➡️ 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.

☐ Structuration (9.3)  important

Les onglets ne doivent pas être compris dans une liste.

➡️ Ne pas utiliser les éléments <ul><li> pour le système d’onglets.

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

☐ Présentation (10.11)  critique

Lorsqu’il y a plus de 3 locataires, un défilement horizontal apparaît pour une fenêtre de 320px de largeur.

➡️ Ajuster l’affichage 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.

Formulaire - 10 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (informations locataires) Formulaire

☐ Couleurs (3.3)  critique

La bordure des champs de formulaire n’est pas suffisamment contrastée.

➡️ Augmenter le rapport de contraste pour obtenir 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.

☐ Scripts (7.1)  important

Les boutons Supprimer dans les formulaires doivent être des boutons.

➡️ Utiliser des éléments button ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/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.5)  important

Les messages d’erreur du formulaire ne sont pas restitués.

➡️ Ajouter un attribut role="alert" sur l’élément englobant les messages d’erreur.

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.1)  critique

Dans les formulaires, les étiquettes ne sont pas correctement liées aux champs.

➡️ Utiliser l’attribut for pour lier les étiquettes à leur champs.

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

☐ Formulaires (11.2)  critique

L’étiquette de certains champs n’est pas pertinente. Par exemple, le champ avec l’étiquette “Si autre date que celle disponible pour ce bien”.

➡️ Le texte “Date d’entrée dans les lieux souhaitée” devrait être l’étiquette du champ et le texte “Si autre date que celle disponible pour ce bien” devrait être un paragraphe lié au champ par l’attribut aria-describedby.
➡️ Vérifier l’ensemble des étiquettes dans ce sens.

Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?
Critère : 11.2 du RGAA 4.1.2.

☐ Formulaires (11.5)  critique

Le regroupement des champs de même nature est uniquement visuel.

➡️ Utiliser des éléments <fieldset> et <legend> pour regrouper les champs de même nature.

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, le caractère obligatoire des champs indiqué par une indication graphique (astérisque) n’est pas explicité.

➡️ Ajouter un passage de texte avant le formulaire explicitant la présence de l’astérisque. Ex. : <p>* : champ obligatoire</p>

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

☐ Formulaires (11.10) - 8  important

Dans le formulaire, le message d’erreur concernant le caractère obligatoire des champs ne permet pas d’identifier les champs.

➡️ Ajouter un attribut aria-invalid="true" sur les champs présentant l’erreur.
➡️ Ajouter un passage de texte indiquant l’erreur adjacent à chaque champ en erreur. Ce passage de texte doit être lié au champ par l’attribut aria-describedby.

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

☐ Formulaires (11.12)  important

Dans le formulaire, la suppression d’un locataire ne peut pas être annulée.

➡️ Ajouter une étape de confirmation avant d’effectuer la suppression (avec la fonction javascript confirm() par exemple).

Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?
Critère : 11.12 du RGAA 4.1.2.

☐ Formulaires (11.13)  important

Dans le formulaire, la finalité des champs de saisie ne peut pas être déduite.

➡️ Utiliser l’attribut autocomplete avec la valeur appropriée pour les champs pertinents. Liste des valeurs possibles : 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.

Général - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  important

Le titre de la page n’est pas pertinent.

➡️ Définissez un titre de page pertinent pour la page. Ex. <title>Dossier locataire - Informations locataire - Espace client - Oralia</title>

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

Navigation au clavier - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

Le focus n’est pas visible sur les boutons d’action.

➡️ Utiliser le style natif ou définir un style visible avec css.

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.

Dossier Locataire (informations garants) - 16 erreurs recensées sur cette page

URL de la page : https://myoralia.fr/dlocataire/index2.php

Dossier Locataire (informations garants)

Tabs - 6 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (informations garants) Tabs

☐ Couleurs (3.2)  critique

Dans le système d’onglets, le contraste de l’onglet actif n’est pas suffisant.

➡️ 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.

☐ Couleurs (3.3)  critique

La bordure des onglets n’est pas suffisamment contrastée.

➡️ Augmenter le rapport de contraste pour obtenir 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.

☐ Scripts (7.1)  important

Le bouton Ajouter un garant doit être un bouton.

➡️ Utiliser des éléments button ou implémenter complètement le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ ).
➡️ Ne pas l’inclure dans la liste des onglets, mais le placer avant dans l’ordre du code. ➡️ Il doit recevoir le focus avant l’onglet actif (il peut être visuellement à la même place). ➡️ Un texte hors écran (class sr-only) indiquant le nombre de garants doit être ajouté dans l’intitulé du bouton. Ex. : <button> Ajouter un garant<span class="sr-only">. Valeur actuelle : 1 garant</span></button> ➡️ L’élément <i> doit être ignoré par les technologies d’assistance via l’attribut aria-hidden="true"

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

Le système d’onglets n’est pas fonctionnel.

➡️ Implémenter le motif de conception ARIA Tabs ( https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ )
➡️ Le champ Numéro d’agrément visale doit être exclu de la liste des onglets. Il doit apparaître avant le bouton Ajouter un garant ou après la liste des garants dans l’ordre du code (il peut être visuellement à la même place).

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

☐ Structuration (9.3)  important

Les onglets ne doivent pas être compris dans une liste.

➡️ Ne pas utiliser les éléments <ul><li> pour le système d’onglets (y compris le bouton et le champ).

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

☐ Présentation (10.11)  critique

Lorsqu’il y a au moins un garant, un défilement horizontal apparaît pour une fenêtre de 320px de largeur.

➡️ Ajuster l’affichage 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.

Formulaire - 8 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (informations garants) Formulaire

☐ Couleurs (3.3)  critique

La bordure des champs de formulaire n’est pas suffisamment contrastée.

➡️ Augmenter le rapport de contraste pour obtenir 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.

☐ Scripts (7.1)  important

Les boutons Supprimer dans les formulaires doivent être des boutons.

➡️ Utiliser des éléments button ou implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/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.5)  important

Les messages d’erreur du formulaire ne sont pas restitués.

➡️ Ajouter un attribut role="alert" sur l’élément englobant les messages d’erreur.

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.1)  critique

Dans les formulaires, les étiquettes ne sont pas correctement liées aux champs.

➡️ Utiliser l’attribut for pour lier les étiquettes à leur champs.
➡️ Utiliser l’élément pour les étiquettes qui n’en ont pas (ex. numéro d’agrément Visale)

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

☐ Formulaires (11.5)  critique

Le regroupement des champs de même nature est uniquement visuel.

➡️ Utiliser des éléments <fieldset> et <legend> pour regrouper les champs de même nature.

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, le caractère obligatoire des champs indiqué par une indication graphique (astérisque) n’est pas explicité.

➡️ Ajouter un passage de texte avant le formulaire explicitant la présence de l’astérisque. Ex. : <p>* : champ obligatoire</p>

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, le message d’erreur concernant le caractère obligatoire des champs ne permet pas d’identifier les champs.

➡️ Ajouter un attribut aria-invalid="true" sur les champs présentant l’erreur.
➡️ Ajouter un passage de texte indiquant l’erreur adjacent à chaque champ en erreur. Ce passage de texte doit être lié au champ par l’attribut aria-describedby.

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

☐ Formulaires (11.12)  important

Dans le formulaire, la suppression d’un garant ne peut pas être annulée.

➡️ Ajouter une étape de confirmation avant d’effectuer la suppression (avec la fonction javascript confirm() par exemple).

Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?
Critère : 11.12 du RGAA 4.1.2.

Général - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  important

Le titre de la page n’est pas pertinent.

➡️ Définissez un titre de page pertinent pour la page. Ex. <title>Dossier locataire - Informations garants - Espace client - Oralia</title>

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

Navigation au clavier - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

Le focus n’est pas visible sur les boutons d’action.

➡️ Utiliser le style natif ou définir un style visible avec css.

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.

Dossier Locataire (dépôt des pièces) - 18 erreurs recensées sur cette page

URL de la page : https://myoralia.fr/dlocataire/index3.php

Dossier Locataire (dépôt des pièces)

Formulaire - 12 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (dépôt des pièces) Formulaire

☐ Couleurs (3.1)  critique

Les pièces obligatoires manquantes à la soumission du formulaire ne sont indiquées que visuellement par la couleur.

➡️ Indiquer les pièces manquantes dans le message d’erreur.
➡️ Ajouter un texte hors écran dans l’intitulé de chaque pièce manquante (class sr-only). Par exemple Pièce d’identité<span class="sr-only"> pièce manquante</span>

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.

☐ Tableaux (5.8)  important

Le tableau de mise en forme utilise des éléments de tableau de données.

➡️ Ajouter l’attribut role="presentation" sur l’élément <table>.
➡️ Supprimer les éléments <thead> et <th> pour n’utiliser que des éléments <tr><td>.

Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données . Cette règle est-elle respectée ?
Critère : 5.8 du RGAA 4.1.2.

☐ Liens (6.1)  critique

Les boutons de visualisation des pièces déjà téléversées n’ont pas d’intitulé explicite.

➡️ Ajouter un attribut role="img" sur l’élémernt <i> ainsi qu’un attribut aria-label (par exemple aria-label="visualiser [nom de la pièce téléversée]").
➡️ L’intitulé de l’attribut aria-label peut être repris dans un attribut title sur le lien.

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

☐ Scripts (7.1)  critique

Dans le formulaire, les boutons relatifs aux documents n’ont pas d’intitulé.

➡️ Les éléments interactifs doivent être des éléments <button> (hors lien de visualisation d’une pièce déjà transmise).
➡️ Attention au cas du bouton i qui ouvre le tooltip, il ne doit pas être compris dans l’élément <a>.
➡️ Ajouter un attribut role="img" sur les élémernts <i> ainsi qu’un attribut aria-label (par exemple aria-label="Ajouter un fichier pour Pièce d’identité").

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) - 5  critique

Dans le formulaire, la bulle d’information n’est pas utilisable.

➡️ Implémenter le motid de conception ARIA Tooltip ( https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ ).

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

☐ Scripts (7.5)  critique

Les messages d’erreur du formulaire ne sont pas restitués.

➡️ Ajouter un attribut role="alert" sur l’élément dans lequel sont insérés les messages d’erreur.

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.

☐ Scripts (7.5) - 7  important

 {Formulaire} La progression lors de l’envoi des pièces n’est pas restituée.

➡️ Implémenter les fonctionnalités ARIA Progressbar sur la barre de progression https://w3c.github.io/aria/#progressbar
➡️ Déplacer le focus sur l’élément progressbar lorsque l’utilisateur a choisi un fichier.

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.

☐ éléments obligatoires (8.9)  moindre

 Des balises sont utilisées uniquement à des fins de présentation.

➡️ Les noms des pièces doivent être compris dans 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)  critique

L’information n’est pas correctement structurée.

➡️ Utiliser une hierarchie de titres pour refléter la hiérarchie visuelle.
➡️ Attention, le titre “Dossier locataire” étant de niveau 3, la hiérarchie doit être cohérente.
➡️ Attention, les éléments natifs ne vont pas au-delà du sixième niveau (<h6>), il faudrait utiliser role="heading" aria-level="7" (ou commencer par un h1 dans la page).

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.

<h3>Dossier locataire</h3>
<h4>Locataire 1 : …</h4>
<h5>Documents prioritaires</h5>
<h6>Documents relatifs à votre identité</h6>
<div role="heading" aria-level="7">Pièce d'identité</div>

☐ Présentation (10.2)  critique

Dans le formulaire, l’icone indiquant le caractère obligatoire d’une pièce n’a pas d’alternative textuelle.

➡️ Ajouter les attributs role="img" aria-label="Pièce obligatoire" sur l’élément <i>.

Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Critère : 10.2 du RGAA 4.1.2.

☐ Présentation (10.3)  critique

L’information n’est pas compréhensible lorsque les feuilles de styles sont désactivées.

➡️ Le nom de la pièce doit apparaître en premier dans l’ordre du code.
➡️ Vient ensuite le caractère obligatoire de la pièce (peut être compris dans le titre de la pièce), puis le bouton d’ouverture du tooltip d’information, puis le bouton d’ajout de fichier.
➡️ Utiliser css pour afficher les éléments dans l’ordre souhaité.
➡️ Ajouter un texte hors écran avant le nom d’un fichier transmis avec la référence au type de pièce (par exemple Fichier transmis pour Pièce d’identité :[nom du fichier])
➡️ Les lien et bouton relatif au fichier doivent reprendre le nom du fichier dans l’intitulé compris dans l’attribut aria-label

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.

☐ Formulaires (11.10)  important

 Le caractère obligatoire des champs du formulaire indiqué par la présence de l’astérix n’est pas explicité.

➡️ Ajouter un passage de texte avant le formulaire. Par exemple : “* ou  : champ obligatoire”

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

Attention - 1 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (dépôt des pièces) Attention

☐ Couleurs (3.2)  critique

Le texte de notice sur la nature des documents à fournir n’est pas suffisamment contrastée (4: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.

Tabs - 3 erreurs recensées sur ce bloc  - Accéder à la capture écran

Dossier Locataire (dépôt des pièces) Tabs

☐ Couleurs (3.2)  critique

Dans le système d’onglets, le contraste de l’onglet actif n’est pas suffisant.

➡️ 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.

☐ Couleurs (3.3)  critique

La bordure des onglets n’est pas suffisamment contrastée.

➡️ Augmenter le rapport de contraste pour obtenir 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.

☐ Structuration (9.3)  critique

La liste des locataires et garants sous forme d’onglets n’est pas correctement structurée.

➡️ 💡 Cette liste n’est pas à traiter en tant que Tabs comme sur les pages précédentes, mais comme navigation.
➡️ Supprimer l’attribut role="tablist" de l’élément <ul>
➡️ Ajouter un élément englobant avec le rôle navigation et un label (par exemple : <div role="navigation" aria-label="Liste des locataires et garants pour lesquels fournir les pièces"><ul>[…]</ul></div>
➡️ Ajouter un attribut aria-current="page" sur le lien de la personne concernée

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

Général - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  important

Le titre de la page n’est pas pertinent.

➡️ Définissez un titre de page pertinent pour la page. Ex. <title>Dossier locataire - Dépot de pièces - Espace client – Oralia</title>

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

Navigation au clavier - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7)  critique

Le focus n’est pas visible sur les boutons d’action.

➡️ Utiliser le style natif ou définir un style visible avec css.

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.