1174 sujets

Accessibilité du Web

[Résolu] W3C refuse de valider un tabindex

Pages :
Bonjour Smiley smile

Je ne maîtrise absolument pas les formulaires (arfff ! va falloir que je m'y mette)... et encore moins ceux de spip. J'ai voulu ajouter des tabindex à celui affiché ci-dessous, mais le valideur du W3C me refuse le tabindex numéro 10 et je ne vois pas pourquoi Smiley confus

Si quelqu'un pouvait éclairer ma lanterne, svp Smiley cligne Merci d'avance !

  <form action="[(#ENV{action})]" method='post'>[
    <input type="hidden" name="id_formulaire_ecrire_auteur" value="(#ENV{valide})" />]
    <label tabindex="10"><:form_pet_votre_email:><br />
      <input tabindex="11" type="text" class="forml" name="email_message_auteur[(#ENV{id})]"
      	value="[(#ENV{mail})]" size="30" />
    </label><br />
    <label tabindex="12"><:form_prop_sujet:><br />
      <input tabindex="13" type="text" class="forml" name="sujet_message_auteur[(#ENV{id})]"
    	value="[(#ENV{sujet})]" size="30" />
    </label><br />
    <label tabindex="14">Le texte de votre message</label><br />
    <textarea tabindex="15" name="texte_message_auteur[(#ENV{id})]" rows='10' class='forml' cols='40'>[(#ENV{texte})]</textarea><br />
    <input tabindex="16" type="submit"  class="spip_bouton" name="valide" value="[(#ENV{bouton})]" />
  </form>


A tout hasard, si vous voyez quelque chose qui peut gêner l'accessibilité, merci de me prévenir ..... heuuuuuu ! si possible avec quelques explications Smiley smile
le code HTML final produit par SPIP serait plus pratique pour déceler l'erreur Smiley cligne

cela dit, une correction importante à apporter pour l'accessibilité : remplacer les labels implicites par des labels explicites. Voir http://forum.alsacreations.com/topic.php?fid=1&tid=4908&p=1#p42244 pour un exemple tout frais et le pourquoi du comment Smiley cligne

cela dit, une question bête : en quoi ce formulaire a-t-il besoin de tabindex partout ? surtout de tabindex à la fois sur le label et sur le champ ?

Un tabindex unique pour un fieldset, ou pour le formulaire lui-même ne suffirait-il pas à assurer une tabulation par défaut satisfaisante ?
Modifié par Laurent Denis (28 Jun 2005 - 13:36)
Merci Laurent Denis Smiley cligne je vais aller voir ce lien...

En attendant, voici le code généré :
  <form action="formulaire-courriel.php" method='post'>
    <label tabindex="10">Votre adresse email<br />
      <input tabindex="11" type="text" class="forml" name="email_message_auteur_1"
      	value="" size="30" />
    </label><br />
    <label tabindex="12">Sujet<br />
      <input tabindex="13" type="text" class="forml" name="sujet_message_auteur_1"
    	value="" size="30" />
    </label><br />
    <label tabindex="14">Le texte de votre message</label><br />

    <textarea tabindex="15" name="texte_message_auteur_1" rows='10' class='forml' cols='40'></textarea><br />
    <input tabindex="16" type="submit"  class="spip_bouton" name="valide" value="Envoyer un message" />
  </form>
Smiley lol Bonne sieste !!

Mais moi, non, puisque je suis là pour apprendre et que j'ai bien préciser et j'ai bien fait, que je ne maîtrise pas du tout les formulaires Smiley cligne

Merci !

Je vais corriger ça, et voir le problème des labels...
Super ! merci Laurent Denis,

je suis arrivée à rendre ce formulaire valide Smiley langue

Concernant l'accessibilité, je suis également allé sur le site openweb et là, j'ai trouvé un lien vers la traduction de la page citée dans ta réponse.

Avec tout ça, j'arrive à ce résultat : 

  <form action="formulaire-courriel.php" method="post">
    <label for="votre_email">Votre adresse email<br>
      <input tabindex="10" class="forml" name="email_message_auteur_1" value="" size="30" id="votre_email" type="text">
    </label><br>
    <label for="sujet">Sujet<br>
      <input tabindex="11" class="forml" name="sujet_message_auteur_1" value="" size="30" id="sujet" type="text">
    </label><br>
    <label>Le texte de votre message</label><br>
    <textarea tabindex="12" name="texte_message_auteur_1" rows="10" class="forml" cols="40"></textarea><br>
    <input tabindex="13" class="spip_bouton" name="valide" value="Envoyer un message" type="submit">
  </form>


Est-ce correct sur le plan de l'accessibilité, y-a-t'il d'autres éléments à ajouter ?

Merci d'avance pour vos réponses Smiley cligne
Salut dominique,
Je ne sais pas si cela a une incidence particulière mais je crois qu'il vaut mieux fermer la balise label avant les input.
dominique a écrit :
Est-ce correct sur le plan de l'accessibilité, y-a-t'il d'autres éléments à ajouter ?


Il y a ce salmigondi de labels ni implicites ni explicites à corriger d'urgence ! (comme dit Olivier, "fermer les label")

Je n'ai pas été très précis tout à l'heure là-dessus, désolé. Donc :

le label implicite n'utilise pas l'id du contrôle, mais le contrôle est placé dans le label :
<label>Blabla
      <input ... />
    </label>


L'association entre le label et le contrôle ne se fait pas dans de nombreux lecteurs d'écran, à commencer par JAWS. WCAG2.0 déconseille explicitement cette technique (WCAG1.0 n'était pas au courant);

le label explicite utilise for= pour s'associer à l'id du contrôle. Le contrôle est placé en dehors du label :
<label for="mon_id">Blabla</label>
      <input id="mon_id"... />


Là, pas de problème d'accessibilité.
Modifié par Laurent Denis (28 Jun 2005 - 17:39)
Merci beaucoup pour ces précisions Smiley biggrin

Ayé ! c'est corrigé Smiley cligne 

  <form action="formulaire-courriel.php" method="post">
    <label for="votre_email">Votre adresse email</label><br>
      <input tabindex="10" class="forml" name="email_message_auteur_1" value="" size="30" id="votre_email" type="text">
    <br>
    <label for="sujet">Sujet</label><br>

      <input tabindex="11" class="forml" name="sujet_message_auteur_1" value="" size="30" id="sujet" type="text">
    <br>
    <label>Le texte de votre message</label><br>
    <textarea tabindex="12" name="texte_message_auteur_1" rows="10" class="forml" cols="40"></textarea><br>
    <input tabindex="13" class="spip_bouton" name="valide" value="Envoyer un message" type="submit">
  </form>


... et en attendant, je suis passé sur valideur Wai du W3C qui me signale une erreur sur le "textarea" ???
Bonjour oli Smiley smile

Le doctype :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Extrait de la page WAI
a écrit :

12.4 Associate labels explicitly with their controls.

* Rule: 12.4.1 - Identify all non-hidden INPUT elements that do not have an explicit LABEL association.
o No invalid INPUT elements found in FORM element found at Line: 53, Column: 11.
o No invalid INPUT elements found in FORM element found at Line: 116, Column: 3.
* Rule: 12.4.2 - Identify all TEXTAREA elements that do not have an explicit LABEL association.
o No TEXTAREA Elements found within FORM element found at Line: 53, Column: 11.
o Failure - TEXTAREA Element at Line: 126, Column: 5 in FORM Element at Line: 116, Column: 3
* Rule: 12.4.3 - Identify all SELECT elements that do not have an explicit LABEL association.
o No SELECT Elements found within FORM element found at Line: 53, Column: 11.
o No SELECT Elements found within FORM element found at Line: 116, Column: 3.
* Rule: 12.4.4 - Identify all OBJECT elements, within a FORM element, that do not have an explicit LABEL association.
o No OBJECT Elements found within FORM element found at Line: 53, Column: 11.
o No OBJECT Elements found within FORM element found at Line: 116, Column: 3.


Pas très clair comme avis ?
Bonjour,

Le validateur Cynthia indique une erreur car il n'y a pas d'association entre le label (le texte de votre message) et le textaera.
En utilisant les attributs for et id comme dans le reste du formulaire devrait résoudre le problème.

Cordialement,
Bonjour,

Il manque un attribut for à ton label et l'attribut correspondant id dans ton textarea

 <label [b]for="ton-textarea"[/b]>Le texte de votre message</label><br>
<textarea [b]id="ton-textarea"[/b] tabindex="12" name="texte_message_auteur_1" rows="10" class="forml" cols="40"></textarea>


J'en profite pour ajouter qu'en Xhtml toute les balises doivent être fermées, <br> s'écrit donc <br />

JP
Effectivement,
Les br doivent être fermés, ainsi que les input :

 <input tabindex="10" [...] type="text" />


Cordialement,
Salut Dominique Smiley smile

pour la déclaration du doctype il me semble qu'il y a une erreur.

Cela devrait être :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Modifié par oli (29 Jun 2005 - 11:04)
Merci à vous pour cette aide précieuse Smiley smile

Dans l'ordre :
- Merci Eric_Gateau et jpv pour le label du textarea, je vais corriger ça Smiley cligne

- Les "br" et les "input" sont bien fermés dans la source (voir le code dans le premier post ci-dessus), le code que j'affiche dans les posts suivants est la source de firefox... Allez savoir pourquoi il ne ferme pas ces balises ???

- Sauf erreur de ma part, il n'y a pas de différence entre ton doctype et le mien, oli ???
Pages :
Sujet clos
Aller à