Recommandations pour Paiement des amendes

Notes annexes au rapport d’audit

Cette page liste des erreurs diverses relevées sur l’ensemble du site. Elles peuvent être de tout types (visuel, code, structure, textuel), ainsi que présenter des critères permettant de les classer sous forme de listes spécifiques (status, lots de correction, criticités…).

Ces erreurs sont organisées en fonction de leur présence sur les pages du site : par page puis par bloc.

Ce rapport est destiné à la relation avec des équipes exécutives ayant pour objectif : d’estimer le temps de développement, créer des tâches, distribuer les tâches, corriger les erreurs,… Il est évolutif et sert de base discussion pour les questions stratégiques entre MOA et MOE.

Il n’y a de lien direct entre la correction d’une erreur et l’évolution du taux de conformité RGAA . Même si les 2 rapports se recoupent.

77
Erreurs total
34
Erreurs corrigées

Notes correctives

Corrections non complètes

Placeholder : doit reprendre le format de l’entrée (type de données) pas l’intitulé du label.

Régressions

La structure de titre est cassée (hiérarchie h1 puis h3) :: à revoir.
Une chaîne de caractère n’est pas traduite : “You wish to pay the balance due for your fixed fine, which is currently at the reduced rate of € {{AMOUNT}}, or make a partial payment.”
La zone class="montant-info" devrait avoir une id est être reliée à une autre zone par un aria-labelledby.
Justificatif de paiement - Historique des règlements, pourrait être un tableau, aucune sémantique présente pour les données. Ou ajouter des aria-label avec le type de champ <div aria-label="Montant de 600,00 €">.
Pas de listes des différents paiements différés dans l’impression PDF.

À améliorer

Le cadenas en dessous du bouton de validation (accueil) n’est pas aligné
Les tableaux ne sont pas stylés

Erreurs à corriger

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

Lot 0 suppression :: corrigées 3/4
Intitulé	Page	Bloc	Critère
Blocs actualités ✅ Certaines actualités date de 2013. Est-ce qu’il s’agit d‘information, d’aides… a-t-on envie de consulter des brêves quand on vient payer une amende ? Nous proposons de supprimer ce bloc ainsi que toutes les pages de news (et liens depuis plan du site).	Accueil	À savoir	Aucun
Modale suppression ✅ Est-ce que supprimer la modale, ajouter le menu accordéon directement sur la page d’accueil. Et faire que le lien d’ouverture de la modale ne serait pas un moyen plus simple de corriger les soucis d’accessibilités.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	7.1 du RGAA
Liens - annuler ✅ Le lien devrait s’appeler « retour à la page d’accueil » et avoir le style d’un lien et non d’un bouton. Nous proposons de supprimer ces liens (sur toutes les pages où il est présent), pour plus de simplicité.	Vérification des informations	Contenu	6.1, 6.2 du RGAA
Liens - annuler Le lien devrait s’appeler « retour à la page d’accueil » et avoir le style d’un lien et non d’un bouton. Nous proposons de supprimer ces liens (sur toutes les pages où il est présent), pour plus de simplicité.	Saisie Indicatif	Formulaire	11.9 du RGAA

Lot 01 langue :: corrigées 5/5
Intitulé	Page	Bloc	Critère
Langue de la page ✅ Le changement de langue ne modifie pas la langue du document (ou pas toujours). Voir https://stackoverflow.com/questions/26461711/angularjs-dynamic-lang-attribute-of-html .	Global au site	Header	8.4 du RGAA
Traduction du titre de la page ✅ Le changement de langue ne modifie pas le contenu de la balise `title`. Où le modifie parfois et parfois pas.	Global au site	Header	8.8 du RGAA
Langue URL ✅ Le changement de langue ne modifie pas l’url de la page. Il n’est pas possible de faire de lien vers la bonne langue depuis l’ANTAI ou un autre site.	Global au site	Header	Aucun
Menu langues structure ✅ Il est possible d’améliorer la structure du menu avec ce code. Ajout d’un attribut de `lang` pour la vocalisation.	Global au site	Header	12.6 du RGAA
Menu langues liens ✅ Les liens n’ont pas d’attribut (ex `lang='es'`) permettant de savoir qu’on va être redirigé vers une page dans une autre langue et de prononcer l’intitulé dans la bonne langue (mais comme on change pas de page…).	Global au site	Header	8.7 du RGAA

