Recommandations pour evoriel.fr

74
Erreurs total
0
Erreurs corrigées

Notes correctives

Beaucoup de petites erreurs

Le site evoriel.fr est parfait pour gagner en compétences sur l’accessibilité. Il est simple, clair et la plupart des erreurs sont simples à corriger. Ces erreurs concernent les développeurs, les designers mais également les contributeurs.

Avec un score de moins de 50%, le site est non-conforme. Avec peu de travail, il est possible d’améliorer significativement ce score.

Pour de nombreux utilisateurs handicapés, il est actuellement impossible d’accéder à certaines pages ou à certaines informations. Il est donc primordial de corriger les points bloquants, notamment sur les sujets autour de la navigation.

Les erreurs de contribution les plus courantes

Images

La quasi totalité des images présentes sur le site sont des images d’illustration. Elles n’apportent pas d’information significative en complément du texte alentour. Pour toutes ces images, il est nécessaire de laisser le champ d’alternative textuelle vide.

La navigation d’un utilisateur de lecteur d’écran (utilisateur aveugle ou grand malvoyant) est notablement alourdie par la vocalisation des images qui n’ont pas besoin de l’être.

Une image est porteuse d’information lorsqu’elle comporte des éléments significatifs, textuels ou non, qui ne sont pas dans le texte. Par exemple, une vignette d’actualité qui comporte un nom de marque qui n’est pas repris dans le titre de l’actualité.

Une personne aveugle aura accès via son lecteur d’écran au titre de l’actualité, mais pas au contenu de l’image. Il est alors nécessaire de fournir une alternative textuelle à l’image afin de faire apparaître le nom de la marque.

