Recommandations pour Contributions Indirectes En Ligne (CIEL)
- 37
Erreurs total - 14
Erreurs corrigées
Notes correctives
Général
- Il n’y a pas de favicons
- L’affichage des astérisques pour les champs obligatoire n’est que visuel, il doit y avoir un champ vocalisable, on devrait avoir :
<label for="monchamp"><abbr aria-hidden="true" title="(Obligatoire)">*</abbr> Numéro de télépaiement : </label>
Menu principal
- Le menu d’évitement devrait être un menu (
<nav>
) - Le menu principal doit avoir le
role=navigation
- Manque des
title
ouaria-label
sur les liens externes
Tableau de bord
- La liste devrait être une navigation
role=navigation
- Le bouton retour devrait être un lien
- Le bouton consulter du tableau devrait être plus explicite : consulter la déclaration numéro 4735077. (ajouter un
aria-label
). - Supprimer la 11 ème colonne car elle est vide. Le bouton accéder doit être dans la colonne “actions”.
- On ne sait pas quelle est la différence entre “consulter” et “accéder”… consulter quoi ? accéder à quoi ?
Déposer/modifier mes déclarations
- Pas d’erreur sur le type de contenu (non numéraire) pour : Sucre pour la chaptalisation
- Aucun placeholder pour proposer des types de données à indiquer.
Erreurs à corriger
Erreurs par lots de livraison - 26 erreurs sélectionnées
Intitulé | Page | Bloc | Critère |
---|---|---|---|
Hiérarchie des titres
✅
Il n’existe parfois aucun titre dans les pages. Passer certains titres (haut de page) <h3> en <h1> ou ajouter des <h1> à toutes les pages.
|
Global au site | Gabarit |
9.1 du RGAA |
Label + Input liés
✅
Aucun champs input n’est relié avec son label avec une attribut for .
|
Saisie de la déclaration de mise à la consommation de tabac | Formulaire |
11.1 du RGAA |
Label + Input requis
Il n’existe aucune mention de champs requis dans les <input> , ni de mentions accolées aux label
|
Saisie de la déclaration de mise à la consommation de tabac | Formulaire |
11.1 du RGAA |
Regroupement de champs
✅
Les champs de même nature peuvent être regroupés dans des balises fieldset
|
Saisie de la déclaration de mise à la consommation de tabac | Formulaire |
11.5 du RGAA |
Légendes
La présence de <h3> n’est pas valide dans une balise <legend> . Modifier pour une simple <div> .
|
Saisie de la déclaration de mise à la consommation de tabac | Formulaire |
11.6 du RGAA |
Loader chargement de page
✅
Le loader n’a pas de alt
|
Tableau de bord déclarations Alcool | Navigation |
1.1 du RGAA |
Loader chargement tableau
✅
Le loader n’a pas de alt
|
Tableau de bord déclarations Alcool | Navigation |
1.1 du RGAA |
Regroupement de champs
✅
Les champs de même nature peuvent être regroupés dans des balises fieldset
|
Recherche de déclaration | Formulaire |
11.5 du RGAA |
Regroupement de champs - Date de dépôt
✅
Les champs de même nature peuvent être regroupés dans des balises fieldset
|
Recherche de déclaration | Formulaire |
11.5 du RGAA |
Intitulé | Page | Bloc | Critère |
---|---|---|---|
Structure du document
Ajouter les balises landmark au document, type : <header> , <main> , <footer> …
|
Global au site | Gabarit |
9.2 du RGAA |
Évitement
✅
Les zones landmark , type : <header> , <main> … ne peuvent pas être évitées
|
Global au site | Gabarit |
12.6 du RGAA |
Menu d’évitement
Le menu d’évitement dit-être dans un menu, pas juste un lien. |
Global au site | Gabarit |
9.2 du RGAA |
Menu principal
Le menu n’a pas de role="navigation" .
|
Global au site | Navigation |
9.2 du RGAA |
Menu de déconnexion
Le menu n’a pas de role="navigation" .
|
Global au site | Navigation |
9.2 du RGAA |
Image “Pour une relation de confiance”
Les alternatives textuelles des 2 logos ne sont pas similaires |
Global au site | Navigation |
1.3 du RGAA |
Liens de navigation
✅
L’état actif des liens du menu n’est visible que par un changement de couleur et non de forme. |
Global au site | Navigation |
3.1 du RGAA |
Contrôle clavier
✅
Un élément fermé ne prend pas le focus clavier. Il n’est pas possible de le déplier (au clavier). |
Saisie de la déclaration de mise à la consommation de tabac | Accordéon |
7.3 du RGAA |
Intitulé | Page | Bloc | Critère |
---|---|---|---|
Code invalide
Le code comporte des erreurs quand on passe le validateur : https://validator.w3.org/ . |
Global au site | Gabarit |
8.2 du RGAA |
Langue de la page
✅
La page n’a pas d’attribut lang , elle est vocalisée en anglais
|
Global au site | Gabarit |
8.3 du RGAA |
Titre invalide
✅
Les titres ( <title> ) de page ne changent pas en fonction des pages et ne sont pas pertinents.
|
Global au site | Gabarit |
8.6 du RGAA |
Résumé
Le tableau devrait avoir un résumé. |
Tableau de bord déclarations Alcool | Tableau |
5.1 du RGAA |
En-tête
✅
Manque un attribut id , scope='col' ou role='rowheader'
|
Tableau de bord déclarations Alcool | Tableau |
5.7 du RGAA |
Liste de définition
Plusieurs listes de définitions sont présente dans le code, alors qu’il s’agit d’une seule liste. Faire que les listes dans les même encarts soit une seule liste de définition. |
Consultation de la déclaration | Affichage de données | Aucun |
Intitulé | Page | Bloc | Critère |
---|---|---|---|
Erreurs
Les messages d’alerte doivent indiquer un role="alert"
|
Saisie de la déclaration de mise à la consommation de tabac | Formulaire |
7.5 du RGAA |
Erreurs
Les messages d’information doivent indiquer un role="alert"
|
Saisie de la déclaration de mise à la consommation de tabac | Formulaire |
7.5 du RGAA |
Erreurs
✅
Les messages d’alerte doivent indiquer un role="alert"
|
Recherche de déclaration | Formulaire |
7.5 du RGAA |
Accéder aux pages auditées
Liste des pages auditées
Global au site - 21 erreurs recensées sur cette page
Gabarit - 16 erreurs recensées sur ce bloc
- L’adresse de navigation ne change pas en fonction des pages.
- ☐ Code invalide moindre
- Le code comporte des erreurs quand on passe le validateur : https://validator.w3.org/ .
-
Pour chaque page web, le code source généré est-il valide selon le type de document spécifié ?
Critère : 8.2 du RGAA 4.1.2.
- ☒ Langue de la page important
- La page n’a pas d’attribut
lang
, elle est vocalisée en anglais -
Dans chaque page web, la langue par défaut est-elle présente ?
Critère : 8.3 du RGAA 4.1.2.
- ☒ Titre invalide
- Les titres (
<title>
) de page ne changent pas en fonction des pages et ne sont pas pertinents. -
Pour chaque page web ayant un titre de page , ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.
- ☒ Hiérarchie des titres important
- Il n’existe parfois aucun titre dans les pages. Passer certains titres (haut de page)
<h3>
en<h1>
ou ajouter des<h1>
à toutes les 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.
- ☐ Structure du document
- Ajouter les balises
landmark
au document, type :<header>
,<main>
,<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.
- ☒ Évitement
- Les zones
landmark
, type :<header>
,<main>
… ne peuvent pas être évitées -
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.
- Le menu d’évitement dit-être dans un menu, pas juste un lien.
-
Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.
- ☐ Mention de conformité au RGAA dans le pied de page
-
Le niveau de conformité au RGAA est affiché sur toutes les pages
Critère : Pi-001 de la checklist PidilaLa page d'accueil des services de communication au public en ligne affiche obligatoirement l'une des mentions suivantes :
- « Accessibilité : totalement conforme » si tous les critères de contrôle du RGAA sont respectés ;
- « Accessibilité : partiellement conforme » si au moins 50 % des critères de contrôle du RGAA sont respectés ;
- « Accessibilité : non conforme » s’il n’existe aucun résultat d’audit en cours de validité permettant de mesurer le respect des critères ou si moins de 50 % des critères de contrôle du RGAA sont respectés.
Cette mention peut être cliquable et conduire vers la page Accessibilité ou vers la déclaration d'accessibilité.
- ☐ Page “mentions légales“
-
La page des mentions légales est conforme aux règles des sites publics
Critère : Pi-008 de la checklist PidilaUne page « Mentions légales » doit être présente sur le site et accessible depuis toutes les pages.
Les mentions légales doivent fournir les informations suivantes :
- Informations sur l’éditeur.
- Informations sur le traitement des données personnelles.
- Informations sur la présence de liens hypertextes (par exemple autoriser des sites tiers à effectuer des liens de renvoi vers le site et sensibiliser l'internaute aux liens contenus sur le site, qui n'engagent pas la responsabilité de l'éditeur).
- Informations sur les droits de copie et de réutilisation des divers éléments du site.
Les conditions d’utilisation des lettres d’information doivent figurer sur la page « Mentions légales » du site émetteur.
- ☐ Accès à une page ”accessibilité” avec la déclaration de conformité
-
Le site comporte une page Accessibilité conforme aux règles des sites publics
Critère : Pi-010 de la checklist PidilaAfin d'évaluer la conformité du service de communication au public en ligne avec la norme de référence, l'organisme doit conduire un audit d'accessibilité.
L'audit (ou évaluation) peut être effectué par l'organisme lui-même (auto-évaluation) ou par un tiers. L'évaluation est réalisée sur un échantillon de pages représentatif du service de communication au public en ligne. La vérification de la conformité des pages de l'échantillon avec les critères applicables s'effectue à l'aide des critères de contrôle du RGAA qui contiennent des tests techniques.
La phase finale de l'audit est la déclaration d'accessibilité qui rend compte de la conformité des services de communication au public en ligne avec les règles applicables.
La déclaration d'accessibilité doit être publiée sur le site dans un format accessible.
Elle comporte :
- Un signalement des contenus non accessibles, distingués selon qu'il s'agit de non-conformité avec le RGAA, de contenus exemptés ou de contenus soumis à dérogation pour charge disproportionnée. Dans ce dernier cas,les dérogations doivent être expliquées et motivées. Le signalement est assorti, le cas échéant, d'une présentation des alternatives accessibles prévues.
- Une information désignant les dispositifs d'assistance et de contact : un mécanisme accessible (adresse électronique ou formulaire) pour permettre à toute personne de signaler à l'organisme concerné tout défaut d’accessibilité et à une personne handicapée de demander les informations correspondantes ou une solution alternative accessible.
- La mention de la faculté pour la personne concernée de saisir le Défenseur des droits, en cas d'absence de réponse ou de solution, une fois les démarches effectuées via le mécanisme mentionné ci-dessus.
- ☐ Nature de contenus présents sur le site
-
La page d'accueil expose la nature des contenus et services proposés.
Critère : Pi-016 de la checklist PidilaSur la page d'accueil, une information, une phrase, un contenu résumant les contenus et services proposés dans le site permet de donner aux utilisateurs une vision immédiate de la nature du site et des contenus proposés, ainsi que de leur éviter des recherches inutiles.
- ☐ Page FAQ
-
Une FAQ (foire aux questions) ou une page d'aide est disponible pour chaque démarche en ligne. Une aide contextuelle accompagne l'utilisateur lors de sa saisie.
Critère : Pi-022 de la checklist PidilaIl est obligatoire de proposer un mécanisme d’aide aux usagers comprenant au minimum une foire aux questions. La FAQ doit répondre aux principales questions posées par les utilisateurs.
L'usager a accès au sens de la démarche qu'il effectue ; il complètera d’autant plus volontiers les différentes rubriques qu’il en comprend l’utilité. Des exemples peuvent également l'aider, en s'assurant qu’ils seront bien compris comme des exemples et non comme des mentions à reproduire.
La foire aux questions (FAQ) et/ou la page d'aide doivent être accessibles sans que l'usager n'ait à s'authentifier. En complément, les formulaires en ligne ont l’avantage de pouvoir fournir des explications à l’usager au fur et à mesure qu’il progresse dans le remplissage.
Il convient également de préciser l’assistance dont l’usager peut bénéficier en cas de difficulté. Il faut dans tous les cas veiller à ce que l’usager soit correctement orienté dès sa première demande.
En outre, une aide contextuelle est également apportée dans les formulaires pour le remplissage des champs.
- ☐ Moyen de contact
-
Le site propose au moins deux moyens de contact.
Critère : Pi-026 de la checklist PidilaLe site propose au moins deux moyens de contact différents.
L’objectif est d'optimiser les possibilités de retour d’information de la part des utilisateurs.
L’utilisation d’un formulaire comme l'un des moyens de contact est obligatoire, sauf problématique justifiée.
-
Liens obligatoires devant figurer dans le pied de page.
Critère : Pi-032 de la checklist PidilaLe pied de page doit faire figurer des liens vers les pages suivantes :
- Contact ;
- Plan du site ;
- Mentions légales ;
- Accessibilité ;
- Horaires et plans d'accès (si la page existe) ;
- Démarches en ligne (si la page existe).
Le pied de page constitue un élément de navigation et un point de repère tout au long du site. Il doit être présent sur toutes les pages, y compris les pages d’erreur. L’emplacement, la forme, le contenu et le comportement des éléments principaux du pied de page doivent être identiques sur toutes les pages.
Le pied de page doit également afficher les liens (avec ou sans les logotypes) vers :
- legifrance.gouv.fr
- service-public.fr
- gouvernement.fr
- france.fr
- ☐ Marque de l’État
-
Le bloc Marque est conforme à La marque de l’État.
Critère : Pi-122 de la checklist PidilaLes règles d'usage sont définies sur la page suivante https://www.gouvernement.fr/charte/charte-graphique-les-fondamentaux/l-architecture-de-marque-de-l-etat
Navigation - 5 erreurs recensées sur ce bloc
- Le menu n’a pas de
role="navigation"
. - XPath : //*[@id=“navbar”]
-
Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.
- Le menu n’a pas de
role="navigation"
. - XPath : //*[@id=“navbar”]
-
Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.
- ☐ Image "Pour une relation de confiance"
- Les alternatives textuelles des 2 logos ne sont pas similaires
- XPath : //*[@id=“navbar”]/ul[1]/li[4]/img
-
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’état actif des liens du menu n’est visible que par un changement de couleur et non de forme.
- XPath : //*[@id=“navbar”]/ul[1]/li[1]/a
-
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.
- Le menu propose des éléments mal alignés. En fonction de la largeur des écrans l’affichage des élements est très mal agencé.
- XPath : //*[@id=“navbar”]
Saisie de la déclaration de mise à la consommation de tabac - 8 erreurs recensées sur cette page
Formulaire - 7 erreurs recensées sur ce bloc
- ☐ Label
- Certains champs
input
n’ont pas delabel
. - XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[3]/table/tbody[1]/tr/td[3]/div/input
- ☒ Label + Input liés critique
- Aucun champs
input
n’est relié avec sonlabel
avec une attributfor
. - XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[5]/div/div/div/div/div[2]/div[6]/label
-
Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.
Code présent
<div class="form-group">
<label class="col-md-2 control-label">Année (AAAA) </label>
<div class="col-lg-1 col-md-2"><input type="text" class="form-control"></div>
</div>
Code modifié
<div class="form-group">
<label class="col-md-2 control-label" for="year">Année (AAAA) </label>
<div class="col-lg-1 col-md-2"><input type="text" class="form-control" id="year"></div>
</div>
- ☐ Label + Input requis critique
- Il n’existe aucune mention de champs requis dans les
<input>
, ni de mentions accolées auxlabel
- XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[5]/div/div/div/div/div[2]/div[6]/label
-
Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.
Code présent
<input class="form-control" type="text" tabindex="0">
Code modifié
<input class="form-control" type="text" tabindex="0" required>
- ☒ Regroupement de champs important
- Les champs de même nature peuvent être regroupés dans des balises
fieldset
- XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[5]/div/div/div/div/div[2]/div[6]
-
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 présent
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Saisie des critères de recherche</h4>
</div>
<div class="form-horizontal panel-body">
<div class="row form-group"> <label class="col-md-4 control-label">Numéro de la déclaration</label>
<div class="col-md-5"> <input type="text" class="form-control" maxlength="10"> </div>
</div>
<div class="row form-group"> <label class="col-md-4 control-label">Date de dépôt</label>
<div class="col-md-4">
<div class="row"> <label class="col-md-4 control-label"> Depuis </label>
<div class="col-md-8"> <input type="text" class="form-control"> </div>
</div>
</div>
</div>
</div>
</div>
Code modifié
<fieldset class="panel panel-default">
<div class="panel-heading">
<legend class="panel-title">Saisie des critères de recherche</legend>
</div>
<div class="form-horizontal panel-body">
<div class="row form-group"> <label class="col-md-4 control-label">Numéro de la déclaration</label>
<div class="col-md-5"> <input type="text" class="form-control" maxlength="10"> </div>
</div>
<div class="row form-group"> <label class="col-md-4 control-label">Date de dépôt</label>
<div class="col-md-4">
<div class="row"> <label class="col-md-4 control-label"> Depuis </label>
<div class="col-md-8"> <input type="text" class="form-control"> </div>
</div>
</div>
</div>
</div>
</fieldset>
- ☐ Légendes moindre
- La présence de
<h3>
n’est pas valide dans une balise<legend>
. Modifier pour une simple<div>
. - XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[5]/div/div/div/div/div[2]/div[6]
-
Dans chaque formulaire , chaque regroupement de champs de même nature a-t-il une légende ?
Critère : 11.6 du RGAA 4.1.2.
- ☐ Erreurs moindre
- Les messages d’alerte doivent indiquer un
role="alert"
- XPath : /html/body/div[2]/div[2]/div/div/div/div[2]/div/div[1]/div/div/div[2]/div[2]/div/div/div/div
-
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.
- ☐ Erreurs moindre
- Les messages d’information doivent indiquer un
role="alert"
- XPath : /html/body/div[2]/div[2]/div/div/div/div[2]/div/div/div/div
-
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.
Accordéon - 1 erreurs recensées sur ce bloc
- ☒ Contrôle clavier
- Un élément fermé ne prend pas le focus clavier. Il n’est pas possible de le déplier (au clavier).
- XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[4]/div[1]/div
-
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.
Tableau de bord déclarations Alcool - 4 erreurs recensées sur cette page
Navigation - 2 erreurs recensées sur ce bloc
- ☒ Loader chargement de page moindre
- Le loader n’a pas de
alt
-
Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Critère : 1.1 du RGAA 4.1.2.
- ☒ Loader chargement tableau moindre
- Le loader n’a pas de
alt
-
Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Critère : 1.1 du RGAA 4.1.2.
Tableau - 2 erreurs recensées sur ce bloc
- ☐ Résumé
- Le tableau devrait avoir un résumé.
- XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[4]/div/div/table
-
Chaque tableau de données complexe a-t-il un résumé ?
Critère : 5.1 du RGAA 4.1.2.
- ☒ En-tête
- Manque un attribut
id
,scope='col'
ourole='rowheader'
- XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[4]/div/div/table
-
Pour chaque tableau de données , la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?
Critère : 5.7 du RGAA 4.1.2.
Consultation de la déclaration - 1 erreurs recensées sur cette page
Affichage de données - 1 erreurs recensées sur ce bloc
- ☐ Liste de définition
- Plusieurs listes de définitions sont présente dans le code, alors qu’il s’agit d’une seule liste. Faire que les listes dans les même encarts soit une seule liste de définition.
Recherche de déclaration - 3 erreurs recensées sur cette page
Formulaire - 3 erreurs recensées sur ce bloc
- ☒ Erreurs moindre
- Les messages d’alerte doivent indiquer un
role="alert"
-
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.
- ☒ Regroupement de champs important
- Les champs de même nature peuvent être regroupés dans des balises
fieldset
- XPath : //*[@id=“conteneurGlobal”]/div/div/div/div/div/div[2]/div
-
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.
- ☒ Regroupement de champs - Date de dépôt important
- Les champs de même nature peuvent être regroupés dans des balises
fieldset
- XPath : /html/body/div[2]/div[2]/div/div/div/div/div/div[2]/div/div/div[2]/div[7]
-
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.