Lot 02 couleur :: corrigées 6/7
Intitulé	Page	Bloc	Critère
Menu langues couleur ✅ Le contraste n‘est pas assez prononcé pour le lien inactif. Prendre un gris plus prononcé.	Global au site	Header	3.2 du RGAA
Titre couleur ✅ Le contraste n‘est pas assez prononcé. Changer la couleur bleue du site de #097DAD à #0b6ba8.	Accueil	À savoir	3.2 du RGAA
Description couleur ✅ Le fond situé sous le texte de description n’est pas assez constrasté.	Accueil	Bannière	3.2 du RGAA
Messages contextuels couleur ✅ Le contraste n‘est pas assez prononcé. Prendre un rouge plus prononcé.	Accueil	Formulaire	3.2 du RGAA
Label couleur ✅ Le contraste n‘est pas assez prononcé. Prendre un gris plus prononcé.	Accueil	Formulaire	3.2 du RGAA
Astérisque (*) couleur ✅ Le contraste n‘est pas assez prononcé. Prendre un rouge plus prononcé.	Accueil	Formulaire	3.2 du RGAA
Bouton couleur Le bouton n’a pas d’état actif (`:active`)	Accueil	Formulaire	3.2 du RGAA

Lot 03 structure :: corrigées 6/6
Intitulé	Page	Bloc	Critère
Landmark ✅ Ajouter un titre pour la zone de contenu. Faire un lien le titre de la page.	Global au site	Contenu	12.6 du RGAA
Landmark titre principal ✅ Ajouter Une id sur tous les titres de page du site.	Global au site	Contenu	12.6 du RGAA
Landmark ✅ Ajouter `role=contentinfo`	Global au site	Pied de page	12.6 du RGAA
Titre de la zone ✅ Nommer la zone pour les lecteurs d’écran	Vérification des informations	Important	12.6 du RGAA
Titre de la zone ✅ Nommer la zone pour les lecteurs d’écran	Justificatif	Obtenir le justificatif de règlement	12.6 du RGAA
Titre de la zone ✅ Nommer la zone pour les lecteurs d’écran.	Choix modalités de réglement	Important	12.6 du RGAA