C’est le cas par exemple de la vignette de l’actualité Evoriel Bridgepoint. Bridgepoint apparaît sur l’image, mais pas dans le titre ( https://www.evoriel.fr/notre-actualite?page=2) .

Pour les autres actualités, les images ne sont pas porteuses d’information significative qui n’apparaît pas dans le titre. Leur alternative textuelle doit alors être laissée vide.

Paragraphes ou titres vides utilisés pour créer des espacements

Certaines technologies d’assistance restituent les paragraphes ou les titres lorsqu’ils sont vides. Un utilisateur de ces technologies d’assistance va donc être gêné (par exemple, entendre “vide, vide, vide, vide”) lorsqu’il parcourra un contenu dans lequel ont été utilisés des paragraphes ou des titres vides pour créer de l’espace dans un texte.

La mise en page doit être réalisée via les styles css et les titres et paragraphes vides doivent être supprimés.

Listes

Lorsqu’une liste apparaît dans un texte, il est essentiel d’utiliser l’outil de création de liste et non de réaliser une liste visuelle à l’aide de tirets ou de puces.

Les technologies d’assistance donnent des informations essentielles à la compréhension lorsque l’utilisateur navigue sur une liste. Si la liste n’est pas correctement structurée, un utilisateur de lecteur d’écran ne comprendra pas forcément qu’il s’agit d’une liste, il ne pourra pas comprendre non plus qu’il aura changé d’item, etc. Où commence la liste, où finit-elle, combien comporte-t-elle d’items ? Toutes ces informations sont données par les technologies d’assistance lorsqu’une liste est correctement structurée.

Citations

De même que pour les listes, l’utilisation des outils de création de citations appropriés est essentielle à la compréhension de nombreux utilisateurs. Il existe deux types de citations, les citations en ligne (dans le cours du texte) et les citation en bloc (citation qui forme un paragraphe à part entière). Votre outil de contribution devrait vous permettre d’intégrer les deux types de citations correctement.

Mots anglais

Un mot ou un ensemble de mots écrit dans une autre langue dans une page en français peut être totalement incompréhensible pour les utilisateurs de lecteur d’écran. Votre outil de contribution devrait vous permettre de définir la langue du mot. Sur evoriel.fr, les termes Property Management reviennent régulièrement.

Vidéos

Rendre une vidéo accessible à tous peut vite représenter une somme de travail colossale !

Un utilisateur sourd ou malentendant ne peut percevoir le son, peut également avoir de grandes difficultés à lire les textes, un utilisateur aveugle ou malvoyant ne pourra pas voir ce qui s’y passe, un utilisateur avec un trouble de l’attention ou une dyslexie préfèrera de loin un texte statique…

Aussi, à chaque fois que vous souhaitez intégrer une vidéo dans le site, pensez accessibilité. Une version accessible (textuelle) du contenu est-elle disponible a minima ? Est-ce possible de fournir des sous-titres ? Une audiodescription ? Une transcription textuelle ?

Document bureautique

Le format PDF est extrêmement répandu, il est pourtant bien plus simple de rendre accessible une page html ou un document word qu’un document PDF.

Assurez-vous, lorsque vous publiez un communiqué de presse, que l’ensemble des informations comprises dans le document PDF sont présentes dans la page web. Celle-ci fournira une alternative accessible à défaut de mettre en place un processus de production de PDF accessibles.

Les erreurs bloquantes

Ces erreurs sont à corriger par l’équipe de production du site.

Le menu de navigation présente de nombreux problème et empêche les utilisateurs qui naviguent au clavier d’accéder aux pages.

La navigation principale doit être identifiée à l’aide d’une balise nav, l’ensemble des items doivent être compris dans une liste ul/li, et les comportements javascript doivent impérativement suivre les motifs de conception ARIA (Button, Disclosure, Modal)

Le formulaire de contact

Les champs personnalisés du formulaire ne sont pas utilisables au clavier. Les utilisateurs qui naviguent au clavier sont nombreux…

Il est préférable d’utiliser les éléments natifs. Si ce n’est pas envisageable, suivez les motifs de conception ARIA.

De nombreux autres points sont très gênants sur le formulaire, veillez à utiliser correctement les attributs ARIA, autocomplete et à fournir des exemples de saisie perceptibles (pas dans le placeholder).

Liens vides

Certains liens n’ont pas d’intitulé accessible (les expertises sur la page groupe). Il est essentiel de fournir un intitulé accessible (texte ou légende d’image).

Contrastes

Certaines prises de focus sont imperceptibles pour les utilisateurs malvoyant. Ne surchargez pas le style de focus par défaut ou assurez-vous qu’il soit suffisamment contrasté.

Erreurs à corriger

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

Lot 1 :: corrigées 0/13
Intitulé	Page	Bloc	Critère
Scripts (7.1) ❌ Le bandeu cookies doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) ➡️ Le focus doit être conservé dans le contenu du bandeau lorsqu’il est ouvert ➡️ Les attributs et rôles ARIA ainsi que les comportements attendus doivent être implémentés	Éléments transverses	Bandeau cookies	7.1 du RGAA
Navigation (12.8) ❌ Le choix de l’utilisation des cookies est préalable à la consultation de la page, le bandeau doit être le premier élément dans l’ordre du code.	Éléments transverses	Bandeau cookies	12.8 du RGAA
Structuration (9.2) ❌ Le fil d’Ariane n’est pas structuré via une balise `<nav>`. ➡️ Structurer le fil d’Ariane avec une balise `<nav>`	Éléments transverses	Fil d’Ariane	9.2 du RGAA
Structuration (9.3) ❌ Les liens Mentions légales et Politique de données personnelles doivent être compris dans une liste non ordonnée ➡️ Utiliser les balises `<ul><li>` pour structurer les liens.	Éléments transverses	Footer	9.3 du RGAA
Structuration (9.2) ❌ La zone d’en-tête de la page n’est pas structurée via une balise `<header>` ➡️ Structurer la zone d’en-tête avec une balise `<header role="banner">`	Éléments transverses	Header	9.2 du RGAA
Navigation (12.6) ❌ Les zones de contenus ne peuvent être atteintes ou évitées. ➡️ Ajouter l’attribut role à la zone de contenu principal `<main role="main">` ➡️ Ajouter l’attribut role à la zone de pied de page `<footer role="contentinfo">`	Éléments transverses	Landmarks	12.6 du RGAA
Navigation (12.7) ❌ Le site ne dispose pas de lien d’accès rapide. ➡️ Ajouter un lien d’accès rapide pour accéder au contenu a minima ➡️ Ce lien doit être le premier élément à recevoir le focus après le bandeau cookies ➡️ Il peut être caché par défaut et s’afficher uniquement lorsqu’il reçoit le focus ➡️ Au clic sur ce lien, déplacer le focus sur la zone de contenu principal (il est possible d’ajouter un attribut `tabindex="-1"` sur l’élément `<main>`et de déplacer le focus sur cet élément)	Éléments transverses	Lien d’accès rapide	12.7 du RGAA
Scripts (7.1) ❌ Le menu mobile doit implémenter le motif de conception ARIA Modal ( https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ) et être contrôlable au clavier. ➡️ Les boutons burger et close doivent être des boutons avec un intitulé perceptible par les technologies d’assistance (par ex. aria-label) ➡️ Gestion du piège de focus ➡️ Focus sur le bouton fermer à l’ouverture ➡️ Gestion du scroll dans le menu ➡️ Gestion de l’arrêt du scroll sur la page en fond ➡️ Attributs aria et sémantique	Éléments transverses	Menu mobile	7.1 du RGAA
Présentation (10.4) ❌ Les items du menu mobile ne sont pas utilisables lorsque la taille des caractères est augmenté à 200 %. ➡️ Permettre aux utilisateurs de naviguer dans le menu mobile, par exemple en permettant le défilement vertical lorsqu’il est ouvert.	Éléments transverses	Menu mobile	10.4 du RGAA
Structuration (9.2) ❌ La navigation principale n’est pas structurée via une balise `<nav>`. ➡️ Structurer la navigation principale avec une balise `<nav role="navigation" aria-label="Navigation principale">`	Éléments transverses	Menu	9.2 du RGAA
Structuration (9.3) ❌ Les liens de la navigation principale doivent être structurés dans une liste. ➡️ Utilisez les balises `<ul><li>` pour structurer l’ensemble des éléments de la navigation prinicpale dans une liste non ordonnée (y compris les sous-menus).	Éléments transverses	Menu	9.3 du RGAA
Navigation (12.11) ❌ Les sous-menus de la navigation principale ne sont pas atteignables au clavier. ➡️ Les menus déroulants doivent implémenter le motif de conception ARIA Disclosure ( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ ) ➡️ Utiliser des boutons à la place des liens d’ouverture (à privilégier) ou bien implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ ).	Éléments transverses	Menu	12.11 du RGAA
Navigation (12.1) ❌ Un seul système de navigation est mis à disposition des utilisateurs. ➡️ Mettre un second système de navigation en place, par exemple, un plan du site.	Éléments transverses	Plan du site	12.1 du RGAA

