Une image ne possède pas d'attribut alt.

Chaque image porteuse d'information a-t-elle une alternative textuelle ?

Correction : Ajouter un attribut alt décrivant l'information portée par l'image, ou alt="" si elle est décorative.

<img src="/bachesPiscines/images/icons/iconSearch.svg" class="svgHeaderTop">

Un cadre (iframe) n'a pas d'attribut title.

Chaque cadre a-t-il un titre de cadre ?

Correction : Ajouter un attribut title décrivant le contenu du cadre (ex. title="Lecteur vidéo — présentation produit").

<iframe src="//www.googletagmanager.com/ns.html?id=GTM-NDLGJ3" height="0" width="0" style="display:none;visibility:hidde…

Un lien n'a aucun intitulé accessible.

Dans chaque page web, chaque lien a-t-il un intitulé ?

Correction : Ajouter du texte visible dans le lien, ou à défaut un aria-label explicite (et une alternative sur l'icône).

<a href="#" class="headerPictoMenu"><img src="/bachesPiscines/images/pictoMenu.png" alt=""></a>

La page ne comporte pas de région <main>.

Dans chaque page web, la structure du document est-elle cohérente ?

Correction : Structurer la page avec les balises HTML5 sémantiques (<header>, <nav>, <main>, <footer>) — ici <main> est manquante.

Le zoom est bloqué par la balise meta viewport.

Pour chaque page web, les contenus peuvent-ils être présentés sans perte d'information ou de fonctionnalité et sans avoir recours à un défilement vertical et horizontal ?

Correction : Retirer user-scalable=no et maximum-scale=1 de la meta viewport pour autoriser le zoom jusqu'à 200 %.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Un champ de formulaire (<input type="text">) n'a pas d'étiquette.

Chaque champ de formulaire a-t-il une étiquette ?

Correction : Associer une <label for="…"> visible au champ, ou à défaut un aria-label explicite. Le placeholder ne remplace pas une étiquette.

<input type="text" class="form-control" placeholder="Marque, produit..." name="motclef">

Un champ de formulaire (<input type="email">) n'a pas d'étiquette.

Chaque champ de formulaire a-t-il une étiquette ?

Correction : Associer une <label for="…"> visible au champ, ou à défaut un aria-label explicite. Le placeholder ne remplace pas une étiquette.

<input type="email" class="form-control" id="subMenuHAEmail" placeholder="Email" name="client_email" disabled="disabled">

Un champ de formulaire (<input type="password">) n'a pas d'étiquette.

Chaque champ de formulaire a-t-il une étiquette ?

Correction : Associer une <label for="…"> visible au champ, ou à défaut un aria-label explicite. Le placeholder ne remplace pas une étiquette.

<input type="password" class="form-control" id="subMenuHAPassword" placeholder="Mot de passe" name="client_password" disabled="disabled">

Un bouton n'a pas d'intitulé accessible.

Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?

Correction : Donner un intitulé textuel au bouton, ou un aria-label décrivant l'action réalisée.

<button type="submit" class="btn btn-default btnYellow"> <img src="/bachesPiscines/images/icons/iconSearchWhite.svg" alt="" class="svgSearch…

Aucun lien d'évitement vers le contenu principal n'a été détecté en début de page.

Dans chaque page web, un lien d'évitement ou d'accès rapide à la zone de contenu principal est-il présent ?

Correction : Ajouter en premier élément du <body> un lien « Aller au contenu principal » pointant vers l'id du <main>.

Un tableau de données n'a pas de titre (<caption>).

Pour chaque tableau de données ayant un titre, celui-ci est-il correctement associé au tableau ?

Correction : Ajouter une balise <caption> en première position dans le <table> pour décrire son contenu.

<table style="width: 100%; max-width: 950px; margin: 0 auto; border-collapse: collapse; color: #173742; line-height: 1.65;" border="0" cells…

Une liste <ul> contient des enfants directs autres que <li>.

Dans chaque page web, chaque liste est-elle correctement structurée ?

Correction : N'utiliser que des <li> comme enfants directs de <ul>/<ol> (les autres contenus doivent être placés dans un <li>).

<ul xmlns:v="http://schema.org/#"> <li typeof="v:Breadcrumb"> <a href="/" rel="v:url" property="v:title" > <b class="tit…

Un tableau de données ne déclare aucun en-tête (<th>).

Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ?

Correction : Déclarer les en-têtes de colonnes et de lignes avec <th scope="col"> / <th scope="row">.

<table style="width: 100%; max-width: 950px; margin: 0 auto; border-collapse: collapse; color: #173742; line-height: 1.65;" border="0" cells…

Saut dans la hiérarchie des titres : <h2> suivi de <h4>.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Respecter une hiérarchie de titres continue, sans sauter de niveau.

<h4 style="text-align: center;">Questions-R&eacute;ponses de la&nbsp;<strong>marque Baches-piscines.…

Un champ de formulaire (<input type="number">) n'a pas d'étiquette.

Chaque champ de formulaire a-t-il une étiquette ?

Correction : Associer une <label for="…"> visible au champ, ou à défaut un aria-label explicite. Le placeholder ne remplace pas une étiquette.

<input class="ratingInput" type="number" value="5" data-size="xs" data-show-clear="false" data-show-caption="true" data-readonly="true">

L'identifiant id="searchform" est utilisé 2 fois dans la page.

Pour chaque page web, le code source généré est-il valide selon le type de document spécifié ?

Correction : Rendre chaque attribut id unique dans le document (le HTML invalide casse les associations ARIA et label/for).

Un champ de formulaire (<select type="text">) n'a pas d'étiquette.

Chaque champ de formulaire a-t-il une étiquette ?

Correction : Associer une <label for="…"> visible au champ, ou à défaut un aria-label explicite. Le placeholder ne remplace pas une étiquette.

<select class="styledSelect listBrand" data-set-fournisseur> <option value="" selected>Votre marque</option> <option value=" /configurateur/…

Un <fieldset> ne contient pas de <legend>.

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?

Correction : Ajouter une <legend> en première position dans chaque <fieldset> pour nommer le regroupement de champs.

<fieldset class="customSelect roundBlue"> <select class="styledSelect listBrand" data-set-fournisseur> <option value="" …

Un titre <h4> est vide.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Supprimer les titres vides ou leur donner un contenu textuel.

<h4><img src="https://www.baches-piscines.com/media/produits/volet_protect_one/installation-ourlet-p…

Un élément non interactif (<img>) porte un gestionnaire onclick sans être accessible au clavier.

Chaque élément glisser-déposer est-il contrôlable par le clavier et tout dispositif de pointage ?

Correction : Utiliser un <button>, ou ajouter role="button", tabindex="0" et la gestion des touches Entrée/Espace.

<img style="cursor: zoom-in; display: block; margin: auto;" onclick="(function(el){ var lb=document.getElementById('ligh…

Un élément non interactif (<div>) porte un gestionnaire onclick sans être accessible au clavier.

Chaque élément glisser-déposer est-il contrôlable par le clavier et tout dispositif de pointage ?

Correction : Utiliser un <button>, ou ajouter role="button", tabindex="0" et la gestion des touches Entrée/Espace.

<div id="lightbox" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); justify-content: cente…