Lot 04 formulaire :: corrigées 4/12
Intitulé	Page	Bloc	Critère
Champ Numéro de télépaiement placeholder Le champ du numéro de télépaiement ne présente pas de placeholder pour l’aide à la saisie du bon numéro.	Accueil	Formulaire	Aucun
Champ Clé - placeholder Le champ du numéro de télépaiement ne présente pas de placeholder pour l’aide à la saisie du bon numéro.	Accueil	Formulaire	Aucun
Paiement - paiement fractionnée Le message de description pour la zone de paiement fractionnée n’a pas de `aria-labelledby``.	Vérification des informations	Formulaire	7.5 du RGAA
Message alerte - paiement fractionnée Le message d’erreur n’a pas de `role="alert"`	Vérification des informations	Formulaire	7.5 du RGAA
Groupement - paiement fractionnée Devrait être dans un `fieldset`, son titre dans une `legend`	Vérification des informations	Formulaire	7.5 du RGAA
Champ valeur - paiement fractionnée Le champ ne devrait pas avoir le `type=number`	Vérification des informations	Formulaire	7.5 du RGAA
Saisir une adresse mail - champ obligatoire Le champ de saisi n’a pas d’attribut `required`	Justificatif	Saisir une adresse de courrier électronique	11.10 du RGAA
Saisir une adresse mail - placeholder Le placeholder (`xxx.xxx@xxx.xx`) n’est pas parlant en synthèse vocal. Préférer : `prenom.nom@mail.com`	Justificatif	Saisir une adresse de courrier électronique	Aucun
Groupement des champs de saisie ✅ Les champs de saisie ne sont pas regroupés dans une balise de formulaire `<form>`.	Saisie Indicatif	Formulaire	Aucun
Groupement des champs de saisie - Intitulé ✅ Les champs de saisie ne sont pas précédés d‘une legend `<legend>`.	Saisie Indicatif	Formulaire	11.6 du RGAA
Indicatif d’opération - mention « requis » ✅ Le label de l’Indicatif d’opération n’indique pas que le champ est obligatoire.	Saisie Indicatif	Formulaire	11.10 du RGAA
Zone message erreur ✅ La zone de message d’erreur ne présente pas de role=‘alert’.	Saisie Indicatif	Formulaire	7.5 du RGAA

Lot 05 tableau :: corrigées 2/3
Intitulé	Page	Bloc	Critère
Tableau de contenu Le tableau ne présente pas styles appropriés pour son affichage sur petit écran (défilement).	Glossaire	Contenu	10.11 du RGAA
Table - en-têtes ✅ Les en-têtes du tableau de données de la FAQ ne sont pas correctement associées à chaque cellule. Voir : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Tableaux/Basics	Foire aux questions	Contenu	5.6 du RGAA
Table - cellules ✅ Les cellules du tableau de données de la FAQ ne sont pas correctement associées à chaque en-têtes. Voir : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Tableaux/Basics	Foire aux questions	Contenu	5.7 du RGAA

Lot 06 modale :: corrigées 2/7
Intitulé	Page	Bloc	Critère
Modale ✅ La modale ne prend pas le focus clavier. Ressources : https://tympanus.net/codrops/2021/10/06/how-to-implement-and-style-the-dialog-element/	Accueil	Où trouver mon numéro de télépaiement et la clé ?	7.1 du RGAA
Modale fermeture esc ✅ La modale ne se ferme pas en appuyant sur la touchde clavier `esc`.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	7.1 du RGAA
Modale fermeture reprise focus Lors de la fermeture de la fenêtre modale, le focus doit revenir à l’endroit (bouton) qui a enclenché l’ouverture de la modale.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	7.1 du RGAA
Affichage La modale présente un bouton ”fermer” mal aligné, il semble manquer parfois un titre. Sur petit écran, elle s’affiche en haut et à gauche de l’écran	Justificatif	Modale	7.1 du RGAA
Fermeture croix Le bouton de fermeture du haut n’a pas de texte, on ne peut pas savoir avec le lecteur d’écran, qu’il permet de fermer la modale (Fonctionnement acceptable sur les modales avec un bouton ”fermer” en bas mais pas dans tous les cas).	Justificatif	Modale	7.1 du RGAA
Fermeture bouton Le bouton de fermeture du bas contient un initulé “fermer”, il devrait indiquer “Fermer la fenêtre TITRE DE LA MODALE”.	Justificatif	Modale	7.1 du RGAA
Titre La modale n‘a pas titre. Il semble y avoir un manque dans le code : `aria-labelledby='exampleModalLongTitle'` doit faire référence une `id`. Il devrait peut-être être inclue dans uen `<h4>`	Justificatif	Modale	7.1 du RGAA

Lot 07 liens :: corrigées 2/3
Intitulé	Page	Bloc	Critère
Menu langues titre ✅ Modifier l’attribut `title` des liens pour un attribut `aria-label`	Global au site	Header	6.1 du RGAA
Liens vers autres moyens de paiement Les liens ne sont pas valorisés de manières évidentes clicables.	Accueil	Les autres moyens de payer à distance	10.6 du RGAA
Lien - revenir à la page d’accueil ✅ Le lien est présenté sous forme d’un bouton. Il doit avoir l’allure d‘un lien. Il est possible de supprimer ce bouton qui est redondant avec le logo présent dans le header.	Justificatif	Page	6.1 du RGAA

Lot 08 images :: corrigées 1/4
Intitulé	Page	Bloc	Critère
Accordéon - image texte ✅ L’alternative texte ne décrit pas suffisamment l’image. Il devrait être indiqué le cas de figure précis que présente l’image.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	1.3 du RGAA
Accordéon - image Les images présentent une qualité médiocre. Le positionnement du numéro de télépaiement devrait être entouré.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	Aucun
Accordéon - image figure L’image pourrait être inclue dans une balise `<figure>` avec une `<figcaption>` pour décrire où se situe le numéro sur le formulaire de télépaiement.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	1.6 du RGAA
Illustration - image texte L’alternative texte ne décrit pas suffisamment l’image. Il devrait être indiqué le cas de figure précis que présente l’image.	Saisie Indicatif	Formulaire	1.3 du RGAA

Lot 09 titres :: corrigées 2/4
Intitulé	Page	Bloc	Critère
Titre - casse Les intitulés des titres devraient être en minuscule.	Global au site	Contenu	Aucun
Titre page niveau Les titres devraient être des h3.	Accueil	À savoir	9.1 du RGAA
Titres de pages ✅ Le titre des pages devrait être composé du titre de son contenu, suivi du nom du site.	Actualité	Page	Aucun
Titres de pages texte ✅ Le titre `<title>` des pages des actualités ne change pas en fonction des actualités.	Actualité	Page	Aucun

Lot 10 accordéon :: corrigées 0/3
Intitulé	Page	Bloc	Critère
Accordéon - vocalisation de la flèche La flèche à gauche des éléments d’accordéon est vocalisé par Voice-Over.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	7.1 du RGAA
Accordéon - focus L’accordéon ne prend pas le focus quand on navigue dans la modale	Accueil	Où trouver mon numéro de télépaiement et la clé ?	7.1 du RGAA
Accordéon - description Le texte de la description n’est pas compréhensible.	Accueil	Où trouver mon numéro de télépaiement et la clé ?	Aucun

Lot 11 affichage :: corrigées 0/3
Intitulé	Page	Bloc	Critère
Bandeau Ne pas imprimer le bandeau en taille aussi importante.	Justificatif	Document imprimé	13.3 du RGAA
Logo Revoir l’alignement du logo avec le texte.	Justificatif	Document imprimé	13.3 du RGAA
suppression de la page La page plan du site n’est pas obligatoire pour ce type de site. Il est possible de la supprimer.	Plan du site	Page	12.3 du RGAA

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

Page - 1 erreurs recensées sur ce bloc

☒ Titres de pages moindre: Le titre des pages devrait être composée du titre de son contenu, suivi du nom du site

Code présent

<title>Amendes.gouv.fr : site officiel unique de télépaiement</title>

Code modifié

<title>Site officiel unique de télépaiement | Amendes.gouv.fr</title>

Contenu - 2 erreurs recensées sur ce bloc

☐ Contenu - largeur important: Le nombre de caractère maximum sur chaque ligne est trop important. Limiter la largeur de la page de contenu pour 70 caractères maximum

☐ Titre - casse moindre: Les intitulés des titres devraient être en minuscule.

Header - 3 erreurs recensées sur ce bloc

☒ Langue de la page moindre: Le changement de langue ne modifie pas la langue du document (ou pas toujours). Voir https://stackoverflow.com/questions/26461711/angularjs-dynamic-lang-attribute-of-html .; 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.

Code présent

<html lang="en">

☒ Traduction du titre de la page moindre: Le changement de langue ne modifie pas le contenu de la balise title. Où le modifie parfois et parfois pas.; Dans chaque page web, le code de langue de chaque changement de langue est-il valide et pertinent ?
Critère : 8.8 du RGAA 4.1.2.

Code présent

<title>Amendes.gouv.fr : site officiel unique de télépaiement</title>

☒ Langue URL critique: Le changement de langue ne modifie pas l’url de la page. Il n’est pas possible de faire de lien vers la bonne langue depuis l’ANTAI ou un autre site.

Header - 4 erreurs recensées sur ce bloc

☒ Menu langues structure important: Il est possible d’améliorer la structure du menu avec ce code. Ajout d’un attribut de lang pour la vocalisation.; 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.

Code présent

<ul class="lang-selector no-print" role="navigation">
  <li *ngFor="let lang of translate.getLangs(); let i=index">
    <a (click)="translate.use(lang)"
      [class.active]="translate.currentLang === lang"
      [title]="choixLangues[i]">
      {{lang.toUpperCase()}}
    </a>
  </li>
</ul>

Code modifié

<nav>
  <ul class="lang-selector no-print" role="navigation">
    <li *ngFor="let lang of translate.getLangs(); let i=index">
      <a (click)="translate.use(lang)"
        [class.active]="translate.currentLang === lang"
        [title]="choixLangues[i]"
        [lang]="lang.toUpperCase()">
        <span aria-hidden=true>{{ lang.toUpperCase() }}</span>
      </a>
    </li>
  </ul>
</nav>

☒ Menu langues liens important: Les liens n’ont pas d’attribut (ex lang='es') permettant de savoir qu’on va être redirigé vers une page dans une autre langue et de prononcer l’intitulé dans la bonne langue (mais comme on change pas de page…).; 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.

Code présent

<a href="javascript:void(0);">ES</a>

Code modifié

<a href="javascript:void(0);" lang="es">ES</a>

☒ Menu langues titre important: Modifier l’attribut title des liens pour un attribut aria-label; Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

Code présent

<a title="Je souhaite cette page en français" class="active" href="javascript:void(0);"> FR </a>

Code modifié

<a aria-label="Je souhaite cette page en français" class="active" href="javascript:void(0);">FR</a>

☒ Menu langues couleur moindre: Le contraste n‘est pas assez prononcé pour le lien inactif. Prendre un gris plus prononcé.; 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.

Contenu - 2 erreurs recensées sur ce bloc

☒ Landmark moindre: Ajouter un titre pour la zone de contenu. Faire un lien le titre de la 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.

Code présent

<main role="main">

Code modifié

<main aria-labelledby="title-main">

☒ Landmark titre principal moindre: Ajouter Une id sur tous les titres de page du site.; 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.

Code présent

<h2>

Code modifié

<h1 id="title-main">

Pied de page - 2 erreurs recensées sur ce bloc

☒ Landmark moindre: Ajouter 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.

Code présent

<footer>

Code modifié

<footer role="contentinfo">

☐ Liens - sites externes version alternative moindre: Les liens dans les langues alternatives ne redirigent pas vers les versions des sites (externes) dans la même langue.

Chargement - 2 erreurs recensées sur cette page

Page - 2 erreurs recensées sur ce bloc

☐ Appel feuille de styles important: La feuille CSS est bloquante dans le chargement de la page. Modifier le code pour ne plus rendre la CSS comme critique dans le chargement.

Code présent

<link rel="stylesheet" href="styles.145cb581b4910a74f4f8.css">

Code modifié

<link rel="preload" href="styles.145cb581b4910a74f4f8.css" as="style">
<link rel="stylesheet" href="styles.145cb581b4910a74f4f8.css" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="styles.145cb581b4910a74f4f8.css" media="screen">
</noscript>

☐ Styles inutiles moindre: La page présente des styles apparement adaptés à des sites comportant des liens de tracking publicitaires. Pourquoi ces styles ? S’ils sont non utiles les supprimer.

Code présent

<style type="text/css">
  :root iframe[style="border: 0; width: 728px; height: 110px;"],
  ...

Accueil - 26 erreurs recensées sur cette page

Bannière - 1 erreurs recensées sur ce bloc

☒ Description couleur important: Le fond situé sous le texte de description n’est pas assez constrasté.; 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.

Formulaire - 10 erreurs recensées sur ce bloc

☐ Champ Numéro de télépaiement placeholder important: Le champ du numéro de télépaiement ne présente pas de placeholder pour l’aide à la saisie du bon numéro.

☐ Champ Numéro de télépaiement - type moindre: Le champ du numéro de télépaiement indique un champ de type téléphone type=‘tel’.

☐ Champ Clé - placeholder important: Le champ du numéro de télépaiement ne présente pas de placeholder pour l’aide à la saisie du bon numéro.

☐ Champ Clé - type moindre: Le champ du numéro de télépaiement indique un champ de type téléphone type=‘tel’.

☐ Messages contextuels moindre: La zone de message contextuel déplace la zone de saisie du formulaire. C’est gênant pour finir de remplir son numéro de paiement.

☒ Messages contextuels couleur moindre: Le contraste n‘est pas assez prononcé. Prendre un rouge plus prononcé.; 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.

☐ Erreurs formulaire important: La zone d’erreur devrait se situer en premier parmi les éléments de formulaire.

☒ Label couleur moindre: Le contraste n‘est pas assez prononcé. Prendre un gris plus prononcé.; 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.

☒ Astérisque (*) couleur moindre: Le contraste n‘est pas assez prononcé. Prendre un rouge plus prononcé.; 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.

☐ Bouton couleur moindre: Le bouton n’a pas d’état actif (:active); 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.

Où trouver mon numéro de télépaiement et la clé ? - 10 erreurs recensées sur ce bloc

☒ Modale suppression: Est-ce que supprimer la modale, ajouter le menu accordéon directement sur la page d’accueil. Et faire que le lien d’ouverture de la modale ne serait pas un moyen plus simple de corriger les soucis d’accessibilités.; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☒ Modale: La modale ne prend pas le focus clavier. Ressources : https://tympanus.net/codrops/2021/10/06/how-to-implement-and-style-the-dialog-element/; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☒ Modale fermeture esc: La modale ne se ferme pas en appuyant sur la touchde clavier esc.; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Modale fermeture reprise focus: Lors de la fermeture de la fenêtre modale, le focus doit revenir à l’endroit (bouton) qui a enclenché l’ouverture de la modale.; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Accordéon - vocalisation de la flèche: La flèche à gauche des éléments d’accordéon est vocalisé par Voice-Over.; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Accordéon - focus: L’accordéon ne prend pas le focus quand on navigue dans la modale; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Accordéon - description: Le texte de la description n’est pas compréhensible.

Code présent

<p>Le numéro de télépaiement et la clé se situent sur la carte de paiement. Le numéro de télépaiement est constitué de 4 blocs de 4,4,4 et 2 chiffres ou 5 blocs de 4,4,4,4 et 2 chiffres et la clé sur sa droite sur 2 chiffres.</p>

Code modifié

<p>Le numéro de télépaiement et la clé se situent sur la carte de paiement. Le numéro de télépaiement est constitué de 4 blocs avec 3 bloc de 4 chiffres plus un bloc de 2 chiffres ou bien 5 blocs avec 4 blocs de 4 chiffres et un bloc de 2 chiffres plus la clé sur sa droite avec un bloc de 2 chiffres.</p>

☒ Accordéon - image texte important: L’alternative texte ne décrit pas suffisamment l’image. Il devrait être indiqué le cas de figure précis que présente l’image.; 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.

Code présent

<img src="img/content/carte-paiement-ACO.jpg" alt="Où trouver le numéro de télépaiement et la clé ?">

Code modifié

<img src="img/content/carte-paiement-ACO.jpg" alt="Pour une amende forfaitaire - Où trouver le numéro de télépaiement et la clé ?">

☐ Accordéon - image important: Les images présentent une qualité médiocre. Le positionnement du numéro de télépaiement devrait être entouré.

☐ Accordéon - image figure moindre: L’image pourrait être inclue dans une balise <figure> avec une <figcaption> pour décrire où se situe le numéro sur le formulaire de télépaiement.; Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Critère : 1.6 du RGAA 4.1.2.

Les autres moyens de payer à distance - 1 erreurs recensées sur ce bloc

☐ Liens vers autres moyens de paiement moindre: Les liens ne sont pas valorisés de manières évidentes clicables.; Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?
Critère : 10.6 du RGAA 4.1.2.

À savoir - 4 erreurs recensées sur ce bloc

☒ Blocs actualités moindre: Certaines actualités date de 2013. Est-ce qu’il s’agit d‘information, d’aides… a-t-on envie de consulter des brêves quand on vient payer une amende ? Nous proposons de supprimer ce bloc ainsi que toutes les pages de news (et liens depuis plan du site).

☐ Titre page niveau moindre: Les titres devraient être des h3.; Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Critère : 9.1 du RGAA 4.1.2.

☒ Titre couleur moindre: Le contraste n‘est pas assez prononcé. Changer la couleur bleue du site de #097DAD à #0b6ba8.; 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.

☐ Date moindre: La balise contenant la date ne présente pas l’attribut <datetime>.

Actualité - 2 erreurs recensées sur cette page

Page - 2 erreurs recensées sur ce bloc

☒ Titres de pages: Le titre des pages devrait être composé du titre de son contenu, suivi du nom du site.

Code présent

<title>Actualités | Service de télépaiement des amendes</title>

Code modifié

<title>Actualités | Amendes.gouv.fr</title>

☒ Titres de pages texte: Le titre <title> des pages des actualités ne change pas en fonction des actualités.

Code présent

<title>Actualités | Service de télépaiement des amendes</title>

Code modifié

<title>Du nouveau dans l'utilisation du timbre-amende papier | Amendes.gouv.fr</title>

Vérification des informations - 9 erreurs recensées sur cette page

Contenu - 3 erreurs recensées sur ce bloc

☐ Titre contenu moindre: Le titre de la zone de contenu (titre bleu) reprend le contenu de la bannière. Il devrait préciser le contenu indiqué dans la zone qui la suit.

☒ Liens - annuler moindre: Le lien devrait s’appeler « retour à la page d’accueil » et avoir le style d’un lien et non d’un bouton. Nous proposons de supprimer ces liens (sur toutes les pages où il est présent), pour plus de simplicité.; Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.; Dans chaque page web, chaque lien a-t-il un intitulé ?
Critère : 6.2 du RGAA 4.1.2.

☐ La liste des documents des historiques de paiement moindre: Cette liste pourrait être un tableau, aucune sémantique présente pour les données. Ou ajouter des aria-label avec le type de champ <div aria-label="Montant de 600,00 €">.

Important - 1 erreurs recensées sur ce bloc

☒ Titre de la zone moindre: Nommer la zone pour les lecteurs d’écran; 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.

Code présent

<aside>
  <h3>IMPORTANT</h3>
</aside>

Code modifié

<aside class="no-print" aria-labelledby="title-complementary">
  <h3 id="title-complementary">Important</h3>
</aside>

Formulaire - 5 erreurs recensées sur ce bloc

☐ Message alerte consignation moindre: Le numéro de consignation devrait être séparé en plusieurs chiffres. 33394999999141 pour 3339 4999 9991 42.

☐ Paiement - paiement fractionnée moindre: Le message de description pour la zone de paiement fractionnée n’a pas de `aria-labelledby``.; 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.