Liste des pages auditées

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

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

Menu mobile - 2 erreurs recensées sur ce bloc

☐ Scripts (7.1) critique

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

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

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

Éléments transverses Menu mobile Scripts (7.1)

☐ Présentation (10.4) critique

Les items du menu mobile ne sont pas utilisables lorsque la taille des caractères est augmenté à 200 %.

➡️ Permettre aux utilisateurs de naviguer dans le menu mobile, par exemple en permettant le défilement vertical lorsqu’il est ouvert.

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

Éléments transverses Menu mobile Présentation (10.4)

Bandeau cookies - 2 erreurs recensées sur ce bloc

☐ Scripts (7.1) important

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

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

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

Éléments transverses Bandeau cookies Scripts (7.1)

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

Header - 1 erreurs recensées sur ce bloc

☐ Structuration (9.2) important

La zone d’en-tête de la page n’est pas structurée via une balise <header>

➡️ Structurer la zone d’en-tête avec une balise <header role="banner">

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

Code modifié

<header class="container-fluid" role="banner">
    <div class="row">
        <div class="col-lg-12 header" web-developer-inline-style="">
            <a class="navbar-brand" href="/">…

Éléments transverses Header Structuration (9.2)

Menu - 3 erreurs recensées sur ce bloc

☐ Structuration (9.2) important

La navigation principale n’est pas structurée via une balise <nav>.

➡️ Structurer la navigation principale avec une balise <nav role="navigation" aria-label="Navigation principale">

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

Code modifié