Un titre <h2> est vide.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Supprimer les titres vides ou leur donner un contenu textuel.

<h2></h2>

Saut dans la hiérarchie des titres : <h3> suivi de <h5>.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Respecter une hiérarchie de titres continue, sans sauter de niveau.

<h5 style="font-size: 0.83em; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; fo…

Un élément non interactif (<td>) porte un gestionnaire onclick sans être accessible au clavier.

Chaque élément glisser-déposer est-il contrôlable par le clavier et tout dispositif de pointage ?

Correction : Utiliser un <button>, ou ajouter role="button", tabindex="0" et la gestion des touches Entrée/Espace.

<td style="border-radius: 6px; padding: 12px 20px; cursor: pointer; transition: all .15s ease;" onclick="window.open('ht…

Saut dans la hiérarchie des titres : <h1> suivi de <h3>.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Respecter une hiérarchie de titres continue, sans sauter de niveau.

<h3>Nos délais de livraison</h3>

Saut dans la hiérarchie des titres : <h2> suivi de <h5>.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Respecter une hiérarchie de titres continue, sans sauter de niveau.

<h5>Fabriqu&eacute; par notre partenaire <a href="https://liner-couverture-equipement-piscine.fr/" t…

Un en-tête de tableau <th> n'a ni scope ni id.