☐ Message alerte - paiement fractionnée moindre: Le message d’erreur n’a pas de 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.

☐ Groupement - paiement fractionnée moindre: Devrait être dans un fieldset, son titre dans une legend; 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.

☐ Champ valeur - paiement fractionnée important: Le champ ne devrait pas avoir le type=number; 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.

Justificatif - 13 erreurs recensées sur cette page

Page - 3 erreurs recensées sur ce bloc

☐ Titre contenu moindre: Le titre de la zone de contenu reprend le contenu de la bannière. Il devrait préciser le contenu indiquer dans le zone qui la suit. Ex. « Liste des informations du justificatif »

☒ Lien - revenir à la page d’accueil moindre: Le lien est présenté sous forme d’un bouton. Il doit avoir l’allure d‘un lien. Il est possible de supprimer ce bouton qui est redondant avec le logo présent dans le header.; Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

☐ Lien - hover moindre: Le bouton n’a pas le même effet de survol que le bouton sur la page d’accueil. Il est possible de supprimer ce bouton qui est redondant avec le logo présent dans le header.

Status - 1 erreurs recensées sur ce bloc

☐ Message: Le message s’affiche comme une information concernant le parcours sur le site, alors que c’est une information de status de la contravention.

Modale - 4 erreurs recensées sur ce bloc