<nav role="navigation" aria-label="Navigation principale" class="header__menu">
                    <div class="header__menu--mobile-wrapper">
                                                                                                                <div class="dropdown">..
.

Éléments transverses Menu Structuration (9.2)

☐ Structuration (9.3) important

Les liens de la navigation principale doivent être structurés dans une liste.

➡️ Utilisez les balises <ul><li> pour structurer l’ensemble des éléments de la navigation prinicpale dans une liste non ordonnée (y compris les sous-menus).

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

Éléments transverses Menu Structuration (9.3)

☐ Navigation (12.11) critique

Les sous-menus de la navigation principale ne sont pas atteignables au clavier.

➡️ Les menus déroulants doivent implémenter le motif de conception ARIA Disclosure ( https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ )
➡️ Utiliser des boutons à la place des liens d’ouverture (à privilégier) ou bien implémenter le motif de conception ARIA Button ( https://www.w3.org/WAI/ARIA/apg/patterns/button/ ).

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.

Éléments transverses Menu Navigation (12.11)

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

☐ Structuration (9.2) important

Le fil d’Ariane n’est pas structuré via une balise <nav>.

➡️ Structurer le fil d’Ariane avec une balise <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.

Code modifié

<nav role="navigation" aria-label="Fil d’Ariane">

Éléments transverses Fil d’Ariane Structuration (9.2)

Footer - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3) moindre

Les liens Mentions légales et Politique de données personnelles doivent être compris dans une liste non ordonnée

➡️ Utiliser les balises <ul><li> pour structurer 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 Footer Structuration (9.3)

Plan du site - 1 erreurs recensées sur ce bloc

☐ Navigation (12.1) important

Un seul système de navigation est mis à disposition des utilisateurs.

➡️ Mettre un second système de navigation en place, par exemple, un plan du site.

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

Landmarks - 1 erreurs recensées sur ce bloc

☐ Navigation (12.6) moindre

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

➡️ Ajouter l’attribut role à la zone de contenu principal <main role="main">
➡️ Ajouter l’attribut role à la zone de pied de page <footer role="contentinfo">

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.

Lien d’accès rapide - 1 erreurs recensées sur ce bloc

☐ Navigation (12.7) important

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

➡️ Ajouter un lien d’accès rapide pour accéder au contenu a minima
➡️ Ce lien doit être le premier élément à recevoir le focus après le bandeau cookies
➡️ Il peut être caché par défaut et s’afficher uniquement lorsqu’il reçoit le focus
➡️ Au clic sur ce lien, déplacer le focus sur la zone de contenu principal (il est possible d’ajouter un attribut tabindex="-1" sur l’élément <main>et de déplacer le focus sur cet élément)

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

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

Contenu - 6 erreurs recensées sur ce bloc

☐ Images (1.2) important

Toutes les images de la page (hors éléments transverses) sont à considérer comme des images de décoration et ont actuellement une alternative textuelle.

