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 uneidest être reliée à une autre zone par unaria-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
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
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
- ☒ 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.
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.
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
- Il est possible d’améliorer la structure du menu avec ce code. Ajout d’un attribut de
langpour 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.
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>- 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.
Code présent
<a href="javascript:void(0);">ES</a>Code modifié
<a href="javascript:void(0);" lang="es">ES</a>- Modifier l’attribut
titledes liens pour un attributaria-label Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du rgaa 4.1.
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>- 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.
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.
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.
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.
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.
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.
- ☐ 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.
- ☒ 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.
- ☐ 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.
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.
- ☒ 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.
- ☒ 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.
- ☐ 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.
- ☐ 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.
- ☐ 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.
- ☐ 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.
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.
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.
À 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.
- ☒ 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.
- ☐ 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.Dans chaque page web, chaque lien a-t-il un intitulé ?
Critère : 6.2 du rgaa 4.1.
- ☐ 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.
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.
- ☐ 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.
- ☐ Groupement - paiement fractionnée moindre
- Devrait être dans un
fieldset, son titre dans unelegend 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.
- ☐ 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.
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.
- ☐ 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.
- ☐ 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.
- ☐ 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.
- ☐ Titre
- La modale n‘a pas titre. Il semble y avoir un manque dans le code :
aria-labelledby='exampleModalLongTitle'doit faire référence uneid. 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.
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.
- ☐ 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.
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.
- ☐ 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.
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.
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.
- ☒ 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.
- ☒ 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.
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.
- ☐ 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.
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 avoir recours à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou à un défilement horizontal pour une fenêtre ayant une largeur de 320px (hors cas particuliers) ?
Critère : 10.11 du rgaa 4.1.
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.
- ☒ 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.
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.