☐ Affichage: La modale présente un bouton ”fermer” mal aligné, il semble manquer parfois un titre. Sur petit écran, elle s’affiche en haut et à gauche de l’écran; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Fermeture croix: Le bouton de fermeture du haut n’a pas de texte, on ne peut pas savoir avec le lecteur d’écran, qu’il permet de fermer la modale (Fonctionnement acceptable sur les modales avec un bouton ”fermer” en bas mais pas dans tous les cas).; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Fermeture bouton: Le bouton de fermeture du bas contient un initulé “fermer”, il devrait indiquer “Fermer la fenêtre TITRE DE LA MODALE”.; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

☐ Titre: La modale n‘a pas titre. Il semble y avoir un manque dans le code : aria-labelledby='exampleModalLongTitle' doit faire référence une id. Il devrait peut-être être inclue dans uen <h4>; Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère : 7.1 du RGAA 4.1.2.

Code présent

<div aria-labelledby="exampleModalLongTitle" aria-modal="true" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-sm" ng-reflect-klass="modal-dialog" ng-reflect-ng-class="modal-sm">
    <div class="modal-content">
      <div class="modal-header"><button><span aria-hidden="true">×</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

Code modifié

<div aria-labelledby="modal-title" aria-modal="true" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-sm" ng-reflect-klass="modal-dialog" ng-reflect-ng-class="modal-sm">
    <div class="modal-content">
      <div class="modal-header"><button><span aria-hidden="true">×</span></button>
        <h4 id="modal-title" class="modal-title">Recevoir par courriel</h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