➡️ Laisser l’attribut alt vide (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 d'accueil Contenu Images (1.2)

☐ éléments obligatoires (8.7) moindre

Le changement de langue devrait être indiqué pour le terme Property Management

➡️Indiquer le changement de langue à l’aide d’un attribut lang. Ex. <span lang"en">Property Management</span>

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

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

☐ éléments obligatoires (8.9) moindre

Dans la partie vœux et la partie marques, des paragraphes vides sont utilisés pour créer des espaces.

➡️ Supprimer les pagraphes vides et utiliser css pour adapter la présentation.

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

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

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

Dans les sections mission et contact, le texte est compris dans un élément div

➡️ Utiliser un élément p

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

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

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

Dans la section des chiffres clés, les chiffres ne doivent pas être des titres.

➡️ Utiliser des éléments pet css pour adapter la présentation

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

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

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

L’exergue de la page (3100 experts…) ne devrait pas être un titre.

➡️ Utiliser un éléments p et css pour adapter la présentation

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

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

Actualités - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le contraste de la date et du type des actualités est de 3.07:1

➡️ Augmenter le contraste pour parvenir à 4.5:1

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

Page d'accueil Actualités Couleurs (3.2)

☐ Liens (6.1) important

Les liens menant vers les actualités ne sont pas explicites. Le contexte n’est pas suffisament clair, le paragraphe précédent est la date et le titre de l’actualité n’a pas la sémantique d’un titre.

➡️ Mettre les titres des actualités en titre de niveau 3
➡️ Éventuellement, ajouter l’intitulé du titre de l’actualité dans le lien en texte hors écran (.sr-only) <a href….>Consulter <span class="sr-only">La tribune…</span></a>

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

Page d'accueil Actualités Liens (6.1)

☐ Présentation (10.3) important

La structure des remontées des actualités doit être modifiée pour pouvoir être compréhensible.

➡️ Le titre des actualités doit être le premier élément dans l’ordre du code
➡️ Passer le titre en h3 (cf 6.1)
➡️ Utiliser css pour modifier visuellement l’ordre des éléments

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.

Page d'accueil Actualités Présentation (10.3)

Focus - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

Le focus sur les liens vers les marques n’est pas suffisament perceptible

➡️ Laisser le style de focus natif ou définissez un focus visible avec css pour les liens précédent et suivant
➡️ Augmenter le contraste pour les liens de numéro de page pour obtenir 3:1 a minima (1.41:1 actuellement)

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 nous contacter - 14 erreurs recensées sur cette page

URL de la page : https://www.evoriel.fr/contactez-nous

Formulaire - 13 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le lien dans l’encart des données personnelles n’offre pas un contraste suffisant (3.85 au lieu de 4.5)

➡️ Augmenter le contraste entre le lien et l’arrière plan.

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

Page nous contacter Formulaire Couleurs (3.2)

☐ Couleurs (3.3) important

La bordure de la liste déroulante n’est pas suffisament contrastée.

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

Page nous contacter Formulaire Couleurs (3.3)

☐ Scripts (7.3) critique

Les boutons radio ne sont pas contrôlables par le clavier.

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

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 nous contacter Formulaire Scripts (7.3)

☐ Scripts (7.3) - 4 critique

La case à cocher n’est pas contrôlable par le clavier.

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

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 nous contacter Formulaire Scripts (7.3) - 4

☐ Présentation (10.11) important

Le texte à propos des données personnelles n’est pas complètement lisible.

➡️ Ajuster l’affichage du texte pour qu’il soit lisible lorsque la fenêtre a une largeur de 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.

Page nous contacter Formulaire Présentation (10.11)

☐ Formulaires (11.5) important

Les options de la civilité doivent être regroupées dans le code.

➡️ Utiliser un élément fieldset pour les regrouper Ex.

🚨 Vérifier les cirtères 11.6 et 11.7 après correction de ce point.

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

Code modifié

<fieldset class="form-field civility">
  <legend class="col-form-label required">Civilité*</legend>

Page nous contacter Formulaire Formulaires (11.5)

☐ Formulaires (11.10) important

La mention indiquant les champs obligatoires doit précéder le formulaire.

➡️ Déplacer la mention en début de formulaire (dans le code et visuellement)

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

Page nous contacter Formulaire Formulaires (11.10)

☐ Formulaires (11.10) - 8 important

Le caractère obligatoire du champ d’optin n’est pas indiqué.

➡️ Ajouter une asterisque au label
➡️ Ou bien modifier la mention en début de formulaire pour indiquer que tous les champs sont obligatoires et supprimer les asterisques sur tous les labels

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

Page nous contacter Formulaire Formulaires (11.10) - 8

☐ Formulaires (11.10) - 9 important

Les messages d’erreur indiquant l’absence de saisie des champs ne sont pas correctement liés aux champs.

➡️ Ajouter l’attribut aria-invalid="true" sur les champs qui renvoient l’erreur
➡️ Utiliser l’attribut aria-described-by pour relier les champs et les messages d’erreur associés

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

Page nous contacter Formulaire Formulaires (11.10) - 9

☐ Formulaires (11.10) - 10 important

Les messages d’erreur concernant les types de donnée attendus pour les champ Prénom, Nom et Email ne sont pas correctement liés aux champs.

➡️ Ajouter l’attribut aria-invalid="true" sur les champs qui renvoient l’erreur
➡️ Utiliser l’attribut aria-described-by pour relier les champs et les messages d’erreur associés

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

Page nous contacter Formulaire Formulaires (11.10) - 10

☐ Formulaires (11.10) - 11 important

Les exemples de saisie pour les différents champs ne doivent pas être uniquement présents dans l’attribut placeholder.

➡️ Ajouter les exemples de saisie dans les étiquettes des champs ou bien dans un passage de texte adjacent au champ et lié au champ via l’attribut aria-described-by Ex. : Email ( nomprenom@domain.fr )*

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

Page nous contacter Formulaire Formulaires (11.10) - 11

☐ Formulaires (11.11) important

Les messages d’erreur sur les format de données attendus pour les champs Prénom, Nom et Email doivent comporter un exemple réel de saisie.

➡️ Ajouter un exemple réel de saisie (Ex. “L’adresse email n’est pas valide, (exemple : michel@evoriel.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.

Page nous contacter Formulaire Formulaires (11.11)

☐ Formulaires (11.13) important

Les champs Nom, Prénom et Email doivent permettre le remplissage automatique

➡️ Utiliser l’attribut autocomplete avec la valeur correspondant au champ (ex. autocomplete="name"). Liste des valeurs possibles : https://www.w3.org/Translations/WCAG21-fr/#input-purposes

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.

Focus - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

Le focus sur les champs du formulaire n’est pas suffisament perceptible

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 Mentions légales - 3 erreurs recensées sur cette page

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

Contenu - 3 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9) moindre

De nombreux paragraphes et titre visdes sont utilisés pour créer des espaces

➡️ Supprimer ces paragraphes et titres vides et utiliser css pour ajuster les espaces.

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

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

☐ Structuration (9.1) important

De nombreux titres apparaissent et n’ont pas la sémantique adéquate

➡️ Utiliser les éléments h2, h3 etc. pour structurer les titres de 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.

Page Mentions légales Contenu Structuration (9.1)

☐ Structuration (9.3) important

De nombreuses listes apparaissent et n’utilisent pas la sémantique adéquate

➡️ Utiliser les élémens <ul><li> pour structurer correctement les listes non ordonnées et <dl><dt><dd> pour les listes de définition (voir la définition d’une liste dans le glossaire du RGAA : https://accessibilite.numerique.gouv.fr/methode/glossaire/#listes )

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

Page Mentions légales Contenu Structuration (9.3)

Page builder - 5 erreurs recensées sur cette page

URL de la page : https://www.evoriel.fr/qui-sommes-nous/le-groupe

Expertises - 2 erreurs recensées sur ce bloc

☐ Liens (6.2) critique

Les liens dans le bloc “Nos expertises” n’ont pas d’intitulé

➡️ Fournir un intitulé, cet intitulé peut être du texte hors écran (.sr-only) et être un intitulé générique Ex. : <span class="sr-only">Ouvrir</span>

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

☐ Structuration (9.1) important

Les textes décrivant l’expertise ne doivent pas être des titres

➡️ Utiliser des éléments <p> à la place des éléments <h5>

🚨 Permet de redonner de la cohérence au contexte des liens lorsqu’ils auront un intitulé

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.

Contenu - 3 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.7) moindre

Le terme “property management” apparaît à plusieurs reprises

➡️ Indique le changement de langue via l’attribut lang="en"

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

Page builder Contenu éléments obligatoires (8.7)

☐ éléments obligatoires (8.9) important

Dans la section des chiffres clés, les chiffres ne doivent pas être des titres.

➡️ Utiliser des éléments pet css pour adapter la présentation

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 Contenu éléments obligatoires (8.9)

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

Dans la section contact, le texte est compris dans un élément div

➡️ Utiliser un élément p

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

Page builder Contenu éléments obligatoires (8.9) - 3

Page actualités 1 - 10 erreurs recensées sur cette page

URL de la page : https://www.evoriel.fr/notre-actualite

Contenu - 2 erreurs recensées sur ce bloc

☐ Images (1.1) important

L’image de l’actualité “EVORIEL : Une nouvelle dynamique pour un acteur français majeur des services immobiliers” évoque “Bridgepoint” qui n’est pas inclus dans son titre, cette image est ainsi porteuse d’une information et n’a pas d’alternative textuelle.

➡️ Ajouter une alternative dans l’attribut alt Ex. : alt="Evoriel Bridgepoint"

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

Page actualités 1 Contenu Images (1.1)

☐ Images (1.2) important

Les vignettes des actualités (hors actualité indiquée en 1.1) sont à considérer comme des images de décoration et ont une alternative textuelle.

➡️ Laisser l’attribut alt vide (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 actualités 1 Contenu Images (1.2)

Actualités - 3 erreurs recensées sur ce bloc

☐ Couleurs (3.2) important

Le contraste de la date et du type des actualités est de 3.07:1

➡️ Augmenter le contraste pour parvenir à 4.5:1

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

Page actualités 1 Actualités Couleurs (3.2)

☐ Liens (6.1) important

➡️ Mettre les titres des actualités en titre de niveau 2
➡️ Éventuellement, ajouter l’intitulé du titre de l’actualité dans le lien en texte hors écran (.sr-only) <a href….>Consulter <span class="sr-only">La tribune…</span></a>

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

Page actualités 1 Actualités Liens (6.1)

☐ Présentation (10.3) important

La structure des remontées des actualités doit être modifiée pour pouvoir être compréhensible.

➡️ Le titre des actualités doit être le premier élément dans l’ordre du code
➡️ Passer le titre en h2 (cf 6.1)
➡️ Utiliser css pour modifier visuellement l’ordre des éléments

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.

Page actualités 1 Actualités Présentation (10.3)

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

☐ éléments obligatoires (8.6) moindre

Lorsque les actualités sont filtrées ou bien que la pagination est utilisée, le titre de la page doit le mentionner

➡️ Modifier le titre de la page en conséquence lorsque la pagination ou les filtres sont utilisés Ex. : <title>Notre actualité - Communiqués de presse - page 2 - Evoriel</title>

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

Pagination - 3 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.7) moindre

[Mineur] {Pagination} Les liens de la pagination ont des intitulé en anglais

➡️ Traduire les intitulés en français ou indiquer le changement de langue via l’attribut lang

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

Page actualités 1 Pagination éléments obligatoires (8.7)

☐ Structuration (9.2) important

La pagination n’est pas structurée via une balise <nav>.

➡️ Structurer la pagination avec une balise <nav role="navigation" aria-label="Pagination">

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

Page actualités 1 Pagination Structuration (9.2)

☐ Présentation (10.7) important

Le focus sur les liens de la pagination n’est pas perceptible

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 actualités 1 Pagination Présentation (10.7)

Thématiques - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

La prise de focus sur la liste des thématiques n’est pas suffisamment contrastée

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

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 actualités 1 Thématiques Présentation (10.7)

Page actualités 2 - 6 erreurs recensées sur cette page

URL de la page : https://www.evoriel.fr/notre-actualite/evoriel-annonce-l-acquisition-de-terranae-acteur-cle-de-la-gestion-d-actifs-immobiliers-commerciaux-par-sa-filiale-richardiere

Image - 1 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

L’image de couverture n’est pas porteuse d’information

➡️ 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 actualités 2 Image Images (1.2)

Contenu - 3 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.7) moindre

Le changement de langue devrait être indiqué pour le terme Property Management à chaque fois qu’il apparaît

➡️Indiquer le changement de langue à l’aide d’un attribut lang. Ex. <span lang"en">Property Management</span>

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

Page actualités 2 Contenu éléments obligatoires (8.7)

☐ éléments obligatoires (8.9) moindre

De nombreux paragraphes et titre vides sont utilisés pour créer des espaces

➡️ Supprimer ces paragraphes et titres vides et utiliser css pour ajuster les espaces.

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 actualités 2 Contenu éléments obligatoires (8.9)

☐ Structuration (9.4) important

Deux citations apparaissent dans le texte et ne sont pas correctement indiquées

➡️ Utiliser l’élément <q> pour délimiter les citations

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

Page actualités 2 Contenu Structuration (9.4)

Communiqué de presse - 2 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

Le focus sur le liens de téléchargement du dossier de presse n’est pas perceptible

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 actualités 2 Communiqué de presse Présentation (10.7)

☐ Consultation (13.4) important

Le communiqué de presse en PDF n’est pas accessible. Le paragraphe de description du groupe et le contact presse présents dans le communiqué ne sont pas présents sur la page html qui constitue la version accessible du document.

➡️ Rendre le PDF totalement accessible ou ajouter les informations manquantes dans la page.

Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?
Critère : 13.4 du RGAA 4.1.2.

Page actualités 2 Communiqué de presse Consultation (13.4)

Page nous rejoindre - 8 erreurs recensées sur cette page

URL de la page : https://www.evoriel.fr/nous-rejoindre

Image - 1 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

L’image d’illustration n’est pas porteuse d’information et doit être ignorée par les technologies d’assistance

➡️ Supprimer le contenu de l’attribut alt

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

Page nous rejoindre Image Images (1.2)

Contenu - 5 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9) important