Pour chaque tableau de données, la technique appropriée permettant d'associer chaque cellule avec ses en-têtes est-elle utilisée ?

Correction : Ajouter scope="col" ou scope="row" sur chaque <th> (ou la technique id/headers pour les tableaux complexes).

<th style="padding: 12px; text-align: left;">Type de couverture</th>

Contraste insuffisant entre le texte et son arrière-plan (ratio calculé 2.54:1).

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?

Correction : Porter le contraste à 4.5:1 minimum (3:1 pour les textes de 24px ou 18.5px gras et plus).

<a style="display: inline-block; padding: 13px 22px; background-color: #18afe3; color: #ffffff; text…

Contraste insuffisant entre le texte et son arrière-plan (ratio calculé 2.34:1).

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?

Correction : Porter le contraste à 4.5:1 minimum (3:1 pour les textes de 24px ou 18.5px gras et plus).

<a style="display: inline-block; padding: 12px 18px; background: #17b6ee; color: #ffffff; text-decor…

Contraste insuffisant entre le texte et son arrière-plan (ratio calculé 2.54:1).

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?

Correction : Porter le contraste à 4.5:1 minimum (3:1 pour les textes de 24px ou 18.5px gras et plus).

<a style="display: inline-block; padding: 13px 22px; background-color: #18afe3; color: #ffffff !impo…

Saut dans la hiérarchie des titres : <h1> suivi de <h4>.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Respecter une hiérarchie de titres continue, sans sauter de niveau.

<h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" data-targe…

Un titre <h1> est vide.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Supprimer les titres vides ou leur donner un contenu textuel.

<h1></h1>

La page ne contient aucun titre de niveau 1 (<h1>).

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Ajouter un unique <h1> décrivant le contenu principal de la page.

Un titre <h5> est vide.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Supprimer les titres vides ou leur donner un contenu textuel.

<h5>&nbsp;</h5>

Un tabindex positif (1) perturbe l'ordre de tabulation.

Dans chaque page web, l'ordre de tabulation est-il cohérent ?

Correction : Utiliser uniquement tabindex="0" ou "-1" et ordonner les éléments dans le flux du DOM.

<input type="email" name="client_email" id="client_email" tabindex="1" required >

Un SVG inline n'a ni nom accessible ni aria-hidden.

Chaque image porteuse d'information a-t-elle une alternative textuelle ?

Correction : Ajouter aria-hidden="true" si le SVG est décoratif, sinon role="img" et un aria-label (ou une balise <title>).

<svg class="svgPhone" version="1.1" id="Phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xl…

Aucune zone de message de statut (aria-live, role="status" ou role="alert") n'est déclarée alors que la page contient un formulaire.

Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d'assistance ?

Correction : Restituer les messages de succès et d'erreur dans un conteneur role="status" ou role="alert" (aria-live).

Aucun lien vers une page « plan du site » n'a été trouvé.

Dans chaque ensemble de pages, la page « plan du site » est-elle atteignable de manière identique ?

Correction : Publier une page plan du site et y donner accès depuis chaque page, au même emplacement.

Un média non temporel (<object>) n'a pas d'alternative.

Chaque média non temporel a-t-il, si nécessaire, une alternative ?