Saisir une adresse de courrier électronique - 2 erreurs recensées sur ce bloc

☐ Saisir une adresse mail - champ obligatoire: Le champ de saisi n’a pas d’attribut required; Dans chaque formulaire , le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Critère : 11.10 du RGAA 4.1.2.

☐ Saisir une adresse mail - placeholder: Le placeholder (xxx.xxx@xxx.xx) n’est pas parlant en synthèse vocal. Préférer : prenom.nom@mail.com

Obtenir le justificatif de règlement - 1 erreurs recensées sur ce bloc

☒ Titre de la zone moindre: Nommer la zone pour les lecteurs d’écran; 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.

Code présent

<aside class="no-print">
  <h3>Obtenir le justificatif de règlement :</h3>
  <ul class="action-zone">
    <li><button id="email"><span>Recevoir par courriel</span></button></li>
    <li><button id="pdf"><span>Enregistrer en pdf</span></button></li>
    <li class="secondary"><button id="print"><span>Imprimer</span></button></li>
    <li class="secondary"><button id="poste"><span>Recevoir par voie postale</span></button></li>
  </ul>
</aside>

Code modifié

<aside class="no-print" aria-labelledby="title-complementary">
  <h3 id="title-complementary">Obtenir le justificatif de règlement :</h3>
  <ul class="action-zone">
    <li><button id="email"><span>Recevoir par courriel</span></button></li>
    <li><button id="pdf"><span>Enregistrer en pdf</span></button></li>
    <li class="secondary"><button id="print"><span>Imprimer</span></button></li>
    <li class="secondary"><button id="poste"><span>Recevoir par voie postale</span></button></li>
  </ul>
