1174 sujets

Accessibilité du Web

[Résolu] Libellés sur formulaire

Bonjour,
après un test de mon site avec PageSpeed Insights, je reçois le message suivant :
"Les éléments de formulaire ne sont pas associés à des libellés". Bien, je corrige de la façon suivante :
<p><span class=pp>Votre nom<br></span>
<label>nom:<INPUT type="text" name="nom" size=30></label>
</p>

et je n'ai plus le message d'erreur, la note augmente de 8 point. Cependant, j'ai maintenant le label collé à côté du nom original sur le formulaire (capture d'écran). Ça fait doublon et en plus ce label ne peut pas être formaté.
upload/1680524882-67790-catpure-formulaire.png
Une solution ?
Modifié par Bongota (03 Apr 2023 - 14:29)
Modérateur
Bonjour,

On peut mettre l'<input> avant ou après le <label> si on lui ajoute un "id" et si on ajoute l'attribut "for" au <label> (la valeur du for étant l'id de l'input).

Exemple :
<label for="a">Votre nom</label><br>
<input id="a" type="text" name="nom" size=30>

Amicalement,
Modifié par parsimonhi (03 Apr 2023 - 15:05)
Avec ta méthode, il ne reste effectivement plus que le label qui s'affiche. Cependant et comme prévu, le test m'annonce maintenant que les "ID ARIA ne sont pas uniques".
Et je ne sais pas ce qu'il s'est passé, mais toutes les autres performances ont été dégradées. Pour le moment, j'ai remis mon premier code.
Pour ARIA je ne sais pas, mais pour les IDs il faut bien sûr qu'elles soient uniques, toujours. Pour se faire, afin qu'elles n'interfèrent pas avec d'autres IDs dans la page, il est bien de les préfixer :
#input-*

Modifié par Olivier C (03 Apr 2023 - 15:54)
Modérateur
Salut,

Si on reprend le code donné :

<p><span class=pp>Votre nom<br></span>
<label>nom:<INPUT type="text" name="nom" size=30></label>
</p>


C'est le span le label non ? Il faudrait s'en servir comme ceci :

<p>
<label class="pp" for="input-nom">Votre nom</label>
<INPUT type="text" id="input-nom" name="nom" size=30>
</p>

Et décliner ça avec des id uniques comme l'a suggérer Olivier C
Cette dernière solution n'a pas trop fonctionné sur le test. J'ai peut-être commis quelques erreurs.
Il y a aussi une solution plus simple, enlever les span et utiliser le nom du label comme titre qui s'affiche. Afin d'espacer les rubriques du formulaire, soit mettre des <p> soit des <br>. Par contre, il n'y a pas de formatage possible du texte.
Je ne sais pas si c'est une solution raisonnable, en tous cas, je n'ai pas d'alertes sur le test.

ps : bien sûr, on peut formater le texte du formulaire dans les css sur "label".
Modifié par Bongota (03 Apr 2023 - 17:48)
J'ai finalement opté pour la solution la plus simple, utiliser le label pour désigner les rubriques du formulaire et les formater dans le css. Je ne sais pas si "ça se fait", mais je n'ai plus d'avertissement sur le test.
<p>	
<label>Votre-Nom:<INPUT type="text" name="nom" size=30></label>
</p>

Il faut mettre un tiret entre deux mots sinon ils se placent à chaque bout du formulaire.
Enfin, je n'ai pas réussi à faire disparaître le raz devant "Effacer".
Modérateur
Bonjour,

Il n'y a aucune raison sérieuse de devoir ajouter ce tiret. Ton css doit être inadapté.

Amicalement,
Pas trouvé de solution dans le css. J'ai tenté le caractère invisible html &#817; avec une espace après le premier mot. Ça fonctionne mais il y a un tout petit trait sous la première lettre du deuxième nom. Et ce n'est pas très élégant comme pratique. Je préfère le tiret, en attendant de le résoudre avec css.
Bongota a écrit :
Pas trouvé de solution dans le css.

text-align: left ?

Il doit y avoir quelque chose qui interfère, mais sans voir le code de la page, difficile à dire
Salut,
non, text-align:left; ne fait rien. Voici le css concernant le formulaire
button, input, select, textarea {
  	font-family : inherit;
  	font-size:1.1em;}
  input[type=text], textarea, input[type=email] {
  	width:100%;
  	padding:1px;
  	text-align:center;
  	border-radius:4px;
  	box-sizing: border-box;
  	resize: vertical;
  	border:solid 1px black;
  	background:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));}
  label{
	margin-right:0px;
  	margin-left:0px;
  	width:60%;
  	font-size:1.2em;}
input[type=submit] {
  	background:#1255a2;
  	color: white;
  	padding:0 1px 0 1px;
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;}
  input[type=reset] {
	padding:0 0 0 0;
	background:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));}
input[type=submit]:hover {
border:4px solid #ccc}

Et le html pour le nom :
<p>	
<label>Votre Nom:<INPUT type="text" name="nom" size=30></label>
</p>
Je viens de faire un CodePen : Test pour Bongota.

Quel est le problème du coup ? Car le Pen ne semble pas poser de problème. Fork-le et modifie-le comme tu veux pour reproduire ton bug, ce sera beaucoup plus simple.
Ton pen transposé chez moi ne changeait rien, alors en inspectant plus loin, j'ai trouvé. Tout bête, la class qui entourait le formulaire (et l'ensemble du pied de page) était en text-align:justify;. Je l'enlève, "Votre et Nom" sont bien l'un à côté de l'autre.
De ce fait, et comme le formulaire est dans le pied de page, plus rien n'est justifié dans les textes de ce pied de page. Ce qui finalement est plutôt bénéfique.
Le simple fait d'être justifié poussait le second mot du formulaire en fin de ligne, il fallait le deviner, et s'en souvenir pour l'avenir.
Quand un problème est résolu sur ce forum, j'ai pour habitude de le sauvegarder. Je commence à avoir une grosse base de problèmes résolus dans laquelle je puise.
Merci. Smiley smile
Modifié par Bongota (05 Apr 2023 - 16:11)
Meilleure solution
Bon ben voilà.

C'est pour cela qu'il est toujours pertinent d'isoler le code incriminé. On perçoit tout de suite mieux le problème.
Merci Felipe, c'est la documentation que j'attendais, bien que j'ai laissé tranquille ce formulaire depuis. Je vais reprendre tout ça avec ces nouveautés.
Bonne journée.
Prévenir un modérateur
Répondre au sujet
Aller à