| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. |
| WCAG 1.0 version française officielle |
Jusqu'à ce que le agents-utilisateurs supportent les associations explicites entre étiquettes et contrôles de formulaires, s'assurer que les étiquettes sont correctement positionnées pour tous les contrôles de formulaire avec étiquettes implicitement associées. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Jusqu'à ce que les agents utilisateurs supportent les associations explicites entre labels et contrôles de formulaires, s'assurer que les labels sont correctement positionnés pour tous les contrôles de formulaire avec labels implicitement associés. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
User agents now support explicit associations of labels with form controls, so the "until user agents" clause has been satisfied. This is therefore no longer a requirement under WCAG 2.0. |
| AccessiWeb | Fiche 11.3 : Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ? |
Les étiquettes de formulaire doivent être placées à proximité immédiate des champs de formulaire correspondants : au-dessus ou à gauche pour les zones de texte ou de liste et à droite ou à gauche des cases à cocher et des boutons radio.
Il s'agit encore ici de la condition « Jusqu'à ce que les agents utilisateurs… ». Les logiciels d'adaptation comme JAWS supportent l'association explicite depuis plusieurs versions déjà. Toutefois, pour les utilisateurs d'un logiciel de grossissement comme ZoomText, cette condition demeure d'actualité. En effet, le respect de cette règle permettra que l'étiquette ou une partie de celle-ci soit dans le champ visuel de l'utilisateur même en fort grossissement.
Voir aussi A-Prompt : 10.2 et Technique 10.2 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Associate labels explicitly with their controls. |
| WCAG 1.0 version française officielle |
Associer les étiquettes avec leurs éléments de contrôle de manière explicite. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Associer les labels avec leurs éléments de contrôle de manière explicite. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (level 1) |
| AccessiWeb | Fiche 11.1 : La balise LABEL et les attributs correspondants (ID, FOR) sont-ils présents ? |
De plus, vous devez associer explicitement les étiquettes et les champs correspondants avec l'attribut for qui reprend le id du champ auquel il est associé. À moins que vous disposiez d'une outil spécialisé, cette association doit généralement être faite manuellement dans le code.
Elle permettra à un logiciel de lecture d'écran comme JAWS d'identifier l'étiquette sans devoir jouer aux devinettes (avec le risque d'erreur que cela comporte).
De plus, les personnes ayant des problèmes moteurs pour manipuler la souris pourront cliquer n'importe où dans l'étiquette pour sélectionner le champ. Cela sera particulièrement apprécié pour les cases à cocher et les boutons radio qui occupent une très petite surface à l'écran.
Exemple :
<form method="post" action="unepage.html">
<p>
<label for="pnom">Prénom</label>
<input id="pnom" name="pnom" type="text" />
</p>
<p>
<label for="nomf">Nom de famille</label>
<input id="nomf" name="nomf" type="text" />
</p>
</form>
Voir aussi Aide : 12.4 et Technique 12.4 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Divide large blocks of information into more manageable groups where natural and appropriate. |
| WCAG 1.0 version française officielle |
Lorsque c'est approprié, diviser les grands blocs d'information en groupes plus petits et plus facilement manipulables. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Diviser les grands blocs d'information en groupes plus faciles à gérer lorsque c'est naturel et approprié. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
[No equivalent.] |
| AccessiWeb | Fiche 1.7 : Pour chacune des images MAP, les zones de l'image MAP sont-elles définies juste après la déclaration de l'image MAP ? Fiche 11.2 : Les textes associés aux champs de formulaires donnent-ils leur fonction exacte ? Fiche 11.3 : Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ? Fiche 11.4 : La balise FIELDSET est-elle présente pour encadrer des blocs d'information de même nature ?Fiche 11.5 : La balise LEGEND est-elle présente pour donner un titre au bloc d'informations encadré par la balise FIELDSET ? |
Les longs formulaires devraient être subdivisés en section à l'aide des éléments <fieldset> et <legend>. Un lecteur d'écran comme JAWS répétera alors le contenu de l'élément <legend> pour chacun des champs inclus dans le <fieldset>.
De même, les groupes de boutons radio et les groupes de cases à cocher pourraient être identifiés de la même façon.
Il est d'ailleurs possible d'imbriquer des <fieldset>, mais JAWS ne redonnera que la <legend> hiérarchiquement la plus proche.
Exemple :
<fieldset>
<legend>Indiquez votre sexe :</legend>
<p>
<input id="masc" name="masc" type="radio" checked="checked" value="masculin" />
<label for="masc">Masculin</label>
</p>
<p>
<input id="fem" name="fem" type="radio" value="féminin" />
<label for="fem">Féminin</label>
</p>
</fieldset>
Voir aussi Extrait des techniques [français] : 12.3 et Technique 12.3 [anglais]
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. |
| WCAG 1.0 version française officielle |
Jusqu'à ce que les agents-utilisateurs puissent gérer correctement les contrôles vides, placer du texte pour occuper l'espace dans les champs vides des formulaires [boîtes de textes et lignes d'entrée de texte]. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Jusqu'à ce que les agents utilisateurs prennent en compte les champs vides correctement, placer du texte substituable dans les champs vides des formulaires de type zones d'édition simples et multilignes. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
This "until user agents" condition is now met and this checkpoint is no longer required. |
| AccessiWeb | [Aucun équivalent.] |
Ce point de contrôle est soumis à la condition « jusqu'à ce que les agents utilisateurs… ». Il y a longtemps que cette difficulté a été surmontée par les agents utilisateurs et ce point de contrôle nous apparaît donc désuet.
C'est aussi l'avis des rédacteurs de WCAG 2.0 qui écrivent: « This "until user agents" condition is now met and this checkpoint is no longer required. »
Il est toutefois facile à évaluer par certains outils automatiques et certains préféreront l'appliquer plutôt que de risquer d'être pris en défaut par le premier évaluateur débutant.
Si vous décidez de l'appliquer, ce texte substituable doit être très court. De plus, il serait préférable d'utiliser javascript pour le surligner automatiquement. Sinon, le curseur se placera à la fin du texte substituable et l'utilisateur non-voyant pourrait entrer du texte à la suite sans s'en rendre compte.
Voir aussi A-Prompt : 10.4 et Technique 10.4 [anglais].
Dernière mise à jour : 2006-10-29