</aside>

Document imprimé - 2 erreurs recensées sur ce bloc

☐ Bandeau important: Ne pas imprimer le bandeau en taille aussi importante.; 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.

☐ Logo important: Revoir l’alignement du logo avec le texte.; 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.

Choix modalités de réglement - 1 erreurs recensées sur cette page

Important - 1 erreurs recensées sur ce bloc

☒ Titre de la zone moindre: Nommer la zone pour les lecteurs d’écran.; 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.

Code présent

<aside>
  <h3>IMPORTANT</h3>
</aside>

Code modifié

<aside class="no-print" aria-labelledby="title-complementary">
  <h3 id="title-complementary">Important</h3>
</aside>

Saisie Indicatif - 6 erreurs recensées sur cette page

Formulaire - 6 erreurs recensées sur ce bloc

☒ Groupement des champs de saisie critique: Les champs de saisie ne sont pas regroupés dans une balise de formulaire <form>.

☒ Groupement des champs de saisie - Intitulé critique: Les champs de saisie ne sont pas précédés d‘une legend <legend>.; 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.

☒ Indicatif d'opération - mention « requis » critique: Le label de l’Indicatif d’opération n’indique pas que le champ est obligatoire.; Dans chaque formulaire , le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Critère : 11.10 du RGAA 4.1.2.

☒ Zone message erreur critique: La zone de message d’erreur ne présente pas de 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.