Correction : Fournir une alternative textuelle dans l'élément <object> ou via aria-label / title.

<object type="image/svg+xml" data="/bachesPiscines/images/icons/iconSearchWhite.svg" class="svgSearchWhite"></object>

Un lien factice (href="#" ou javascript:) est utilisé comme bouton.

Chaque élément glisser-déposer est-il contrôlable par le clavier et tout dispositif de pointage ?

Correction : Utiliser un <button> pour une action, ou un lien avec une URL réelle pour une navigation.

<a href="#" class="headerPictoMenu"><img src="/bachesPiscines/images/pictoMenu.png" alt=""></a>

Des contenus sont masqués via un style en ligne display:none.

Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d'assistance ?

Correction : Vérifier que ces contenus doivent bien être ignorés par les technologies d'assistance (sinon utiliser une classe de masquage visuel accessible).

Un champ utilise uniquement un placeholder comme étiquette.

Chaque étiquette associée à un champ de formulaire est-elle pertinente ?

Correction : Ajouter une étiquette persistante <label> : le placeholder disparaît à la saisie et n'est pas fiable.

<input type="text" class="form-control" placeholder="Marque, produit..." name="motclef">

Intitulé de bouton peu explicite : « OK ».

Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?

Correction : Reformuler l'intitulé du bouton pour décrire l'action (ex. « Envoyer le formulaire de contact »).

<button type="submit" class="btn btn-default btnYellow"> OK </button>

Un champ d'identité ou de coordonnées n'a pas d'attribut autocomplete pertinent.

La finalité d'un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l'utilisateur ?

Correction : Ajouter l'attribut autocomplete adapté (ex. autocomplete="email", "given-name", "postal-code") pour permettre le remplissage automatique.

<input type="email" class="form-control" id="subMenuHAEmail" placeholder="Email" name="client_email" disabled="disabled">

Plusieurs régions <nav> sont présentes sans nom accessible distinct.

Les zones de regroupement de contenus présentes dans plusieurs pages web peuvent-elles être atteintes ou évitées ?