Dans la section des chiffres clés, les chiffres ne doivent pas être des titres.

➡️ Utiliser des éléments pet css pour adapter la présentation

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

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

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

Le témoignage est structuré à l’aide d’éléments <div>

➡️ Utiliser l’élément <blockquote> pour structurer la citation et un élément <p> pour le reste du 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 nous rejoindre Contenu éléments obligatoires (8.9) - 2

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

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

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

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

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

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

Le texte de l’encart “Rejoignez-nous” est structuré à l’aide de <div>

➡️ Utiliser un élément <p>

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

Page nous rejoindre Contenu éléments obligatoires (8.9) - 4

☐ Structuration (9.1) important

Les textes dans les encarts de la section “Travailler chez Evoriel” sont actuellement des titres de niveau 5

➡️ Utiliser des éléments <p>

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

Page nous rejoindre Contenu Structuration (9.1)

Focus - 1 erreurs recensées sur ce bloc

☐ Présentation (10.7) important

Le focus sur le lien présent dans l’introduction n’est pas suffisament perceptible

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 nous rejoindre Focus Présentation (10.7)

Rejoignez-nous - 1 erreurs recensées sur ce bloc

☐ Présentation (10.11) important

Le lien de l’encart “Rejoignez-nous” n’est plus lisible lorsque la fenêtre a une largeur de 320px