Code présent

<div class="message no-ok">

Code modifié

<p class="message no-ok" role="alert">

☐ Liens - annuler moindre: Le lien devrait s’appeler « retour à la page d’accueil » et avoir le style d’un lien et non d’un bouton. Nous proposons de supprimer ces liens (sur toutes les pages où il est présent), pour plus de simplicité.; Dans chaque formulaire , l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
Critère : 11.9 du RGAA 4.1.2.

☐ Illustration - image texte moindre: L’alternative texte ne décrit pas suffisamment l’image. Il devrait être indiqué le cas de figure précis que présente l’image.; 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.

Code présent

<img _ngcontent-kuc-c66="" src="assets/img/content/Exemple_AFM_de.jpg" alt="Indicatif d'opération">

Code modifié

<img _ngcontent-kuc-c66="" src="assets/img/content/Exemple_AFM_de.jpg" alt="Où trouver le numéro indicatif d'opération ?">

Glossaire - 1 erreurs recensées sur cette page

Contenu - 1 erreurs recensées sur ce bloc

☐ Tableau de contenu moindre: Le tableau ne présente pas styles appropriés pour son affichage sur petit écran (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.

Foire aux questions - 2 erreurs recensées sur cette page

Contenu - 2 erreurs recensées sur ce bloc

☒ Table - en-têtes moindre: Les en-têtes du tableau de données de la FAQ ne sont pas correctement associées à chaque cellule. Voir : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Tableaux/Basics; Pour chaque tableau de données , chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ?
Critère : 5.6 du RGAA 4.1.2.

☒ Table - cellules moindre: Les cellules du tableau de données de la FAQ ne sont pas correctement associées à chaque en-têtes. Voir : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Tableaux/Basics; 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.

Plan du site - 1 erreurs recensées sur cette page

Page - 1 erreurs recensées sur ce bloc

☐ suppression de la page moindre: La page plan du site n’est pas obligatoire pour ce type de site. Il est possible de la supprimer.; La page « plan du site » est-elle pertinente ?
Critère : 12.3 du RGAA 4.1.2.

Recommandations pour Paiement des amendes

Notes annexes au rapport d’audit

Notes correctives

Corrections non complètes

Régressions

À améliorer

Erreurs à corriger

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

Accéder aux pages auditées

Liste des pages auditées

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

Page - 1 erreurs recensées sur ce bloc

Code présent

Code modifié

Contenu - 2 erreurs recensées sur ce bloc

Header - 3 erreurs recensées sur ce bloc

Code présent

Code présent

Header - 4 erreurs recensées sur ce bloc

Code présent

Code modifié

Code présent

Code modifié

Code présent

Code modifié

Contenu - 2 erreurs recensées sur ce bloc

Code présent

Code modifié

Code présent

Code modifié

Pied de page - 2 erreurs recensées sur ce bloc

Code présent

Code modifié

Chargement - 2 erreurs recensées sur cette page

Page - 2 erreurs recensées sur ce bloc

Code présent

Code modifié

Code présent

Accueil - 26 erreurs recensées sur cette page

Bannière - 1 erreurs recensées sur ce bloc

Formulaire - 10 erreurs recensées sur ce bloc

Où trouver mon numéro de télépaiement et la clé ? - 10 erreurs recensées sur ce bloc

Code présent

Code modifié

Code présent

Code modifié

Les autres moyens de payer à distance - 1 erreurs recensées sur ce bloc

À savoir - 4 erreurs recensées sur ce bloc

Actualité - 2 erreurs recensées sur cette page

Page - 2 erreurs recensées sur ce bloc

Code présent

Code modifié

Code présent

Code modifié

Vérification des informations - 9 erreurs recensées sur cette page

Contenu - 3 erreurs recensées sur ce bloc

Important - 1 erreurs recensées sur ce bloc

Code présent

Code modifié

Formulaire - 5 erreurs recensées sur ce bloc

Justificatif - 13 erreurs recensées sur cette page

Page - 3 erreurs recensées sur ce bloc

Status - 1 erreurs recensées sur ce bloc

Modale - 4 erreurs recensées sur ce bloc

Code présent

Code modifié

Saisir une adresse de courrier électronique - 2 erreurs recensées sur ce bloc

Obtenir le justificatif de règlement - 1 erreurs recensées sur ce bloc

Code présent

Code modifié

Document imprimé - 2 erreurs recensées sur ce bloc

Choix modalités de réglement - 1 erreurs recensées sur cette page

Important - 1 erreurs recensées sur ce bloc

Code présent

Code modifié

Saisie Indicatif - 6 erreurs recensées sur cette page

Formulaire - 6 erreurs recensées sur ce bloc

Code présent

Code modifié

Code présent