Retour à la page projet

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>
  • Le menu d’évitement devrait être un menu (<nav>)
  • Le menu principal doit avoir le role=navigation
  • Manque des title ou aria-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

Lot 1 :: corrigées 7/9
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

Lot 2 :: corrigées 3/8
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

Lot 3 :: corrigées 3/6
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

Lot 4 :: corrigées 1/3
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

Liste des pages auditées

Global au site - 21 erreurs recensées sur cette page

Gabarit - 16 erreurs recensées sur ce bloc

☐ Adresse de navigation
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 Pidila

La 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 Pidila

Une 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 Pidila

Afin 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 Pidila

Sur 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 Pidila

Il 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 Pidila

Le 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 Pidila

Le 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 Pidila

Les 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.

☒ Liens de navigation
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 de label.
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 son label avec une attribut for.
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 aux label
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' ou role='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.