Correction : Ajouter un aria-label distinct sur chaque <nav> (ex. « Navigation principale », « Fil d'ariane »).

La balise de présentation <b> est utilisée dans le code.

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation.

Correction : Remplacer <b> par une mise en forme CSS, ou par <strong>/<em> si l'emphase porte du sens.

<b class="titleLvl2">Home</b>

Une couleur de texte est déclarée sans couleur d'arrière-plan associée.

Dans chaque page web, les déclarations CSS de couleurs de fond d'élément et de police sont-elles correctement utilisées ?

Correction : Déclarer systématiquement color et background-color ensemble pour éviter les contrastes imprévisibles.

<span style="color: #eb605c;"> 24/48h</span>

Un lien s'ouvre dans une nouvelle fenêtre sans en avertir l'utilisateur.

Pour chaque page web, l'utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu ?

Correction : Prévenir de l'ouverture dans une nouvelle fenêtre dans l'intitulé, le title ou un aria-label (ex. « … (nouvelle fenêtre) »).

<a href="https://fr.trustpilot.com/review/baches-piscines.com?utm_medium=trustboxes&utm_source=Mini&languages=fr&stars=4&stars=5" target="_b…

Un lien ouvre une nouvelle fenêtre sans en avertir l'utilisateur.

Dans chaque page web, l'ouverture d'une nouvelle fenêtre ne doit pas être déclenchée sans action de l'utilisateur.

Correction : Signaler l'ouverture dans l'intitulé du lien (ex. « … (nouvelle fenêtre) ») ou via un aria-label complété.

<a href="https://fr.trustpilot.com/review/baches-piscines.com?utm_medium=trustboxes&utm_source=Mini&languages=fr&stars=4&stars=5" target="_b…

138 éléments utilisent des styles en ligne pour la présentation.

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l'information ?

Correction : Déplacer la mise en forme dans des feuilles de styles externes plutôt que dans des attributs style.

Un script ouvre une nouvelle fenêtre (window.open), ce qui provoque un changement de contexte.

Pour chaque script qui initie un changement de contexte, l'utilisateur est-il averti ou peut-il le contrôler ?

Correction : Prévenir l'utilisateur du changement de contexte ou remplacer par un lien explicite signalant la nouvelle fenêtre.

Intitulé de lien non explicite hors contexte : « cliquez ici ».

Chaque lien est-il explicite ?

Correction : Reformuler l'intitulé pour qu'il décrive la destination, ou compléter avec un aria-label ou un title pertinent.

<a href="https://www.baches-piscines.com/p-mentions-legales.html">cliquez ici</a>

Un document bureautique est proposé en téléchargement.

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible ?

Correction : Fournir une version accessible du document (ou une alternative HTML) et indiquer le format et le poids dans l'intitulé du lien.

<a href="https://www.baches-piscines.com/media/produits/barres/barre.pdf" target="_blank">Télécharger PDF</a>

Une taille de police est définie en pixels dans un style en ligne.

Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200 %, au moins ?

Correction : Exprimer les tailles de texte en unités relatives (rem, em, %) pour permettre l'agrandissement jusqu'à 200 %.

Une liste de choix contient 17 items sans regroupement.

Dans chaque formulaire, les items de même nature d'une liste de choix sont-ils regroupés de manière pertinente ?

Correction : Regrouper les items de même nature dans des <optgroup> dotés d'un attribut label pertinent.

<select class="styledSelect listBrand" data-set-fournisseur> <option value="" selected>Votre marque</option> <option val…

Image décorative (alt="") qui porte malgré tout un attribut title restitué par les lecteurs d'écran.

Chaque image de décoration est-elle correctement ignorée par les technologies d'assistance ?

Correction : Supprimer l'attribut title des images décoratives et conserver aria-hidden="true" si nécessaire.

<img style="display: block; margin-left: auto; margin-right: auto;" title="bache hiver piscine s&eacute;curit&eacute;" src="https://www.baches-piscines.com/medi…

Des boutons radio de même nature ne sont pas regroupés dans un <fieldset>.

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?

Correction : Regrouper les champs de même nature dans un <fieldset> doté d'une <legend>.

Intitulé de lien non explicite hors contexte : « ici ».

Chaque lien est-il explicite ?

Correction : Reformuler l'intitulé pour qu'il décrive la destination, ou compléter avec un aria-label ou un title pertinent.

<a href="https://www.baches-piscines.com/">ici</a>

La balise de présentation <i> est utilisée dans le code.

Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation.

Correction : Remplacer <i> par une mise en forme CSS, ou par <strong>/<em> si l'emphase porte du sens.

<i class="simplesocialtxt">Tweet </i>

Des champs de même nature (name="contact_id") portent des étiquettes différentes.

Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ?

Correction : Harmoniser les étiquettes des champs remplissant la même fonction sur l'ensemble du site.

La page contient 9 titres de niveau 1.

Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?

Correction : Ne conserver qu'un seul <h1> par page et rétrograder les autres titres.

Une citation <blockquote> n'indique pas sa source.

Dans chaque page web, chaque citation est-elle correctement indiquée ?

Correction : Ajouter l'attribut cite (URL de la source) ou un élément <cite> identifiant la source de la citation.

<blockquote class="wp-embedded-content" data-secret="cr89ISQBvm"><p><a href="https://www.baches-piscines.com/blog/bache-…

Un seul système de navigation détecté (menu : oui, moteur de recherche : non, plan du site : non).

Chaque ensemble de pages contient-il deux systèmes de navigation différents, au moins (hors cas particuliers) ?

Correction : Proposer au moins deux systèmes de navigation parmi : menu de navigation, plan du site, moteur de recherche.

Aucun moteur de recherche n'a été détecté sur la page.

Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ?

Correction : Rendre le moteur de recherche accessible au même emplacement sur toutes les pages (si le site en propose un).