➡️ Augmenter la taille de l’interlignage par défaut Ex. : line-height: 3em;

Page nous rejoindre Rejoignez-nous Présentation (10.11)

Page actualité avec vidéo - 5 erreurs recensées sur cette page

URL de la page : https://www.evoriel.fr/notre-actualite/un-projet-de-renovation-energetique-a-l-honneur-zoom-sur-la-visite-de-yael-braun-pivet-presidente-de-l-assemblee-nationale-a-verneuil-sur-seine

Image - 1 erreurs recensées sur ce bloc

☐ Images (1.2) moindre

L’image d’illustration de l’actualité n’est pas porteuse d’information

➡️ Supprimer le contenu de l’attribut alt (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 actualité avec vidéo Image Images (1.2)

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

☐ Cadres (2.1) important

Le cadre du lecteur vidéo n’a pas de titre

➡️ Ajouter un titre Ex. : title="Vidéo"

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

Page actualité avec vidéo Vidéo Cadres (2.1)

☐ Multimédia (4.8) critique

La vidéo comporte de nombreuses informations qui n’apparaissent pas ailleurs

➡️ Fournir une alternative dans la page
➡️ Cette alternative peut être adjacente au lecteur vidéo, masquée par défaut et affichable par l’intermdiaire d’un bouton

Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ?
Critère : 4.8 du RGAA 4.1.2.

☐ Présentation (10.1) critique

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

➡️ Supprimer les attributs width et height et utiliser css pour définir la taille de la vidéo ⚠️ S’assurer que la vidéo s’affiche correctement lorsque le zoom est à 200% (critère 10.4) ou lorsque la fenêtre a une largeur de 320px (critère 10.11)

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.

Thématique - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9) moindre

La thématique de l’actualité est structurée à l’aide d’élements <div> et <span>

➡️ Utiliser un élément <p>

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

Page actualité avec vidéo Thématique éléments obligatoires (8.9)